Next.js Tutorial with Examples.
Next.js 16 tutorial with real build output: the App Router, Server and Client Components, Route Handlers, Cache Components, Server Actions and proxy.ts.
Beginner
Start here — no prior experience needed
The App Router and the Route Table
A real Next.js 16 build's route table: which folders become routes, why layouts don't add rows, and why one route gets a different marker.
Server and Client Components
A Server Component that imports useState fails a real Next.js 16 build; adding use client fixes it, and a console.log proves where each component ran.
Route Handlers
A Next.js 16 Route Handler answers curl requests: GET and POST, a thrown error's 500, a caught 400, and the automatic 405 for an unhandled method.
Intermediate
For developers with core concepts down
Dynamic by Default: Rendering Modes
A Next.js 16 page reading connection() outside Suspense fails a real build; wrapping it in Suspense streams a hole, and instant = false blocks instead.
Caching with "use cache"
A Next.js 16 build fails fetching real data without "use cache"; the directive bakes one value into the build and reuses it until it expires.
cacheLife and cacheTag
Custom cacheLife profiles reshape a Next.js 16 route table's Revalidate/Expire columns; cacheTag plus revalidateTag invalidate a cached value on demand.
Dynamic Routes and generateStaticParams
A Next.js 16 [slug] route awaits params as a Promise; generateStaticParams prerenders known paths, and Cache Components rejects dynamicParams: false.
Server Actions
A Server Action wired to a form is a real POST endpoint: curl submits it, server validation rejects bad input, and updateTag reflects the change at once.
proxy.ts: Redirects and Rewrites
Next.js 16 renamed middleware.ts to proxy.ts. A proxy redirects, rewrites, limits itself with matcher, and reads/sets a cookie — curl proves each one.
The Metadata API
A layout's metadata export merges into every page below it with a title template; generateMetadata reads params; robots.ts/sitemap.ts generate real files.
Advanced
Production-grade patterns for experienced engineers
Also part of Next.js
Taught in other topics. Each link opens the lesson in its home topic.
Your First React Component
Write a React component, render it to HTML with renderToString, and see JSX's real text-node separators and the falsy-zero rendering gotcha.
State with useState
Render components with Vitest and Testing Library, click a real button with user-event, and prove two setState calls in one handler cause one render.
Effects and useEffect
See StrictMode's real double-invoked mount effect, then a cleanup function that actually runs on unmount and before every dependency change.