What Is the Next.js App Router?
The App Router is the modern way to build routes in Next.js 13+. It uses React Server Components by default and brings a cleaner, file-based convention.
The App Router introduced in Next.js 13 replaces the older Pages Router with a more powerful, React-first model.
"The App Router isn't just a new directory — it's a new mental model for React on the server."
Key concepts
React Server Components
By default, every file inside app/ is a Server Component. This means the component runs on the server, can read from databases directly, and ships zero JavaScript to the client unless you opt in with "use client".
Definition
React Server Components
Components that render exclusively on the server, shipping zero JavaScript to the browser. They can read databases and secrets directly, with async/await at the top level.
File conventions
| File | Purpose |
|---|---|
page.tsx | Route UI — the visible page |
layout.tsx | Shared UI that wraps pages |
loading.tsx | Suspense loading state |
error.tsx | Error boundary UI |
Nested layouts
Layouts nest automatically. A layout.tsx at app/blog/layout.tsx wraps all routes under /blog/ without any extra wiring.
Why it matters
The App Router enables:
- Streaming — send HTML to the browser as data resolves instead of waiting for the full page.
- Server Actions — run server-side mutations directly from form elements.
- Colocation — keep tests, styles, and components next to the routes that use them.