File conventions, async params, parallel routes, use cache.

Next.js 16 App Router — Layouts, Cache Components, Proxy

The Next.js App Router introduces a file-system routing model built entirely on React Server Components. Every segment has a page.tsx (rendered content), layout.tsx (persistent shell), loading.tsx (Suspense boundary), and error.tsx (error boundary). In Next.js 16, Cache Components with the "use cache" directive replace the old fetch cache options, and a built-in Proxy simplifies local development against remote APIs.

Interactive Pipeline Flow

SetupCoreOutput

🌐 URL — /products/[id]

URL is matched against the app/ directory. Each path segment corresponds to a folder. Dynamic segments use [param] or [...catchAll] syntax.

Architecture Diagrams

Next.js 16 "use cache" directive with cacheTag and cacheLife.

Loading diagram...

Key Design Decisions

⚠️params is a Promise in Next.js 15+

Must await params before accessing .id: const { id } = await params. Synchronous access triggers a warning.

🔀Parallel routes for independent slots

Use @slot folders (e.g. @modal, @sidebar) to render multiple pages at the same URL and update them independently.

💾"use cache" > fetch cache options

In Next.js 16, use "use cache" + cacheTag()/cacheLife() instead of fetch({ next: { revalidate, tags } }). Cleaner and composable.

Discussion