The App Router is how modern Next.js apps are built. If you're starting a new project in 2026 — or using an AI builder that outputs Next.js — you're using App Router. Here's the complete mental model.
File-based routing
Every folder in app/ becomes a URL segment. app/blog/page.tsx → /blog. app/blog/[slug]/page.tsx → /blog/any-slug. The file system IS your router.
Special files
page.tsx— the route's UI. Required to make a route publicly accessible.layout.tsx— wraps all child routes. Persists across navigation (doesn't re-render).loading.tsx— loading UI shown while the page loads (Suspense boundary).error.tsx— error UI shown when the page throws.not-found.tsx— 404 page for the route segment.opengraph-image.tsx— generates a dynamic OG image for the route.
Layouts
Layouts are the killer feature. A layout wraps all pages in its folder and all subfolders. The root layout (app/layout.tsx) wraps the entire app. A blog/layout.tsx wraps all blog routes. Layouts don't re-render on navigation — only the page content changes. This gives you persistent headers, sidebars, and navigation for free.
Route groups
Parenthesized folder names like (marketing) create route groups — they share a layout without adding a URL segment. app/(marketing)/pricing/page.tsx renders at /pricing, not /marketing/pricing. Use groups to organize code without affecting URLs.
Server vs Client Components
Every component is a Server Component by default. Add 'use client' at the top of a file to make it a Client Component. Keep the boundary as low as possible — only interactive elements need client JavaScript.
Metadata API
Export a metadata object or generateMetadata function from any page or layout. Next.js merges them top-down. The root layout sets defaults; pages override with specifics. This is how you get per-page titles, descriptions, canonicals, and OG images without a third-party library.
Why AI builders use App Router
App Router provides the infrastructure AI-generated apps need: file-based routing (no manual config), the metadata API (SEO without libraries), Server Components (fast by default), and layouts (persistent navigation). Every serious AI builder targeting Next.js generates App Router code.