Next.js — Next.js Full Stack Roadmap
React meta-framework combining frontend rendering and backend API routes in one app
Steps in Next.js
- Next.js Fundamentals & Project Setup — intermediate · create-next-app, project structure and how Next.js extends React
- App Router & File-Based Routing — intermediate · Pages, dynamic routes, route groups and the file-system based router
- Server Components vs Client Components — intermediate · The React Server Component model, the 'use client' directive and when to use each
- Layouts, Templates & Nested Routing — intermediate · Shared layouts, templates and how nested routes compose UI
- Data Fetching & Caching — intermediate · Fetching data directly in Server Components and Next.js's fetch caching behavior
- Static Site Generation (SSG) — intermediate · Pre-rendering pages at build time with generateStaticParams
- Server-Side Rendering (SSR) — intermediate · Rendering pages on each request for dynamic, personalized content
- Incremental Static Regeneration (ISR) — advanced · Revalidating static pages on a schedule or on demand without a full rebuild
- API Routes / Route Handlers — intermediate · Building backend endpoints directly inside the app/api directory
- Server Actions & Mutations — advanced · Calling server-side functions directly from forms and components without a manual API layer
- Middleware — advanced · Edge middleware for auth checks, redirects and rewriting requests before they hit a route
- Image & Font Optimization — intermediate · next/image and next/font for automatic image and font optimization
- Metadata & SEO — intermediate · generateMetadata, sitemaps, robots.txt and Open Graph metadata in Next.js
- Environment Variables & Configuration — intermediate · next.config.js, public vs server-only environment variables
- Mini Project: Full-Stack Next.js App — advanced · Build a single Next.js app with pages, Server Components, Route Handlers and Server Actions
Part of
- Next.js Full Stack roadmap — the full learning path