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

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
33

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 4 of 10·Chapter 4 — Data Fetching & The Next.js 16 Cache Model
Lesson 20 of 54Reading12 min

Revalidation: revalidateTag, revalidatePath & On-Demand

#Revalidation: revalidateTag, revalidatePath & On-Demand¶

Caching without invalidation is just stale data. Next.js gives you precise, fast revalidation primitives.

revalidateTag¶

Invalidate every cached entry that was tagged with a matching string.

ts
9 lines
1// app/actions/publish.ts
2"use server";
3import { revalidateTag } from "next/cache";
4
5export async function publishCourse(courseId: string) {
6  await db.course.update({ where: { id: courseId }, data: { status: "PUBLISHED" } });
7  revalidateTag("course");                     // wipe everything tagged "course"
8  revalidateTag(`course:${courseId}`);          // and this specific course
9}

revalidatePath¶

Invalidate the cache for a specific URL path. Useful when you don't have tags.

ts
8 lines
1import { revalidatePath } from "next/cache";
2
3export async function addReview(courseSlug: string, rating: number, comment: string) {
4  await db.review.create({ /* … */ });
5  revalidatePath(`/courses/${courseSlug}`);    // single page
6  revalidatePath("/courses", "page");           // /courses listing
7  revalidatePath("/(marketing)", "layout");     // whole layout subtree
8}

The second argument disambiguates whether you're invalidating a page or a layout.

Webhooks → On-Demand Revalidation¶

A common pattern: your CMS publishes content → it hits a Next.js route handler → that handler calls revalidateTag.

ts
14 lines
1// app/api/revalidate/route.ts
2import { revalidateTag } from "next/cache";
3import { NextRequest } from "next/server";
4
5export async function POST(req: NextRequest) {
6  const secret = req.nextUrl.searchParams.get("secret");
7  if (secret !== process.env.REVALIDATE_SECRET) {
8    return new Response("Unauthorized", { status: 401 });
9  }
10
11  const { tag } = await req.json();
12  revalidateTag(tag);
13  return Response.json({ revalidated: true, tag });
14}

Your CMS posts to /api/revalidate?secret=… with a body like { "tag": "course:nextjs-16" }.

Time-Based Revalidation (Legacy fetch options still work)¶

ts
3 lines
1const res = await fetch("https://api.example.com/v1/posts", {
2  next: { revalidate: 600 },          // re-fetch at most every 10 minutes
3});

Or for a route segment:

ts
2 lines
1// app/blog/page.tsx
2export const revalidate = 600;

These still work, but "use cache" + cacheLife is the preferred path for new code.

Forcing Dynamic Rendering¶

If a page must run on every request:

ts
2 lines
1// app/dashboard/page.tsx
2export const dynamic = "force-dynamic";

Reading cookies/headers or calling searchParams typically does this automatically.

Forcing Static Rendering¶

For pure static output:

ts
1 line
1export const dynamic = "force-static";

Useful for marketing pages where you want to assert "this must not depend on the request".

Patterns I Use Daily¶

  1. 1Listings tagged by entity — cacheTag("course") on the list, cacheTag("course", course:${id}) on each detail page. One revalidateTag("course") updates both.
  2. 2User-scoped caches — don't cache; user data is highly variable. Use dynamic = "force-dynamic".
  3. 3Hot pages with low write rate — cacheLife("hours") + revalidateTag on the mutation path.
  4. 4Cold pages — long cacheLife ("days") + tag invalidation on edits.

Previous

The Next.js 16 Cache Model

Next

Cache Components — Building Reusable Cached Functions

Use ← → arrow keys to navigate between lessons