Next.js
The React framework for production — routing, rendering, caching, deploy.
intermediate · 2–3 months · 3 milestones · 11 topics
Tap a box to open it · right-click to mark done
Tap a box to open it
Full outline
Master the App Router: layouts and routes, server and client boundaries, the caching model, data fetching and mutations, metadata and SEO, performance, and deployment.
01Routing & Layouts
The file system is the router.
- App Router basics
Folders are routes, files are UI. Layouts persist across navigation.
- Dynamic & parallel routes
Generating routes from data, and rendering several route trees at once.
- Navigation & prefetching
Client-side transitions that feel instant.
- App Router basics
02Rendering & Data
Choose a strategy per route, not per app.
- Server vs Client Components
Server by default; opt into the client only where interactivity demands it.
- Data fetching
Fetch where the data is used; the framework deduplicates.
- The caching model
The hardest part of Next.js, and the most valuable to understand precisely.
- Server Actions
Mutations that run on the server and revalidate affected caches.
- Server vs Client Components
03Production
Metadata, performance, deployment.
- Metadata & SEO
Titles, descriptions, Open Graph images and structured data.
- Images, fonts & scripts
Built-in primitives that solve most performance problems for you.
- Proxy & route handlers
Request interception and API endpoints inside the same app.
- Deployment
Getting it live, fast, everywhere.
- Metadata & SEO