All roadmaps

The Next.js roadmap

Every Next.js lesson we teach, laid out as one path. Each station is a stage; tap any lesson to open it. Stations turn teal as you finish them.

Legend:Lesson stageStage completeTap a lesson to open it
01

The RSC Paradigm & Architecture

Server vs Client Components
App Router File-System Routing
Route Segments & Nested Routing
Server Component Payloads & Serialization
02

UI & Routing Special Files

page.js
layout.js
Root Layout
template.js
loading.js
error.js
global-error.js
not-found.js
default.js
03

Advanced Routing Paradigms

Dynamic Routes
Catch-all Routes
Optional Catch-all Routes
Route Groups
Parallel Routes
Intercepting Routes
<Link> Component
redirect & permanentRedirect
04

The Caching Ecosystem

Request Memoization
The Data Cache
The Full Route Cache
The Router Cache
Time-based Revalidation (ISR)
On-Demand Revalidation (revalidatePath)
On-Demand Revalidation (revalidateTag)
Dynamic Rendering (Opting Out)
React cache()
05

Server Actions & Mutations

Server Actions (Forms)
Server Actions (Non-Forms)
useActionState
useFormStatus
useOptimistic
Server Actions Error Handling
Server Actions Security
06

Client-Side Hooks & APIs

useRouter
usePathname
useSearchParams
useParams
useSelectedLayoutSegment
useSelectedLayoutSegments
07

Route Handlers (API)

Route Handlers
Static vs Dynamic Route Handlers
Web Request & Response APIs
08

Optimizations & Components

<Image> (Local)
<Image> (Remote)
<Image> (Advanced)
<Font>
<Script>
Third-Party Integrations
09

SEO & Route Generation

Static Metadata
Dynamic Metadata
generateStaticParams
Dynamic SEO Files
Image Metadata Files
10

Infrastructure & Configuration

Middleware
Middleware Capabilities
Environment Variables
Edge vs Node.js Runtime
Draft Mode
11

v15 Modern Features

React Compiler Integration (v15)
Partial Prerendering (PPR)
Dynamic IO API (v15)