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.
Each stage in order — click any step to read what it does.
App Router file system: special files per segment and their roles.
The trade-offs worth knowing before you build this.
Must await params before accessing .id: const { id } = await params. Synchronous access triggers a warning.
Use @slot folders (e.g. @modal, @sidebar) to render multiple pages at the same URL and update them independently.
In Next.js 16, use "use cache" + cacheTag()/cacheLife() instead of fetch({ next: { revalidate, tags } }). Cleaner and composable.
Sign in to share your feedback and join the discussion.
