Next.js Learning Roadmap
Scrimba's free App Router course maps onto every major Next.js docs topic: installation, routing, Server vs Client Components, data fetching, loading UI, and Server Actions. It runs 8.5 hours across three sections with 80 AI-checked challenges, and you build each concept in the browser instead of just reading about it.
Reviewed inside the course with a Pro account, September 2026.
Who this is for
React devs who can build SPAs but freeze when app/, Server Components, and loading.tsx show up, and anyone on the Fullstack path who wants Next to feel concrete.
1. Ship your first App Router page
Goal: Understand app/ layout and publish / without fighting config.
| Concept | Official Docs | In the Scrimba course |
|---|---|---|
| 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.
Start free on Scrimba (opens in a new tab)Know before you start: a "Bug Alert!" scrim marks six early lessons, through "Running create-next-app", that no longer run inside Scrimba. Do those locally; everything runs from the Scrimba Runner scrim onward. Section 1 (2 hrs, 27 scrims) starts PrintForge, a 3D-model catalog on Next 15 (review).
2. Route and navigate like Next expects
Goal: Map folders to URLs, share layouts, and add dynamic segments.
Next.js uses a file-system based router. Folders define routes.
- Linking:
Linkcomponent for client-side navigation.- Covered in the Scrimba course: The Link Component
- Dynamic Routes:
[slug]/page.jsfor dynamic content.- Covered in the Scrimba course: Dynamic Routes
3. Pick Server vs Client Components on purpose
Goal: Stop shipping giant JS bundles when HTML would do.
| Type | When to use | In the Scrimba course |
|---|---|---|
| Server Components | Data fetching, database calls, sensitive logic. (Default) | Server Components |
| Client Components | Interactivity, onClick, useState, useEffect. | Client Components |
4. Fetch and stream data without spinners everywhere
Goal: Let Server Components own reads; use Suspense + loading.tsx for UX.
In the App Router, you can fetch data directly in your Server Components using async/await.
- Fetching Data:
const data = await fetch(...)- Covered in the Scrimba course: Fetching Data
- Loading UI:
loading.jsfor instant loading states.- Covered in the Scrimba course: Loading UI
Section 3, Making Data Flow (3.9 hrs, 71 scrims, taught by Rachel Johnson), adds SQLite, then search, sorting, loading.tsx, and pagination.
5. Mutate with Server Actions (skip boilerplate APIs)
Goal: Post forms straight to server functions when it fits your app.
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. Server Actions carry over into the Fullstack Developer Path, where you build with them on Scrimba's Fullstack Career Path (opens in a new tab).
All three sections and all 80 AI-checked challenges are free. Pro gates the certificate, the paths, and the Pro-only Discord help channels. Budget 20 to 25 hours.
Why work through the docs this way?
Reading the Next.js docs tells you what a Server Action is. Running the matching scrim shows you one working, and you can edit the code yourself before you touch your own app. If Scrimba's free course is not the format you want, the best Next.js courses of 2026 covers the paid and video-based alternatives.
Related Scrimba Courses
Build Next.js inside guided scrims
Start with the free App Router course, then follow the Fullstack path for end-to-end shipping.