Next.js App Router
Build with the Next.js App Router - Server Components, nested layouts, streaming, caching and Server Actions.
Challenges
12 of 12 challenges
App Router Basics
Move to the app directory: folders are routes, page.jsx is the UI, and components render on the server by default.
Dynamic Segments
Read route params and search params in the App Router - both of which arrive as promises.
Nested Layouts
Give a section of your site its own shell, and organise folders without touching the URL using route groups.
Route Handlers
Build HTTP endpoints in the App Router with the web Request and Response APIs.
Metadata API
Describe your pages with exported metadata objects instead of head tags, including per-record titles.
Server Components
Fetch data inside the component that renders it, and stop creating request waterfalls.
Static Params
Prerender dynamic routes at build time with generateStaticParams, and control what happens to the rest.
Client Components
Opt back into the browser with "use client" - state, event handlers and the navigation hooks.
Loading and Streaming
Show something immediately with loading.jsx, then stream slow parts of the page in with Suspense.
Caching and Revalidation
Cache fetches on the server, tag them, and blow the right cache entry away when the data changes.
Error Handling
Contain a failure to one segment with error.jsx, and return a real 404 with notFound().
Server Actions
Mutate data straight from a form - no endpoint, no fetch - and show the result with useActionState.