beginner
Next.js App Router
File-system routing, layouts, and the app directory architecture
Next.js Client Components
Add interactivity with use client, hooks, and browser APIs
Next.js Metadata
Set page titles, Open Graph tags, and SEO with the Metadata API
Next.js Routing
Dynamic segments, catch-all routes, navigation, and route groups
intermediate
Next.js API Routes
Build HTTP endpoints with Route Handlers in the App Router
Next.js Data Fetching
Fetch data in Server Components with async/await, revalidation, and request deduping
Next.js Image Optimization
Serve responsive, lazy-loaded images with the built-in next/image component
Next.js Middleware
Run code before requests complete for auth, redirects, and headers
Next.js Route Handlers
Build custom HTTP endpoints in the App Router using Web Request and Response APIs
Next.js Server Actions
Run server-side mutations directly from components without building API endpoints
Next.js Server Components
Render on the server by default with async data fetching and zero client JS
Next.js Streaming with Suspense
Stream UI progressively using React Suspense boundaries and loading files