Build Next.js 14+ App Router Architectures

Covers Next.js App Router's five rendering modes - server components for data fetching, heavy computation, and secrets; client components for interactivity and browser APIs; static rendering at build time; dynamic rendering at request time; and streaming for large or slow pages - and its file-convention system: layout.tsx, page.tsx, loading.tsx, error.tsx, not-found.tsx, route.ts, template.tsx, default.tsx, and opengraph-image.tsx. Ships eight patterns: server components fetching data directly in an async component, client components marked with the 'use client' directive for interactivity, server actions for form mutations without a separate API route, parallel routes (a dashboard layout rendering named slots like @analytics and @team as independent, independently-loading sections alongside the main children), intercepting routes for a modal pattern (an (.)photos/[id]/page.tsx that intercepts navigation to show a photo in a modal over the current page, while app/photos/[id]/page.tsx still serves the full standalone page on direct navigation or refresh), streaming with Suspense for progressive rendering, route handlers for API endpoints, and metadata generation for SEO. Documents the Data Cache layer and its caching strategies for controlling how fetched data is stored and revalidated across requests.

Use it when building pages with the Next.js App Router, choosing between server and client components, implementing form mutations, structuring parallel or intercepted routes, streaming large pages, building API route handlers, or setting page metadata for SEO. Skip it for anything unrelated to Next.js App Router patterns or outside this scope.

Input is a routing or rendering need - a data-fetching page, an interactive component, a form mutation, a multi-panel dashboard, a modal-over-page navigation, or an API endpoint; output is the matching App Router file, such as page.tsx, a server action, a parallel-route slot, an intercepting route, or a route.ts handler, following the documented file conventions.

Built entirely on Next.js's App Router: the app/ directory convention, React Server Components, Suspense for streaming, and the Data Cache. No external state-management or data-fetching library is required, since server components and server actions handle data fetching and mutation directly.

Next.js developers building or migrating to the App Router who need concrete patterns for server and client component boundaries, parallel and intercepted routes, and caching rather than the framework documentation alone. Also covers migrating an existing Pages Router application to App Router, building full-stack features with Server Actions, and optimizing data fetching and caching within the App Router model.