Next.js App Router Best Practices

This sample project demonstrates modern Next.js patterns and architecture conventions.

1. Server Components by Default (RSC)

Zero Bundle Impact

All components in the App Router are React Server Components unless annotated with "use client". RSCs keep heavy dependencies and data fetching logic on the server, significantly reducing client JavaScript bundle sizes.

2. Push "use client" to the Leaves

Leaf Interactivity

Keep interactivity isolated to leaf nodes (like AddTaskForm, TaskItemActions, and FilterControls). Container layouts, data fetchers, and card presentations remain Server Components.

3. Streaming with Suspense

Instant TTFB

Instead of blocking the entire page on slow data calls, independent sections (like TaskStats and TaskList) stream in progressively via React Suspense with skeleton loading states.

4. Server Actions for Mutations

Progressive Enhancement

Form submissions and item mutations use native React 19 Server Actions ("use server") paired with revalidatePath() to re-render server data without manual API fetch calls.

5. URL State as Single Source of Truth

Deep Linking

Search parameters (q, status) live in the URL query string, enabling shareable URLs, browser back/forward navigation, and seamless server-side filtering without client state drift.

6. Declarative Route Conventions

Convention over Config

Utilizing built-in special files (layout.tsx, page.tsx, loading.tsx, error.tsx, not-found.tsx) ensures standardized layout inheritance, loading skeletons, and error handling.

File & Directory Architecture

src/
├── actions/              # Server Actions ("use server")
│   └── task-actions.ts   # Form & button mutations with revalidatePath()
├── app/                  # Next.js App Router routes & conventions
│   ├── about/page.tsx    # Static route with metadata
│   ├── api/tasks/        # Route Handlers (REST endpoints)
│   ├── error.tsx         # Client Error Boundary ("use client")
│   ├── globals.css       # Tailwind CSS styles
│   ├── layout.tsx        # Root Layout with shared navigation & SEO
│   ├── loading.tsx       # Instant route loading fallback
│   ├── not-found.tsx     # Custom 404 page
│   └── page.tsx          # RSC Dashboard with Suspense streaming
├── components/
│   ├── client/           # Interactive components ("use client")
│   ├── layout/           # Shared layout components (Navbar, Footer)
│   └── server/           # React Server Components (RSC) & Skeletons
├── lib/                  # Data access layer & business logic
└── types/                # Shared TypeScript definitions