Nextjs App Router

Next.js App Router

Production guidance for Next.js 16 App Router applications. Server-first: keep rendering, data access, and secrets on the server; add 'use client' only for interactivity.

Architecture Overview

Request → proxy.ts → Route (layout/page) → Server Components → DB/API
                              │                    │
                              │                    ▼
                              │              RSC Payload + HTML
                              │                    │
                              ▼                    ▼
                        Route Handlers      Streaming + Suspense
                                                   │
                                                   ▼
                                          Client Components (hydrate)

Quick Reference

Decision Matrix: "What Do I Use?"

Component Decision Tree

Need useState, useEffect, onClick, or browser APIs?
├── YES → Client Component ('use client' at leaf)
└── NO  → Server Component (default — no directive)

Need to mutate data?
├── HTML form / button → Server Action
└── External HTTP API  → Route Handler

Data & Caching

Routing Conventions

Code Review Checklist

Components & Data

• Server Components by default; 'use client' only at leaves
• Data fetched in Server Components, not via client useEffect
• Parallel fetching with Promise.all() where independent
• params / searchParams / cookies() / headers() awaited
• No secrets or DB clients in Client Components

Mutations & Cache

• Server Actions authenticate and authorize
• updateTag or revalidateTag after mutations
• No cookies() inside shared 'use cache' scopes (use 'use cache: private' for per-user)

Routing & UX

• Nested layouts; no duplicated page wrappers
• loading.tsx / error.tsx on slow or critical routes
• notFound() for missing resources

Security

• proxy.ts gates auth; Server Actions re-verify
• Input validated in Server Actions and Route Handlers

Performance & SEO

• next/image and next/font used
• Metadata on every public page
• Suspense for slow streaming sections

Anti-Patterns

• 'use client' on entire pages or layouts
• Client Component fetching data the server could fetch
• Route Handlers for internal reads (use Server Components)
• Sequential awaits for independent requests
• middleware.ts instead of proxy.ts (Next.js 16)
• Sync params or cookies() (removed)
• revalidateTag(tag) without second argument
• Auth only in proxy — not in Server Actions

Resource Map

References

Verified against Next.js 16 App Router documentation.

• Project Structure
• Server and Client Components
• Fetching Data
• Caching
• Route Handlers
• Proxy
• Upgrading to Version 16

Last verified: July 2026