Routing
Beginner
App Router Fundamentals
Understand the new App Router architecture, file-based routing, and how Next.js handles navigation.
20 min
3 sections
routing
app-router
navigation
1
2
3
01. How App Router Works
Section 1 of 3
The App Router uses a file-system based routing where folders define routes. A route is a path like /about or /blog/first-post.
typescript
app/
├── page.tsx → / (home page)
├── about/
│ └── page.tsx → /about
├── blog/
│ ├── page.tsx → /blog
│ └── [slug]/ → /blog/:slug
│ └── page.tsx → /blog/first-postBack to Course