nextjs-app-router

Next.js App Router Patterns

Patterns for building applications with the Next.js App Router architecture.

When to Use

• User is building or migrating to Next.js App Router
• User asks about server vs client components
• User needs route handlers, middleware, or API routes
• User asks about parallel routes or intercepting routes
• User needs streaming, Suspense, or loading states
• User asks about Next.js caching or revalidation

Core Patterns

Server Components (Default)

All components in the App Router are server components by default. They run on the server, can access databases directly, and send zero JavaScript to the client.

// app/products/page.tsx -- Server Component (no "use client" directive)
import { db } from '@/lib/db'

interface Product {
  id: string
  name: string
  price: number
}

export default async function ProductsPage() {
  const products: Product[] = await db.query('SELECT * FROM products ORDER BY name')

  return (
    <main>
      <h1>Products</h1>
      <ul>
        {products.map((p) => (
          <li key={p.id}>
            {p.name} -- ${p.price}
          </li>
        ))}
      </ul>
    </main>
  )
}

Use "use client" only when the component needs interactivity (event handlers, hooks, browser APIs).

'use client'
// app/products/add-to-cart-button.tsx -- Client Component
import { useState } from 'react'

export function AddToCartButton({ productId }: { productId: string }) {
  const [isPending, setIsPending] = useState(false)

  const handleClick = async () => {
    setIsPending(true)
    await fetch('/api/cart', {
      method: 'POST',
      body: JSON.stringify({ productId }),
    })
    setIsPending(false)
  }

  return (
    <button onClick={handleClick} disabled={isPending}>
      {isPending ? 'Adding...' : 'Add to Cart'}
    </button>
  )
}

Route Handlers

Replace API routes from Pages Router. Define HTTP methods as named exports.

// app/api/users/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { z } from 'zod'
import { db } from '@/lib/db'

const CreateUserSchema = z.object({
  name: z.string().min(1).max(100),
  email: z.string().email(),
})

export async function GET(request: NextRequest) {
  const { searchParams } = request.nextUrl
  const page = parseInt(searchParams.get('page') || '1', 10)
  const limit = parseInt(searchParams.get('limit') || '20', 10)

  const users = await db.user.findMany({
    skip: (page - 1) * limit,
    take: limit,
  })

  return NextResponse.json({ data: users, meta: { page, limit } })
}

export async function POST(request: NextRequest) {
  const body = await request.json()
  const parsed = CreateUserSchema.safeParse(body)

  if (!parsed.success) {
    return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 })
  }

  const user = await db.user.create({ data: parsed.data })
  return NextResponse.json({ data: user }, { status: 201 })
}