Learn Next.js 16, step by step.
Nineteen lessons covering routing, rendering, data fetching, server actions and deployment. Every lesson has a try-it exercise and a short quiz. Progress is saved in your browser.
Beginner
What is Next.js?
Meet the framework: what it is, what problem it solves, and how it fits with React.
Setup & Project Structure
Install Node, scaffold a project with create-next-app, and learn what each folder is for.
Pages & the App Router
Turn folders into URLs. The most important convention in Next.js.
Linking & Navigation
Move between pages without a full reload, and trigger navigation from code.
Layouts & Templates
Share UI between pages without repeating yourself. Nested layouts unlock dashboards, marketing sites and more.
Intermediate
Server & Client Components
Components default to running on the server. Learn when and how to opt into "client" with the "use client" directive.
Data Fetching
Fetch directly inside server components using async/await. Pass data down through props.
Loading UI & Streaming
Show a skeleton instantly while the rest of the page is still loading on the server.
Error Handling
Catch route-level errors with error.js, render not-found UIs, and use the `notFound()` helper.
Dynamic Routes
Capture URL parameters with bracket folders. Build product pages, blog posts and user profiles without listing them all.
Route Groups & Parallel Routes
Organize your `app` folder without changing URLs, and render multiple pages side-by-side in the same layout.
Static & Dynamic Rendering
Every route is static by default until you do something dynamic. Learn the rules and how to switch deliberately.
Advanced
Server Actions & Forms
Mutate data without writing API endpoints. Call server code directly from a form or button.
Route Handlers (API Routes)
Build real HTTP endpoints inside the app folder. Useful for webhooks, third-party clients and anything that isn't a UI.
Middleware
Run code before a request reaches a page. Auth, redirects, rewrites and A/B tests live here.
Caching & Revalidation
Three layers — full-route, data, and Router cache — and the levers that control each one.
Image & Font Optimization
Use the built-in `<Image>` and `next/font` to avoid layout shift, ship modern formats and self-host fonts.
Metadata & SEO
Declare titles, descriptions, Open Graph and Twitter cards. Generate dynamic metadata per page.
Deployment
Build, ship, and monitor. From Vercel one-click to self-hosted on a Node server.