ForgeLearn
|$ curl https://forge-ai.dev/api/markdown?path=docs/roadmaps/nextjs
$cat docs/next.js-learning-roadmap.md
updated Today·8 min read·published

Next.js Learning Roadmap

◆Next.js◆Roadmap◆All Levels🎯Free Tools
Introduction

Your complete learning path for Next.js — from the App Router and server components through data fetching, API routes, optimization, and production deployment. Follow the stages in order or jump to specific topics.

ℹ

info

Next.js builds on React. Complete the React roadmap first to understand components, hooks, and state management.
Full Next.js Roadmap
1
Next.js Foundations~4 hoursBeginner

Understand Next.js's core concepts — file-based routing, layouts, pages, and the App Router mental model.

$
Next.js Overview

Introduction to Next.js, project structure, core concepts, and why Next.js for production apps

$
App Router

File conventions, layouts, pages, loading states, error boundaries, and nested routes

2
Components & Rendering~5 hoursIntermediate

Master the server/client divide — server components, streaming, and Suspense boundaries.

$
Server Components

Server vs client components, RSC format, streaming, Suspense, and when to use 'use client'

3
Data & APIs~6 hoursIntermediate

Fetch data on the server, build API routes, and handle forms with Server Actions.

$
Data Fetching

Cache strategies, revalidation (ISR/on-demand), dynamic routes, and parallel data fetching

$
API Routes

Route handlers (GET/POST/etc.), middleware, authentication, file uploads, and edge runtime

$
Forms & Actions

Server Actions, form handling, progressive enhancement, revalidation, and error handling

4
Optimization~4 hoursAdvanced

Optimize your Next.js app for performance — images, fonts, metadata, and code splitting.

$
Optimization

Image component, font optimization, metadata API, sitemap generation, and code splitting strategies

5
Deployment & Production~4 hoursAdvanced

Deploy Next.js apps to production — Vercel, Docker, self-hosted, and edge runtime options.

$
Deployment

Vercel deployment, Docker containers, self-hosted with Node.js, edge runtime, and CI/CD pipelines

$Blueprint — Engineering Documentation·Section ID: RES-09·Revision: 1.0

Community

Get help on Slack, Discord or VIP

Stuck on a guide? Join the community and ask.

Join SlackJoin DiscordKaundal VIP
Follow