Next.js Learning Roadmap
This hub mirrors the official Next.js docs to Scrimba’s free App Router course, setup, routing, Server vs Client Components, data fetching, loading UI, and Server Actions, so each concept you read has a typed-in-the-browser counterpart.
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)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
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.
-> This is a key part of the Fullstack Career Path (opens in a new tab).
Use this hub when…
You want official-doc concepts translated into interactive Scrimba casts, not another passive YouTube marathon.
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.