app-router-patterns

Next.js App Router Excellence

Server Components vs Client Components

• Default is Server Component — every file in app/ is a Server Component unless marked otherwise
• Add "use client" only at the boundary where you need browser APIs, event handlers, or React state
• Keep "use client" components as leaf nodes; wrap them in Server Components for data fetching
• Never fetch data inside a Client Component when a Server Component parent can pass it as a prop

// ✅ Server Component — async, direct DB/API access, no "use client"
// app/products/page.tsx
import { db } from '@/lib/db'

export default async function ProductsPage() {
  const products = await db.product.findMany({ orderBy: { createdAt: 'desc' } })

  return (
    <main>
      <h1>Products</h1>
      {products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </main>
  )
}

// ✅ Client Component — only for interactivity
// components/add-to-cart-button.tsx
'use client'

import { useState } from 'react'

interface AddToCartButtonProps {
  productId: string
}

export function AddToCartButton({ productId }: AddToCartButtonProps) {
  const [loading, setLoading] = useState(false)

  const handleAdd = async () => {
    setLoading(true)
    await addToCart(productId)
    setLoading(false)
  }

  return (
    <button onClick={handleAdd} disabled={loading}>
      {loading ? 'Adding…' : 'Add to Cart'}
    </button>
  )
}

App Router File Conventions

app/
├── layout.tsx          # Root layout — wraps all routes, runs once
├── page.tsx            # Route UI rendered at /
├── loading.tsx         # Automatic Suspense boundary for this segment
├── error.tsx           # Error boundary ("use client" required)
├── not-found.tsx       # Rendered by notFound() or unmatched routes
├── global-error.tsx    # Error boundary for root layout
├── route.ts            # API Route Handler (no page.tsx in same segment)
├── template.tsx        # Like layout but re-mounts on navigation
└── products/
    ├── page.tsx         # Renders at /products
    ├── [id]/
    │   └── page.tsx     # Renders at /products/:id
    └── (marketing)/     # Route group — ignored in URL path
        └── page.tsx