The Next.js App Router Explained: Layouts, Server Components, and File-Based Routing
Folders are routes, layout.tsx nests automatically, every page is a Server Component by default. How the pieces fit together, not just the names.
The App Router's file conventions look like a lot to memorize — `page.tsx`, `layout.tsx`, `loading.tsx`, `[slug]`. They're actually a small number of real ideas, each solving a specific problem, wearing a filename.
Folders are routes, `page.tsx` is the content
app/
blog/
page.tsx → /blog
[slug]/
page.tsx → /blog/:slug (dynamic segment)A folder defines a URL segment; `page.tsx` inside it is what actually renders there. A folder with no `page.tsx` isn't a route at all — useful for grouping shared layout or colocating related files without exposing a URL for that segment.
`layout.tsx` nests automatically, and persists across navigation
A `layout.tsx` wraps every `page.tsx` inside its folder and every nested folder beneath it — this site's root `layout.tsx` (the header, footer, skip link) wraps every single route. The genuinely useful part: navigating between two pages that share a layout does NOT re-render that layout — its React state survives the navigation, because the App Router preserves the shared parts of the tree instead of tearing the whole page down and rebuilding it.
Every route is a Server Component, unless you opt out
As covered in the previous pillar, `page.tsx` and `layout.tsx` are Server Components by default — meaning they can be `async` and directly fetch data before any HTML is sent, and their code doesn't ship to the browser at all unless a child explicitly opts into `"use client"`.
`loading.tsx` and `error.tsx`: real React Suspense and error boundaries, as file conventions
A `loading.tsx` next to a `page.tsx` automatically wraps that page in a Suspense boundary with that component as the fallback — instant loading UI on navigation, with zero manual `<Suspense>` wiring. `error.tsx` is the same idea for error boundaries. Both are just React features (Suspense, error boundaries) that the file-based convention wires up automatically, not new Next.js-specific mechanisms underneath.