Next.js zero to hero

Master Next.js: from fundamentals to production

App Router, Server & Client Components, data fetching & caching, Server Actions, dynamic routes, middleware, metadata, and optimization. Monaco editor with live preview and verify—learn by doing.

Next.jsMonaco + Autocomplete58 Step

Course Steps58 lessons

Step 1
Next.js 1: What Is Next.js?
Next.js is a meta-framework built on top of React. Where a plain React app (made with Vite or Create...
Start Lesson
Step 2
Next.js 2: The App Router & Project Structure
Next.js's App Router uses the app directory to define your routes. Instead of configuring a router l...
Start Lesson
Step 3
Next.js 3: Your First Page & Route
Every page in the App Router starts the same way: create a folder, put a page.tsx inside it, and exp...
Start Lesson
Step 4
Next.js 4: The Root Layout
Every Next.js app needs exactly one root layout, app/layout.tsx. Unlike a regular page, the root lay...
Start Lesson
Step 5
Next.js 5: Nested Layouts
Layouts nest. A layout in app/dashboard/layout.tsx wraps every page under dashboard, and it renders ...
Start Lesson
Step 6
Next.js 6: Linking Between Pages
Next.js ships a Link component for navigating between pages. Unlike a plain anchor tag, which trigge...
Start Lesson
Step 7
Next.js 7: Dynamic Route Segments
A folder named with square brackets around id creates a dynamic route segment: app/products/[id]/pag...
Start Lesson
Step 8
Next.js 8: Nested Dynamic & Catch-All Routes
Sometimes one dynamic segment isn't enough. A folder named with three dots before slug, like docs/[....
Start Lesson
Step 9
Next.js 9: Route Groups
Wrapping a folder name in parentheses creates a route group. It lets you organize routes, and give a...
Start Lesson
Step 10
Next.js 10: Reading the URL: params & searchParams
A Server Component page can read two things about the current URL: its dynamic params, from folders ...
Start Lesson
Step 11
Next.js 11: Server Components by Default
In the Next.js App Router, every component inside `app/` is a **Server Component** unless you explic...
Start Lesson
Step 12
Next.js 12: The "use client" Boundary
The `'use client'` directive doesn't just mark one component — it marks a **boundary**. Everything t...
Start Lesson
Step 13
Next.js 13: Choosing Server vs Client
Not every component needs to be a Client Component. Ask: does it need **state, effects, event handle...
Start Lesson
Step 14
Next.js 14: Composing Server Components Inside Client Components
A Client Component can't `import` a Server Component directly — but it **can render one that's passe...
Start Lesson
Step 15
Next.js 15: Passing Props from Server to Client
When a Server Component renders a Client Component, every prop it passes crosses a **serialization b...
Start Lesson
Step 16
Next.js 16: loading.tsx — Instant Loading UI
Drop a `loading.tsx` file next to a `page.tsx` and Next.js **automatically wraps that route segment ...
Start Lesson
Step 17
Next.js 17: Suspense & Streaming
Server Components let Next.js **stream** HTML: instead of waiting for the slowest data fetch before ...
Start Lesson
Step 18
Next.js 18: error.tsx — Route-Level Error Boundaries
An `error.tsx` file next to a `page.tsx` automatically wraps that segment in a React Error Boundary....
Start Lesson
Step 19
Next.js 19: not-found.tsx & notFound()
Calling the `notFound()` function from `next/navigation` inside a Server Component **immediately sto...
Start Lesson
Step 20
Next.js 20: Layouts vs Templates
Both `layout.tsx` and `template.tsx` wrap a route segment's children, but they behave very different...
Start Lesson
Step 21
Next.js 21: fetch() in Server Components
In the App Router, Server Components can be `async function`s. You `await` data directly inside the ...
Start Lesson
Step 22
Next.js 22: Request Memoization
During a single render pass, React automatically **memoizes** identical `fetch()` calls — same URL, ...
Start Lesson
Step 23
Next.js 23: The Data Cache
Next.js extends `fetch()` with a persistent **Data Cache**. By default — `{ cache: 'force-cache' }` ...
Start Lesson
Step 24
Next.js 24: Time-Based Revalidation (ISR)
`fetch(url, { next: { revalidate: 60 } })` serves the cached response instantly, but marks it stale ...
Start Lesson
Step 25
Next.js 25: On-Demand Revalidation
Waiting for a revalidate timer isn't always good enough — after a user adds a book, you want the cat...
Start Lesson
Step 26
Next.js 26: Static Params & Static Generation
For a dynamic route like `app/books/[id]/page.tsx`, `generateStaticParams()` tells Next.js exactly w...
Start Lesson
Step 27
Next.js 27: Dynamic Rendering Triggers
A route is static by default. But calling `cookies()`, `headers()`, or reading `searchParams` inside...
Start Lesson
Step 28
Next.js 28: Parallel Data Fetching
Awaiting one fetch, then another, then another creates a **waterfall** — total time is the SUM of ev...
Start Lesson
Step 29
Next.js 29: Streaming Slow Data With Suspense
Wrapping a slow-fetching section in `<Suspense fallback={...}>` lets Next.js send the fast parts of ...
Start Lesson
Step 30
Next.js 30: Client-Side Data Fetching Patterns
Not everything belongs on the server. A user-triggered search box, a live comment feed, anything tha...
Start Lesson
Step 31
Next.js 31: Server Actions Basics
A **Server Action** is an async function marked with the `"use server"` directive. Call it directly ...
Start Lesson
Step 32
Next.js 32: Forms With Server Actions
Pass a Server Action straight to a form's `action` prop — `<form action={addComment}>` — and Next.js...
Start Lesson
Step 33
Next.js 33: Pending & Form State with useActionState / useFormStatus
`useActionState(action, initialState)` wraps a Server Action and returns [state, formAction, isPendi...
Start Lesson
Step 34
Next.js 34: Optimistic Updates with useOptimistic
useOptimistic(state, updateFn) returns [optimisticState, addOptimistic]. Call addOptimistic(value) i...
Start Lesson
Step 35
Next.js 35: Validating Input & Returning Errors
Client-side validation is a UX nicety, not a security boundary — a Server Action can be called direc...
Start Lesson
Step 36
Next.js 36: Calling Actions Outside Forms
A Server Action is just an async function — nothing ties it to <form action>. Call it from a button'...
Start Lesson
Step 37
Next.js 37: Redirecting After a Mutation
redirect(path) from next/navigation, called inside a Server Action, sends the user to a new route ri...
Start Lesson
Step 38
Next.js 38: Revalidating After a Mutation
revalidatePath(path) and revalidateTag(tag), called inside a Server Action right after a mutation, t...
Start Lesson
Step 39
Next.js 39: Route Handlers — Building an API
A **Route Handler** is a server-only function that lives at `app/api/.../route.ts`. It replaces the ...
Start Lesson
Step 40
Next.js 40: Route Handlers — Dynamic Segments & NextRequest/NextResponse
A Route Handler file can live at a dynamic path like `app/api/todos/[id]/route.ts`. The handler rece...
Start Lesson
Step 41
Next.js 41: Middleware Basics
`middleware.ts` at the project root runs on the **Edge**, before a request reaches any route or page...
Start Lesson
Step 42
Next.js 42: Middleware for Auth Gating
A very common middleware job is **gating** protected routes: read a cookie (usually a session token)...
Start Lesson
Step 43
Next.js 43: Parallel Routes (@slot)
**Parallel routes** let a layout render more than one page at the same URL, simultaneously. A folder...
Start Lesson
Step 44
Next.js 44: Intercepting Routes
The `(..)photo/[id]` folder convention **intercepts** navigation: when a user clicks a `<Link>` to `...
Start Lesson
Step 45
Next.js 45: Redirects & Rewrites
`next.config.js` exposes `redirects()` and `rewrites()` — **build-time**, pattern-based rules (with ...
Start Lesson
Step 46
Next.js 46: Environment Variables
Environment variables from `.env.local` are available in server code (Route Handlers, Server Compone...
Start Lesson
Step 47
Next.js 47: Custom 404 & global-error.tsx
An app-wide `app/not-found.tsx` renders whenever a route doesn't match or a component calls `notFoun...
Start Lesson
Step 48
Next.js 48: Route Segment Config
A `page.tsx` or `layout.tsx` can export special constants that configure how that segment behaves: `...
Start Lesson
Step 49
Next.js 49: CSS Modules in Next.js
Next.js gives every component its own stylesheet with **CSS Modules**: name a file `Component.module...
Start Lesson
Step 50
Next.js 50: Global Styles & Tailwind Integration
Not everything should be scoped. Site-wide resets, CSS variables and font stacks live in **app/globa...
Start Lesson
Step 51
Next.js 51: next/image — Automatic Image Optimization
The `Image` component from `next/image` replaces `img` and adds automatic optimization: it serves ri...
Start Lesson
Step 52
Next.js 52: next/font — Self-Hosted Web Fonts
`next/font` downloads your font files at **build time** and serves them from your own domain — no ru...
Start Lesson
Step 53
Next.js 53: generateMetadata — Dynamic SEO
A page can export an **async** `generateMetadata` function that runs on the server before rendering,...
Start Lesson
Step 54
Next.js 54: Static Metadata & the metadata Object
When a page's SEO tags do not depend on fetched data, skip the async dance entirely: export a plain ...
Start Lesson
Step 55
Next.js 55: sitemap.ts & robots.ts
Instead of hand-maintaining static sitemap.xml and robots.txt files, Next.js lets you generate them ...
Start Lesson
Step 56
Next.js 56: next/dynamic — Code Splitting
`dynamic(() => import('./Heavy'), { ssr: false })` from `next/dynamic` lazy-loads a component's code...
Start Lesson
Step 57
Next.js 57: Edge vs Node.js Runtime
Every Route Handler and page can pick where it runs by exporting `export const runtime = 'edge'` or ...
Start Lesson
Step 58
Next.js 58: Production Checklist & Deployment
You have built the whole toolkit: scoped styles, optimized images and fonts, dynamic and static SEO ...
Start Lesson

React Course Blog Back to Developer Hub

Master Next.js: from fundamentals to production

Next.js 1: What Is Next.js?

Next.js 2: The App Router & Project Structure

Next.js 3: Your First Page & Route

Next.js 4: The Root Layout

Next.js 5: Nested Layouts

Next.js 6: Linking Between Pages

Next.js 7: Dynamic Route Segments

Next.js 8: Nested Dynamic & Catch-All Routes

Next.js 9: Route Groups

Next.js 10: Reading the URL: params & searchParams

Next.js 11: Server Components by Default

Next.js 12: The "use client" Boundary

Next.js 13: Choosing Server vs Client

Next.js 14: Composing Server Components Inside Client Components

Next.js 15: Passing Props from Server to Client

Next.js 16: loading.tsx — Instant Loading UI

Next.js 17: Suspense & Streaming

Next.js 18: error.tsx — Route-Level Error Boundaries

Next.js 19: not-found.tsx & notFound()

Next.js 20: Layouts vs Templates

Next.js 21: fetch() in Server Components

Next.js 22: Request Memoization

Next.js 23: The Data Cache

Next.js 24: Time-Based Revalidation (ISR)

Next.js 25: On-Demand Revalidation

Next.js 26: Static Params & Static Generation

Next.js 27: Dynamic Rendering Triggers

Next.js 28: Parallel Data Fetching

Next.js 29: Streaming Slow Data With Suspense

Next.js 30: Client-Side Data Fetching Patterns

Next.js 31: Server Actions Basics

Next.js 32: Forms With Server Actions

Next.js 33: Pending & Form State with useActionState / useFormStatus

Next.js 34: Optimistic Updates with useOptimistic

Next.js 35: Validating Input & Returning Errors

Next.js 36: Calling Actions Outside Forms

Next.js 37: Redirecting After a Mutation

Next.js 38: Revalidating After a Mutation

Next.js 39: Route Handlers — Building an API

Next.js 40: Route Handlers — Dynamic Segments & NextRequest/NextResponse

Next.js 41: Middleware Basics

Next.js 42: Middleware for Auth Gating

Next.js 43: Parallel Routes (@slot)

Next.js 44: Intercepting Routes

Next.js 45: Redirects & Rewrites

Next.js 46: Environment Variables

Next.js 47: Custom 404 & global-error.tsx

Next.js 48: Route Segment Config

Next.js 49: CSS Modules in Next.js

Next.js 50: Global Styles & Tailwind Integration

Next.js 51: next/image — Automatic Image Optimization

Next.js 52: next/font — Self-Hosted Web Fonts

Next.js 53: generateMetadata — Dynamic SEO

Next.js 54: Static Metadata & the metadata Object

Next.js 55: sitemap.ts & robots.ts

Next.js 56: next/dynamic — Code Splitting

Next.js 57: Edge vs Node.js Runtime

Next.js 58: Production Checklist & Deployment

Master Next.js: from fundamentals to production

Next.js 1: What Is Next.js?

Next.js 2: The App Router & Project Structure

Next.js 3: Your First Page & Route

Next.js 4: The Root Layout

Next.js 5: Nested Layouts

Next.js 6: Linking Between Pages

Next.js 7: Dynamic Route Segments

Next.js 8: Nested Dynamic & Catch-All Routes

Next.js 9: Route Groups

Next.js 10: Reading the URL: params & searchParams

Next.js 11: Server Components by Default

Next.js 12: The "use client" Boundary

Next.js 13: Choosing Server vs Client

Next.js 14: Composing Server Components Inside Client Components

Next.js 15: Passing Props from Server to Client

Next.js 16: loading.tsx — Instant Loading UI

Next.js 17: Suspense & Streaming

Next.js 18: error.tsx — Route-Level Error Boundaries

Next.js 19: not-found.tsx & notFound()

Next.js 20: Layouts vs Templates