Learn Next.js App Router without drowning in docs
Quick answer: 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 | 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. 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. - Dynamic Routes:
[slug]/page.jsfor dynamic content.
3. Pick Server vs Client Components on purpose
Goal: Stop shipping giant JS bundles when HTML would do.
| 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. 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(...) - Loading UI:
loading.jsfor instant loading states.
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.
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.