CoachnestCoachnest
Sign InGet Started
Back to course

Next.js 16: The Complete Developer Guide

…
—
Contents
1

What's New in Next.js 16

Reading14mFree
2

Installation, CLI & Your First Project

Reading12mFree
3

Project Structure & Conventions Deep Dive

Reading16m
4

Turbopack — The New Default Bundler

Video18m
5

Configuring TypeScript, ESLint & next.config.ts

Reading14m
6

Chapter 1 — Quiz

Quiz10m
7

App Router Fundamentals

Reading16m
8

Dynamic Routes, Catch-Alls & Type-Safe Params

Reading14m
9

Route Groups & Parallel Routes

Reading16m
10

Intercepting Routes & Modal Patterns

Reading12m
11

Loading, Error & Not-Found UI

Reading12m
12

Chapter 2 — Routing Quiz

Quiz12m
13

Understanding the Server/Client Boundary

Reading18m
14

Choosing When to use "use client"

Reading14m
15

Composing Server & Client Components

Reading14m
16

server-only, client-only & Code Splitting

Reading12m
17

Chapter 3 — Quiz

Quiz10m
18

Fetching Data in Server Components

Reading14m
19

The Next.js 16 Cache Model

Reading16m
20

Revalidation: revalidateTag, revalidatePath & On-Demand

Reading12m
21

Cache Components — Building Reusable Cached Functions

Reading14m
22

Search Params, Cookies & Dynamic APIs

Reading12m
23

Chapter 4 — Quiz

Quiz12m
24

Server Actions From First Principles

Reading16m
25

Forms with useActionState & Progressive Enhancement

Reading14m
26

Optimistic UI with useOptimistic

Reading12m
27

Validation with Zod + Server Actions

Reading12m
28

Chapter 5 — Quiz

Quiz10m
29

Static vs Dynamic vs Streaming

Reading14m
30

generateStaticParams & Pre-Rendering Dynamic Routes

Reading12m
31

Incremental Static Regeneration (ISR)

Reading12m
32

Partial Prerendering (PPR)

Reading16m

Edge Runtime vs Node.js Runtime

Reading12m
34

Rendering Strategies Deep Dive

Video22m
35

Chapter 6 — Quiz

Quiz12m
36

Tailwind CSS v4 with Next.js 16

Reading14m
37

CSS Modules, Global Styles & Scoped CSS

Reading10m
38

next/image — Smart, Fast Images

Reading14m
39

Fonts, Icons & Metadata

Reading12m
40

Chapter 7 — Quiz

Quiz10m
41

Middleware Fundamentals

Reading14m
42

Sessions, JWTs & Cookies

Reading16m
43

Protecting Server Components & Server Actions

Reading12m
44

Chapter 8 — Quiz

Quiz10m
45

Prisma with Next.js — The Production Setup

Reading14m
46

Mutations: Server Actions + Database Writes

Reading12m
47

Route Handlers & REST APIs

Reading12m
48

Chapter 9 — Quiz

Quiz10m
49

Unit & Component Testing with Vitest

Reading12m
50

End-to-End Testing with Playwright

Reading14m
51

Deploying to Vercel

Reading12m
52

Self-Hosting with Docker

Reading14m
53

Production Performance Checklist

Reading12m
54

Final Assessment — Next.js 16 Mastery

Quiz20m
←→navigate lessons
Chapter 6 of 10·Chapter 6 — Rendering Strategies: SSG, SSR, ISR & PPR
Lesson 33 of 54Reading12 min

Edge Runtime vs Node.js Runtime

#Edge Runtime vs Node.js Runtime¶

Every route segment in Next.js runs in one of two runtimes:

  • Node.js runtime (default) — runs in a full Node 20+ environment
  • Edge runtime — runs on a lightweight V8 environment near the user (Vercel Edge, Cloudflare Workers)

Choosing a Runtime¶

ts
2 lines
1// app/api/echo/route.ts
2export const runtime = "edge";    // or "nodejs" (default)

Same option on a page:

ts
2 lines
1// app/page.tsx
2export const runtime = "edge";

When Edge Is The Right Choice¶

Use caseWhy Edge wins
Auth middlewareRun at the CDN edge, before reaching origin
Geolocation routingEdge has IP-to-region built-in
Quick API responses (< 50 ms work)Cold starts are sub-100ms
Streaming responsesFirst chunk emitted very fast
A/B test variantsDecision happens close to the user

When Node Is The Right Choice¶

Use caseWhy Edge fails
Database with TCP driverEdge runtimes don't support raw TCP
Long-running work (> 1s)Edge has tight wall-clock and memory limits
Native Node modules (sharp, bcrypt)Edge can't run native bindings
Big libraries (Stripe SDK)Edge bundle size limits (1–4 MB)
File system accessEdge has no fs

Edge-Compatible Patterns¶

Use HTTP-only database drivers:

  • Neon (Postgres) — @neondatabase/serverless over HTTP
  • PlanetScale (MySQL) — @planetscale/database over HTTP
  • Turso (SQLite-derived) — over HTTP
  • Cloudflare D1 — via Workers

These connect over HTTPS, not raw TCP, so they work in Edge.

ts
4 lines
1// lib/db.ts
2import { neon } from "@neondatabase/serverless";
3
4export const sql = neon(process.env.DATABASE_URL!);
ts
8 lines
1// app/api/users/route.ts
2export const runtime = "edge";
3import { sql } from "@/lib/db";
4
5export async function GET() {
6  const users = await sql`SELECT id, name FROM users LIMIT 10`;
7  return Response.json(users);
8}

Middleware Always Runs at the Edge¶

middleware.ts is always edge-runtime. You cannot use fs, native modules, or heavy Node-only libraries in it.

ts
13 lines
1// middleware.ts
2import { NextResponse, type NextRequest } from "next/server";
3
4export function middleware(req: NextRequest) {
5  const country = req.geo?.country ?? "US";
6  if (country === "EU") {
7    return NextResponse.rewrite(new URL("/eu" + req.nextUrl.pathname, req.url));
8  }
9}
10
11export const config = {
12  matcher: ["/((?!_next/static|api/health).*)"],
13};

Streaming Responses From Edge¶

ts
17 lines
1// app/api/feed/route.ts
2export const runtime = "edge";
3
4export async function GET() {
5  const stream = new ReadableStream({
6    async start(controller) {
7      for (let i = 0; i < 5; i++) {
8        controller.enqueue(`tick ${i}\n`);
9        await new Promise((r) => setTimeout(r, 200));
10      }
11      controller.close();
12    },
13  });
14  return new Response(stream, {
15    headers: { "Content-Type": "text/plain; charset=utf-8" },
16  });
17}

The first byte goes out almost instantly. Great for token-by-token LLM streaming.

Previous

Partial Prerendering (PPR)

Next

Rendering Strategies Deep Dive

Use ← → arrow keys to navigate between lessons