Next.js App Router
Last updated: 2026-11-02
Next.js App Router App Router
The App Router is the file-convention router introduced in Next.js 13+: every folder under app/ becomes one URL segment, page.tsx defines the page, layout.tsx is the shared layout that is not re-rendered on navigation, and the loading and error files take care of loading and error states automatically. The result is routing with almost no boilerplate.
| Group | Ecosystem |
|---|---|
| Kind | Pattern |
| Since | Introduced with Next.js 13 (App Router), still evolving in 14 / 15 |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
app/
├─ layout.tsx # root layout: shared by every route
├─ page.tsx # route / (home page)
├─ about/
│ └─ page.tsx # route /about
└─ posts/
├─ page.tsx # route /posts
└─ [slug]/
└─ page.tsx # dynamic route /posts/:slug
// app/about/page.tsx — a server component can be async by default
export default async function AboutPage() {
return <h1>About us</h1>
}⚙️ Parameters
| page.tsx | The only entry file for a route; without it in a folder no route is generated. |
|---|---|
| layout.tsx | The shared layout component: it stays mounted while child routes change and is not re-rendered, which makes it the right place for a nav bar or a sidebar. |
| [slug] dynamic segment | A folder name in square brackets declares a dynamic parameter, and the page component reads the actual value from params.slug. |
Returns：No return value — the App Router is a file-convention router; the rules are described in the syntax and the example.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Simulation: the left panel is a page switcher — clicking one of the four route buttons highlights it in blue and changes the current page; the file-tree panel on the right shows the app/ file path that backs the current URL in real time, for example /posts/hello maps to app/posts/[slug]/page.tsx. It makes the files-are-routes convention visible at a glance.💡 Key Points
🏷️ More Ecosystem
💡 Related Cases
📚 Related Tutorials
❓ FAQ
