Learn Next.js by building. Every topic is real App Router code you can read, copy, and run — work through the lessons in order, from routing and layouts to data fetching, server actions, caching, and deployment.
Next.js is built on React. Be comfortable with React (and ideally TypeScript) before starting.
Before you start
To practice the examples in this course on your computer:
Ctrl+`).pnpm create next-app@latest my-app --yes (or npx create-next-app@latest my-app --yes with npm). This creates a my-app folder containing a Next.js project — the setup every example here is written for.my-app folder (File → Open Folder) and run pnpm dev (or npm run dev) in the terminal.app/ as each lesson shows — with the dev server running, http://localhost:3000 updates every time you save.Getting Started
Create a Next.js app, understand the folders and files it gives you, and run the dev, build, and start commands.
Pages & Layouts
Build routes from folders, share UI with layouts, and nest layouts so each section of your app keeps its own shell.
Dynamic Routes & Organization
Generate pages from data with dynamic segments, pre-build them with generateStaticParams, and tidy folders with route groups.
Linking & Navigation
Move between routes with <Link>, control prefetching, and navigate from code with the useRouter and usePathname hooks.
Server & Client Components
Know which component runs where, add interactivity with "use client", and compose server and client pieces together.
Fetching & Streaming Data
Fetch data in Server Components, run requests in parallel, and stream slow parts in with loading.tsx and Suspense.
Caching & Revalidating
Cache expensive work with the use cache directive, set how long it lasts with cacheLife, and refresh it on demand with tags.
Mutating Data (Server Actions)
Change data on the server straight from a form with Server Actions, show pending and error states, then revalidate or redirect.
Error Handling
Show 404 pages with notFound and not-found.tsx, and catch crashes with error.tsx boundaries that let users retry.
Route Handlers (APIs)
Build API endpoints with route.ts files, handle GET/POST and JSON, read dynamic params, and opt into caching.
Proxy (Middleware)
Run code before a request finishes — redirect, rewrite, or tweak headers and cookies — using the proxy.ts file.
Styling
Add styles three ways — global CSS, Tailwind utility classes, and locally scoped CSS Modules — and know when to use each.
Images, Fonts & Scripts
Serve optimized images with next/image, self-host fonts with next/font, and load third-party scripts with next/script.
Metadata & SEO
Set page titles and descriptions statically or from data, add icons and OG images, and generate a sitemap and robots file.
Environment Variables & Deployment
Store secrets in .env, safely expose public values with NEXT_PUBLIC_, then build and deploy as a server or a static export.