Learning Roadmap
Follow this path from top to bottom. Each chapter builds on the previous one. Don't skip ahead. The foundations matter.
Beginner
What is Next.js & Getting Started
Why Next.js exists, what problems it solves, and how to set up your first project.
File-Based Routing (App Router)
How folders become URLs. Pages, nested routes, and the app directory structure.
Layouts, Templates & Metadata
Shared UI across pages, nested layouts, route groups, and SEO metadata.
Link, Image & Script Components
Next.js built-in components for navigation, optimized images, and third-party scripts.
Styling in Next.js
CSS Modules, Tailwind CSS, CSS-in-JS, and global styles. Pick your weapon.
Intermediate
Dynamic Routes & Route Groups
Params, catch-all routes, optional segments, and organizing routes with groups.
Server vs Client Components
The React Server Components mental model. When to use 'use client' and why.
Data Fetching & Caching
Fetching data in Server Components, caching strategies, revalidation, and streaming.
Server Actions & Forms
Mutate data without API routes. Forms, validation, optimistic updates, and revalidation.
API Routes (Route Handlers)
Build your backend inside Next.js. GET, POST, dynamic routes, and middleware.
Middleware
Run code before a request completes. Auth checks, redirects, rewrites, and geolocation.
Loading & Error Handling
loading.tsx, error.tsx, not-found.tsx, and Suspense boundaries for better UX.
Advanced
Authentication (Auth.js)
Protect your app with Auth.js (NextAuth v5). OAuth, credentials, sessions, and guards.
Advanced Patterns
Parallel routes, intercepting routes, streaming with Suspense, and partial prerendering.
Deployment & Production
Deploy to Vercel, self-host, bundle analysis, performance tips, and production checklist.
Metadata & SEO
Page titles, Open Graph images, structured data, sitemaps, and robots.txt for discoverability.
Performance & Optimization
Bundle splitting, image optimization, font loading, Core Web Vitals, and Lighthouse scores.