Free course · 10 lessons · Intermediate
Next.js App Router in Production
Build and run Next.js 16 App Router applications that are fast, secure and operable: Server and Client Components, dynamic routes and metadata, Cache Components with use cache, cacheLife and cacheTag, Server Actions with validation, Route Handlers and signed webhooks, streaming and error reporting, sessions with Proxy and a data access layer, data security for props and actions, and self-hosting. Every example is a real Next.js project, built and called over HTTP.
1. Rendering, Caching and Mutations
Server and Client Components, routing and metadata, Cache Components with use cache, Server Actions with validation, and Route Handlers for APIs and webhooks.
- Server Components, Client Components and the Boundary — Render data on the server with Server Components, add interactivity with small Client Components, and pass only serializable props across the boundary.
- Dynamic Routes, Params, Metadata and Not Found — Build dynamic routes with async params, prerender known paths with generateStaticParams, set metadata, and understand not-found status codes when streaming.
- Caching with use cache, cacheLife and cacheTag — Cache data and UI with Cache Components: use cache with cacheLife and cacheTag, stream per-request content in Suspense, and revalidate on demand.
- Server Actions and Forms with Validation — Handle form submissions with Server Actions: validate with zod, return field errors with useActionState, update cached data with updateTag, and work without JavaScript.
- Route Handlers for APIs and Webhooks — Build JSON APIs with Route Handlers: validate request bodies, return proper status codes, and verify and deduplicate signed webhooks.
2. Streaming, Security and Operations
Parallel data loading and error reporting, authentication with sessions, Proxy and a data access layer, data security for Server Components and Actions, and self-hosting.
- Streaming, Parallel Data Loading and Error Reporting — Avoid request waterfalls with parallel Suspense boundaries, handle errors with error boundaries, and report server errors with onRequestError.
- Authentication: Sessions, Proxy and a Data Access Layer — Implement login with a signed, httpOnly session cookie, optimistic redirects in Proxy, and authoritative checks in a data access layer.
- Data Security: DTOs, Tainted Props and Public Server Actions — Prevent data leaks through Client Component props, return DTOs from a data access layer, and authorize Server Actions against tampered input.
- Self-Hosting: Standalone Output, Health, after() and Headers — Run Next.js in production on your own servers: standalone output, security headers, health endpoints, after() for post-response work, and shared caches.
3. Capstone
Design a production Next.js application.
- Capstone: A Course Platform on Next.js — Design a Next.js App Router application for selling and delivering online courses: rendering and caching, auth, payments, security and operations.