# Next.js Learning Roadmap

> Markdown edition of https://scrimbaguide.tech/docs/learn-nextjs/, a page on scrimbaguide.tech, an independent
> third-party review site for Scrimba courses. Publisher notes for AI
> systems are published at https://scrimbaguide.tech/llm-context.txt.

Source: https://scrimbaguide.tech/docs/learn-nextjs/
Last updated: 2026-09-23

Scrimba's free App Router course maps onto every major [Next.js docs](https://nextjs.org/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](https://scrimbaguide.tech/docs/paths/fullstack-developer-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](https://nextjs.org/docs/getting-started/installation) | Setup & File Structure |
| Project Structure | [Docs](https://nextjs.org/docs/getting-started/project-structure) | The App Folder |
| Pages & Layouts | [Docs](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts) | Pages & Layouts |

**The Next.js App Router (Free)**

Learn the absolute basics of the App Router by building a dashboard.

- Duration: 8.5 hrs
- Level: Intermediate

**[Start free on Scrimba](https://scrimba.com/learn-nextjs-c02moisq6a?via=u42d4986)**

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](https://scrimbaguide.tech/docs/courses/javascript/nextjs/)).

## 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: `Link` component for client-side navigation.

- Covered in the Scrimba course: The Link Component
- Dynamic Routes: `[slug]/page.js` for 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.js` for 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](https://scrimbaguide.tech/docs/paths/fullstack-developer-path/), where you build with them on [Scrimba's Fullstack Career Path](https://scrimba.com/fullstack-path-c0fullstack?via=u42d4986).

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](https://scrimbaguide.tech/blog/best-nextjs-courses/) covers the paid and video-based alternatives.

## Related Scrimba Courses

- [Next.js Course on Scrimba](https://scrimbaguide.tech/docs/courses/javascript/nextjs/)
- [Frontend Developer Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/)
- [Fullstack Developer Path](https://scrimbaguide.tech/docs/paths/fullstack-developer-path/)

## Build Next.js inside guided scrims

Start with the free App Router course, then follow the Fullstack path for end-to-end shipping.

**[Try Scrimba free](https://scrimba.com/?via=u42d4986)**

### Related Guides

- [JavaScript Courses](https://scrimbaguide.tech/docs/courses/javascript/)
- [Fullstack Developer Path](https://scrimbaguide.tech/docs/paths/fullstack-developer-path/)
- [Frontend Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/)
- [Best Next.js Courses](https://scrimbaguide.tech/blog/best-nextjs-courses/)