Start Here: The Next.js Learning Roadmap
Quick Answer: Companion guide mapping docs to Scrimba lessons. See below for the roadmap.
Last reviewed: March 2026.
Next.js has become the standard for building React applications. With the release of the App Router (Next.js 13+), the way we build web apps has fundamentally changed.
This roadmap maps the official Next.js documentation to Scrimba's interactive Learn Next.js course, so you can build real projects while you learn.
Who This Is For
Learners following the React or Next.js roadmap.
1. Getting Started
Goal: Understand the file structure and create your first page.
| Concept | Official Docs | Scrimba Lesson |
|---|---|---|
| Installation | Docs | Setup & File Structure |
| Project Structure | Docs | The App Folder |
| Pages & Layouts | Docs | Pages & Layouts |
The Next.js App Router (Free)
FreeLearn the absolute basics of the App Router by building a dashboard.
View on Scrimba (opens in a new tab)2. Routing & Navigation
Goal: Link pages together and understand dynamic routes.
Next.js uses a file-system based router. Folders define routes.
- Linking:
Linkcomponent for client-side navigation. - Dynamic Routes:
[slug]/page.jsfor dynamic content.
3. Rendering: Server vs Client
Goal: Master the single most important concept in modern Next.js.
| Type | When to use | Scrimba Lesson |
|---|---|---|
| Server Components | Data fetching, database calls, sensitive logic. (Default) | Server Components |
| Client Components | Interactivity, onClick, useState, useEffect. | Client Components |
4. Data Fetching
Goal: Get data from your database to your UI.
In the App Router, you can fetch data directly in your Server Components using async/await.
- Fetching Data:
const data = await fetch(...) - Loading UI:
loading.jsfor instant loading states.
5. Server Actions
Goal: Mutate data without API routes.
Instead of writing a separate API endpoint (/api/submit), you write a function that runs on the server and call it directly from your form.
-> This is a key part of the Fullstack Career Path.
Choose This If
Choose this page if: You're learning React or Next.js and want a docs-to-Scrimba roadmap.
Become a Fullstack Next.js Developer
Master Next.js, Postgres, and deployment with the comprehensive Career Path.
Use our partner link to get 20% off the Pro plan.
Ready to Upgrade Your Learning?
Use our partner link to claim 20% off Scrimba Pro and unlock all courses and career paths.