Draft mode and CMS previews in Next.js

An editor previews a post on the real site

The tea shop's editors write news in a CMS, a content management system: a website where they write, save drafts and publish. The news pages are prerendered and cached, so a visitor gets them fast. But an editor who changed a post wants to see the change on the real site before publishing it, with the real layout and the real styles. Request-time APIs showed the switch for that, draftMode(): a Route Handler turns it on with a cookie, and a page reads isEnabled. Here is the whole flow a CMS needs, in a real Next.js 16.4.3 project. Open the Steps tab: real Chrome visits the post, then opens the CMS's Preview link, then clicks Exit preview, then opens the post again.

1import { notFound } from "next/navigation";2import { getPost, getPublishedSlugs } from "@/lib/cms";3 4export async function generateStaticParams() {5  const slugs = await getPublishedSlugs();6  return slugs.map((slug) => ({ slug }));7}8 9export default async function NewsPost({ params }: PageProps<"/news/[slug]">) {10  const { slug } = await params;11  const post = await getPost(slug);12  if (!post) notFound();13  return (14    <article>15      <h1>{post.title}</h1>16      <p>{post.body}</p>17    </article>18  );19}

Step 1 shows the published post: Our autumn teas arrive soon. In step 2, Chrome opens the address the CMS builds when an editor clicks Preview: /api/draft with the post's slug, an expiry time and the CMS's signature of both. That request answered 307, a redirect, and the browser landed on /news/autumn-teas, which now says Our autumn teas arrive on Monday. under a banner, You are previewing drafts. Step 3 clicks Exit preview, and step 4 shows the published post again.

Line 11 of app/news/[slug]/page.tsx calls getPost, which asks the CMS for the draft only when draft mode is on. The Terminal tab shows ○ /news/autumn-teas: for everyone else, the page is the one the build prerendered.

The Preview link's Route Handler

Most CMSs let you set a preview URL: the address they open in a new tab when an editor clicks Preview, with the post's slug filled in. Whoever has that address gets the bypass cookie, and with it every draft on the site, so treat the address like a password. The shop's CMS doesn't put a fixed secret in it. It signs each link: it computes an HMAC, a code made from the slug, an expiry time a few minutes away, and a key only the CMS and the shop know. Changing the slug or the time without the key gives a code that doesn't match. The key is 32 random bytes, generated with a tool like openssl rand -hex 32 and kept in DRAFT_SECRET, a server environment variable. A Route Handler is a public address, so it checks everything before it turns draft mode on:

1import { createHmac, timingSafeEqual } from "node:crypto";2import { draftMode } from "next/headers";3import { redirect } from "next/navigation";4import { getDraftPost } from "@/lib/cms";5 6function isSignedLink(slug: string, expires: string, signature: string) {7  const key = Buffer.from(process.env.DRAFT_SECRET ?? "", "hex");8  if (key.length !== 32 || !/^[0-9a-f]{64}$/.test(signature)) return false;9  const expected = createHmac("sha256", key).update(`${slug}.${expires}`).digest();10  return timingSafeEqual(Buffer.from(signature, "hex"), expected);11}12 13export async function GET(request: Request) {14  const { searchParams } = new URL(request.url);15  const slug = searchParams.get("slug") ?? "";16  const expires = searchParams.get("expires") ?? "";17  if (!/^[a-z0-9-]+$/.test(slug) || !/^\d{10}$/.test(expires)) {18    return new Response("Invalid link.", { status: 400 });19  }20  if (!isSignedLink(slug, expires, searchParams.get("signature") ?? "")) {21    return new Response("Invalid signature.", { status: 401 });22  }23  if (Number(expires) * 1000 < Date.now()) {24    return new Response("Link expired.", { status: 401 });25  }26  const post = await getDraftPost(slug);27  if (!post) {28    return new Response("No such post.", { status: 404 });29  }30  (await draftMode()).enable();31  redirect(`/news/${post.slug}`);32}

The handler makes four checks, and answers as soon as one fails:

1. The link's shape. Line 17 accepts a slug of lowercase letters, digits and dashes, and an expiry of ten digits; line 18 answers 400 for anything else, like a whole address as the slug.
2. The signature. Lines 6 to 11 check it. Line 7 decodes the key from hex, and line 8 refuses a key that isn't 32 bytes, so a missing or short key never matches anything. That check only catches a missing or cut-off key: a key is strong because it was generated from random bytes. Line 9 computes the HMAC of slug.expires with the key, and line 10 compares it with the link's signature as two 32-byte buffers with timingSafeEqual, which takes the same time however many bytes match. (!== on strings stops at the first difference, so its timing can leak how much of a guess was right.) Line 21 answers 401 for a made-up signature, and for a signature copied from another post's link.
3. The time. Line 23 compares the expiry with the clock, and line 24 answers 401 Link expired.
4. The post. Line 26 asks the CMS for the draft, and line 28 answers 404 if it has none.

Only then does line 30 call enable(), and line 31 redirects to /news/ plus the slug the CMS sent back. The Network tab shows every answer: 401 Invalid signature. for a made-up signature, 400 Invalid link. for another site as the slug, 401 Link expired., 401 Invalid signature. for the autumn post's signature on slug=winter-teas, 404 No such post., and for the real link 307 with location: /news/autumn-teas and a set-cookie header. A redirect from a Route Handler is a 307, as Redirects explains. The recording's good links expire in the year 2100, so the recording works whenever it's made; a real CMS signs links that expire in minutes.

Turning draft mode on with a GET is an exception for this one job: a CMS opens the link in a new tab, and a new tab can only send a GET. A switch in your own app, like Exit preview below, uses a POST.

What a leaked link still gives away

A signed link only opens the post it names, and only until it expires. Once someone has used it, though, the cookie it set works on every page, for every draft, until the browser closes. So also:

• Don't share preview links; each editor clicks Preview in the CMS.
• Keep query strings out of your request logs, or drop the signature before you log an address.
• Change DRAFT_SECRET in the CMS and the shop at once if a link or the key might have leaked.
• For more, ask for a signed-in editor too: /api/draft and getPost can check the editor's session as well as the cookie, as the data access layer checks access.

If a CMS can only add a fixed secret to its preview URL, the link never expires and works for any slug: everything above matters even more. Compare that secret as two SHA-256 hashes with timingSafeEqual, as Request-time APIs does.

Why the path comes from the CMS

Preview links get pasted into chats, saved in browser history and written to server logs. Here is the handler as it's often first written, with a fixed secret in the address, and the same attack sent to both versions:

import { draftMode } from "next/headers";
import { redirect } from "next/navigation";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  if (searchParams.get("secret") !== process.env.DRAFT_SECRET) {
    return new Response("Invalid secret.", { status: 401 });
  }
  (await draftMode()).enable();
  redirect(searchParams.get("slug") ?? "/");
}

1import { draftMode } from "next/headers";2import { redirect } from "next/navigation";3 4export async function GET(request: Request) {5  const { searchParams } = new URL(request.url);6  if (searchParams.get("secret") !== process.env.DRAFT_SECRET) {7    return new Response("Invalid secret.", { status: 401 });8  }9  (await draftMode()).enable();10  redirect(searchParams.get("slug") ?? "/");11}

Line 10 of the first version redirects wherever slug says. With the secret and slug=https://evil.example/login, it answered 307 with location: https://evil.example/login: an open redirect. Anyone with a leaked link can send people from an address on your site to a page that copies your sign-in form. The safe version answered 400 and set no cookie. Its redirect only ever uses post.slug, from the CMS's answer.

Draft content, only for draft requests

A CMS usually keeps drafts behind a preview token: a key that lets the shop read unpublished posts. The shop keeps it in CMS_PREVIEW_TOKEN, on the server. lib/cms.ts uses it only when draft mode is on:

import "server-only";
import { cacheTag } from "next/cache";
import { draftMode } from "next/headers";

export type Post = { slug: string; title: string; body: string };

const cms = process.env.CMS_URL;

export async function getPublishedSlugs(): Promise<string[]> {
  "use cache";
  cacheTag("posts");
  const response = await fetch(`${cms}/posts`);
  const posts: Post[] = await response.json();
  return posts.map((post) => post.slug);
}

async function getPublishedPost(slug: string): Promise<Post | undefined> {
  "use cache";
  cacheTag("posts");
  const response = await fetch(`${cms}/posts/${slug}`);
  return response.ok ? response.json() : undefined;
}

export async function getDraftPost(slug: string): Promise<Post | undefined> {
  const response = await fetch(`${cms}/drafts/${slug}`, {
    headers: { authorization: `Bearer ${process.env.CMS_PREVIEW_TOKEN}` },
  });
  return response.ok ? response.json() : undefined;
}

export async function getPost(slug: string) {
  const { isEnabled } = await draftMode();
  return isEnabled ? getDraftPost(slug) : getPublishedPost(slug);
}

• Line 1, import "server-only", stops the build if a Client Component ever imports this file, so the token can't end up in the browser's JavaScript.
• Lines 17 to 22, getPublishedPost, fetch /posts/… with no token, inside "use cache", tagged posts for revalidation when an editor publishes.
• Lines 24 to 29, getDraftPost, fetch /drafts/… with the token in an authorization header. They aren't cached, on purpose.
• Lines 31 to 34, getPost, read isEnabled and pick one. The page only calls getPost.

The CMS in the recording is a stand-in that kept every request it got. Like a real CMS, it answers /drafts only with the right token in the authorization header, and 401 without it; every draft request in the recording got 200. During the build, it was asked for /posts and /posts/autumn-teas. While the server ran, it was asked only for drafts: every editor request reached it, and no visitor's did. Open the Network tab on the editor's request:

1import "server-only";2import { cacheTag } from "next/cache";3import { draftMode } from "next/headers";4 5export type Post = { slug: string; title: string; body: string };6 7const cms = process.env.CMS_URL;8 9export async function getPublishedSlugs(): Promise<string[]> {10  "use cache";11  cacheTag("posts");12  const response = await fetch(`${cms}/posts`);13  const posts: Post[] = await response.json();14  return posts.map((post) => post.slug);15}16 17async function getPublishedPost(slug: string): Promise<Post | undefined> {18  "use cache";19  cacheTag("posts");20  const response = await fetch(`${cms}/posts/${slug}`);21  return response.ok ? response.json() : undefined;22}23 24export async function getDraftPost(slug: string): Promise<Post | undefined> {25  const response = await fetch(`${cms}/drafts/${slug}`, {26    headers: { authorization: `Bearer ${process.env.CMS_PREVIEW_TOKEN}` },27  });28  return response.ok ? response.json() : undefined;29}30 31export async function getPost(slug: string) {32  const { isEnabled } = await draftMode();33  return isEnabled ? getDraftPost(slug) : getPublishedPost(slug);34}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preload" as="script" fetchpriority="low" href="/_next/static/chunks/3cfn99dbrcvvp.js">
    <script src="/_next/static/chunks/1j_b1xq_woyiy.js" async=""></script>
    <script src="/_next/static/chunks/2ki52vdnbo2ft.js" async=""></script>
    <script src="/_next/static/chunks/turbopack-3-ry682tkyiqk.js" async=""></script>
    <script src="/_next/static/chunks/1tq6ppe__m8m-.js" async=""></script>
    <script src="/_next/static/chunks/0cz1d0mv5g_q7.js" nomodule=""></script>
  </head>
  <body>
    <div hidden="">
      <!--$-->
      <!--/$-->
    </div>
    <aside role="status">
      <p>You are previewing drafts.</p>
      <form action="" enctype="multipart/form-data" method="POST"><input type="hidden" name="$ACTION_ID_0076250cfc3820a0aaa75b8be77c11595e81847de9"><button>Exit preview</button></form>
    </aside>
    <!--&-->
    <!--&-->
    <!--&-->
    <article>
      <h1>Autumn teas</h1>
      <p>Our autumn teas arrive on Monday.</p>
    </article>
    <!--$-->
    <!--/$-->
    <!--/&-->
    <!--/&-->
    <!--/&-->
    <script id="_R_">…</script>
    <script src="/_next/static/chunks/3cfn99dbrcvvp.js" async=""></script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
  </body>
</html>

The recorder sent this request with the cookie the 307 had set, as a browser does. The page has the draft and the banner. Its cache-control is private, no-cache, no-store, max-age=0, must-revalidate: no browser cache or CDN (the servers around the world that keep copies of your pages) may keep it. The next request on the list, a visitor, after the editor, got the published post with s-maxage=900, the cached page.

The editor's response also says x-nextjs-cache: HIT. Don't read that header in draft mode: Next.js 16.4.3 looks up a stored page only when draft mode is off (lines 717 to 725 of app-page-runtime.ts), and still labels this response HIT. The page's text, a draft that no build ever saw, shows where it came from.

Draft mode and cached data

getPost above keeps drafts out of the cache by never caching them. What if a draft goes through a cached function? The docs say isEnabled can be read inside "use cache". This version has one cached getPost that reads draft mode inside the cache and picks the CMS's address:

1import "server-only";2import { cacheTag } from "next/cache";3import { draftMode } from "next/headers";4 5export type Post = { slug: string; title: string; body: string };6 7const cms = process.env.CMS_URL;8 9export async function getPublishedSlugs(): Promise<string[]> {10  "use cache";11  cacheTag("posts");12  const response = await fetch(`${cms}/posts`);13  const posts: Post[] = await response.json();14  return posts.map((post) => post.slug);15}16 17export async function getPost(slug: string): Promise<Post | undefined> {18  "use cache";19  cacheTag("posts");20  const { isEnabled } = await draftMode();21  const response = await fetch(`${cms}/${isEnabled ? "drafts" : "posts"}/${slug}`, {22    headers: isEnabled ? { authorization: `Bearer ${process.env.CMS_PREVIEW_TOKEN}` } : {},23  });24  return response.ok ? response.json() : undefined;25}26 27export async function getDraftPost(slug: string): Promise<Post | undefined> {28  const response = await fetch(`${cms}/drafts/${slug}`, {29    headers: { authorization: `Bearer ${process.env.CMS_PREVIEW_TOKEN}` },30  });31  return response.ok ? response.json() : undefined;32}33 

Line 18 caches getPost, and line 20 reads draft mode inside it. The cache key is the function and its argument, the slug. Draft mode isn't part of it. If Next.js stored the editor's result, the next visitor would get the draft under the same key. So Next.js does two things for a request in draft mode (shouldForceRevalidate and lines 3577 and 3578 of use-cache-wrapper.ts):

• It skips the stored copies, so the function runs again.
• It never saves what the function returns.

The spring post was published after the last build, so the build didn't prerender it, and its first visitor's request ran getPost. Then the editor opened the Preview link and the post twice, and another visitor came:

1import "server-only";2import { cacheTag } from "next/cache";3import { draftMode } from "next/headers";4 5export type Post = { slug: string; title: string; body: string };6 7const cms = process.env.CMS_URL;8 9export async function getPublishedSlugs(): Promise<string[]> {10  "use cache";11  cacheTag("posts");12  const response = await fetch(`${cms}/posts`);13  const posts: Post[] = await response.json();14  return posts.map((post) => post.slug);15}16 17export async function getPost(slug: string): Promise<Post | undefined> {18  "use cache";19  cacheTag("posts");20  const { isEnabled } = await draftMode();21  const response = await fetch(`${cms}/${isEnabled ? "drafts" : "posts"}/${slug}`, {22    headers: isEnabled ? { authorization: `Bearer ${process.env.CMS_PREVIEW_TOKEN}` } : {},23  });24  return response.ok ? response.json() : undefined;25}26 27export async function getDraftPost(slug: string): Promise<Post | undefined> {28  const response = await fetch(`${cms}/drafts/${slug}`, {29    headers: { authorization: `Bearer ${process.env.CMS_PREVIEW_TOKEN}` },30  });31  return response.ok ? response.json() : undefined;32}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preload" as="script" fetchpriority="low" href="/_next/static/chunks/3cfn99dbrcvvp.js">
    <script src="/_next/static/chunks/1j_b1xq_woyiy.js" async=""></script>
    <script src="/_next/static/chunks/2ki52vdnbo2ft.js" async=""></script>
    <script src="/_next/static/chunks/turbopack-3-ry682tkyiqk.js" async=""></script>
    <script src="/_next/static/chunks/1tq6ppe__m8m-.js" async=""></script>
    <script src="/_next/static/chunks/0cz1d0mv5g_q7.js" nomodule=""></script>
  </head>
  <body>
    <div hidden="">
      <!--$-->
      <!--/$-->
    </div>
    <!--&-->
    <!--&-->
    <!--&-->
    <article>
      <h1>Spring teas</h1>
      <p>Our spring teas are sold out.</p>
    </article>
    <!--$-->
    <!--/$-->
    <!--/&-->
    <!--/&-->
    <!--/&-->
    <script id="_R_">…</script>
    <script src="/_next/static/chunks/3cfn99dbrcvvp.js" async=""></script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
  </body>
</html>

The stand-in CMS got /posts/spring-teas once, for the first visitor. Then /drafts/spring-teas three times: once from the Route Handler, which checks the post, and once for each of the editor's two views, each showing Our spring teas are back in March. The last visitor got Our spring teas are sold out., and the CMS wasn't asked at all: the stored published copy was still there, untouched by the editor's two runs.

Each row is one place a copy can be kept, and what draft mode does to it in Next.js 16.4.3:

Two limits. draftMode().enable() and disable() throw inside "use cache" (lines 215 to 224 of draft-mode.ts): turn draft mode on and off only in a Route Handler or a Server Action. And cookies() and headers() still can't be read inside "use cache", even in draft mode. Both versions of getPost work; the first one also makes it plain, in your own code, that drafts are never cached.

The bypass cookie: where and how long

Everything above depends on one cookie. The 307 set it with this header (the Network tab of the route example shows it):

__prerender_bypass=021dbd8c40a50f5d0e705e68bf17af7e; Path=/; Secure; HttpOnly; SameSite=none

enable() writes it in draft-mode-provider.ts. Each row is one part of the header:

next start set these parts. next dev sets SameSite=lax and leaves out Secure, so draft mode works on http://localhost while you build. Because of Path=/, draft mode isn't for one post. The recording's editor opened /teas and got the banner there too, and opened /news/winter-teas, a post that was never published, and saw its draft: Spiced chai is back in December. Any page that calls getPost shows drafts until the editor leaves draft mode.

The value is what makes the cookie hard to fake. Next.js turns draft mode on only when the cookie equals the build's preview ID (lines 41 to 49): 16 random bytes that next build makes. The docs say each build makes a new one. In 16.4.3, a build keeps it in .next/cache and reuses it for up to 14 days when that folder is kept between builds, and makes a new one every time inside Docker (preview-key-utils.ts). When a deploy gets a new ID, every editor's cookie stops working, and they click Preview again.

Turning draft mode off

The cookie ends when the browser closes. Editors also need a way out that doesn't mean closing the browser. The banner in the layout shows one, only in draft mode:

import { draftMode } from "next/headers";
import { exitPreview } from "./actions";

export async function PreviewBanner() {
  const { isEnabled } = await draftMode();
  if (!isEnabled) return null;
  return (
    <aside role="status">
      <p>You are previewing drafts.</p>
      <form action={exitPreview}>
        <button>Exit preview</button>
      </form>
    </aside>
  );
}

"use server";
import { draftMode } from "next/headers";
import { redirect } from "next/navigation";

export async function exitPreview() {
  (await draftMode()).disable();
  redirect("/");
}

Line 6 of the banner returns nothing for visitors. Lines 10 to 12 are a form whose action is exitPreview, a Server Action: line 6 of app/actions.ts calls disable(), which sets the cookie again with an empty value and an expiry date in 1970, so the browser deletes it (lines 78 to 93). Line 7 redirects to the home page. Anyone can call this action, and that's fine: it only ends draft mode for the browser that calls it.

Why a form and not a link? <Link> prefetches the page it points to as soon as it shows, and a GET Route Handler runs for a prefetch like for a click. Compare the two banners in real Chrome:

import Link from "next/link";
import { draftMode } from "next/headers";

export async function PreviewBanner() {
  const { isEnabled } = await draftMode();
  if (!isEnabled) return null;
  return (
    <aside role="status">
      <p>You are previewing drafts.</p>
      <Link href="/api/draft/exit">Exit preview</Link>
    </aside>
  );
}

1import { draftMode } from "next/headers";2import { exitPreview } from "./actions";3 4export async function PreviewBanner() {5  const { isEnabled } = await draftMode();6  if (!isEnabled) return null;7  return (8    <aside role="status">9      <p>You are previewing drafts.</p>10      <form action={exitPreview}>11        <button>Exit preview</button>12      </form>13    </aside>14  );15}

With the Link, step 2 waits until the router has fetched /api/draft/exit?_rsc=… with next-router-prefetch: 1, and that fetch was answered 307: the handler ran and deleted the cookie, and step 3 shows the published post, though nobody clicked anything. With the form, draft mode lasted until the click: step 3's request is a POST with a next-action header, and then the home page showed. Forms are never prefetched. If you keep a GET handler for leaving draft mode, link to it with prefetch={false}, as the docs say, or use a plain <form method="get">.

Safe, or a problem?

Every card is a choice someone made while building a Preview link. Sort each one:

The pattern: check before you enable, redirect only to paths you made, keep the token in server code, never cache a draft for everyone, and leave draft mode only when the editor asks.

Common mix-ups

• "Draft mode makes the page dynamic for everyone." No. The post stayed ○, and visitors before and after the editor got the prerendered page.
• "A secret in the Preview link is enough." No. A fixed secret works for any slug and never expires, and the recording's first version redirected to another site. Sign each link for one post with an expiry, check the slug, and redirect to the CMS's path.
• "draftMode() is for one post." No. The cookie's Path=/ turns it on for the whole site, until the editor leaves or closes the browser.
• "A cached function would store the editor's draft." No. In draft mode it runs again and its result is never saved; the next visitor got the published copy.
• "x-nextjs-cache: HIT means the draft came from a cache." No. In draft mode, Next.js renders without looking in its page cache; the header isn't telling you where the page came from.
• "An Exit preview link is harmless." No. The router prefetched it and ended draft mode before anyone clicked.

Practice exercises

These exercises are about Next.js projects, which can't run inside this page. Answer first, then use the hints.

import { createHmac, timingSafeEqual } from "node:crypto";
import { draftMode } from "next/headers";
import { redirect } from "next/navigation";
import { getDraftPost } from "@/lib/cms";

function isSignedLink(slug: string, expires: string, signature: string) {
  const key = Buffer.from(process.env.DRAFT_SECRET ?? "", "hex");
  if (key.length !== 32 || !/^[0-9a-f]{64}$/.test(signature)) return false;
  const expected = createHmac("sha256", key).update(`${slug}.${expires}`).digest();
  return timingSafeEqual(Buffer.from(signature, "hex"), expected);
}

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const slug = searchParams.get("slug") ?? "";
  const expires = searchParams.get("expires") ?? "";
  if (!/^[a-z0-9-]+$/.test(slug) || !/^\d{10}$/.test(expires)) {
    return new Response("Invalid link.", { status: 400 });
  }
  if (!isSignedLink(slug, expires, searchParams.get("signature") ?? "")) {
    return new Response("Invalid signature.", { status: 401 });
  }
  if (Number(expires) * 1000 < Date.now()) {
    return new Response("Link expired.", { status: 401 });
  }
  const post = await getDraftPost(slug);
  if (!post) {
    return new Response("No such post.", { status: 404 });
  }
  (await draftMode()).enable();
  redirect(`/news/${post.slug}`);
}

import "server-only";
import { cacheTag } from "next/cache";
import { draftMode } from "next/headers";

export type Post = { slug: string; title: string; body: string };

const cms = process.env.CMS_URL;

export async function getPublishedSlugs(): Promise<string[]> {
  "use cache";
  cacheTag("posts");
  const response = await fetch(`${cms}/posts`);
  const posts: Post[] = await response.json();
  return posts.map((post) => post.slug);
}

async function getPublishedPost(slug: string): Promise<Post | undefined> {
  "use cache";
  cacheTag("posts");
  const response = await fetch(`${cms}/posts/${slug}`);
  return response.ok ? response.json() : undefined;
}

export async function getDraftPost(slug: string): Promise<Post | undefined> {
  const response = await fetch(`${cms}/drafts/${slug}`, {
    headers: { authorization: `Bearer ${process.env.CMS_PREVIEW_TOKEN}` },
  });
  return response.ok ? response.json() : undefined;
}

export async function getPost(slug: string) {
  const { isEnabled } = await draftMode();
  return isEnabled ? getDraftPost(slug) : getPublishedPost(slug);
}

import { draftMode } from "next/headers";
import { redirect } from "next/navigation";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  if (searchParams.get("secret") !== process.env.DRAFT_SECRET) {
    return new Response("Invalid secret.", { status: 401 });
  }
  (await draftMode()).enable();
  redirect(searchParams.get("slug") ?? "/");
}

import { createHmac, timingSafeEqual } from "node:crypto";
import { draftMode } from "next/headers";
import { redirect } from "next/navigation";
import { getDraftPost } from "@/lib/cms";

function isSignedLink(slug: string, expires: string, signature: string) {
  const key = Buffer.from(process.env.DRAFT_SECRET ?? "", "hex");
  if (key.length !== 32 || !/^[0-9a-f]{64}$/.test(signature)) return false;
  const expected = createHmac("sha256", key).update(`${slug}.${expires}`).digest();
  return timingSafeEqual(Buffer.from(signature, "hex"), expected);
}

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const slug = searchParams.get("slug") ?? "";
  const expires = searchParams.get("expires") ?? "";
  if (!/^[a-z0-9-]+$/.test(slug) || !/^\d{10}$/.test(expires)) {
    return new Response("Invalid link.", { status: 400 });
  }
  if (!isSignedLink(slug, expires, searchParams.get("signature") ?? "")) {
    return new Response("Invalid signature.", { status: 401 });
  }
  if (Number(expires) * 1000 < Date.now()) {
    return new Response("Link expired.", { status: 401 });
  }
  const post = await getDraftPost(slug);
  if (!post) {
    return new Response("No such post.", { status: 404 });
  }
  (await draftMode()).enable();
  redirect(`/news/${post.slug}`);
}

import { draftMode } from "next/headers";
import { redirect } from "next/navigation";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  if (searchParams.get("secret") !== process.env.DRAFT_SECRET) {
    return new Response("Invalid secret.", { status: 401 });
  }
  (await draftMode()).enable();
  redirect(searchParams.get("slug") ?? "/");
}

import { createHmac, timingSafeEqual } from "node:crypto";
import { draftMode } from "next/headers";
import { redirect } from "next/navigation";
import { getDraftPost } from "@/lib/cms";

function isSignedLink(slug: string, expires: string, signature: string) {
  const key = Buffer.from(process.env.DRAFT_SECRET ?? "", "hex");
  if (key.length !== 32 || !/^[0-9a-f]{64}$/.test(signature)) return false;
  const expected = createHmac("sha256", key).update(`${slug}.${expires}`).digest();
  return timingSafeEqual(Buffer.from(signature, "hex"), expected);
}

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const slug = searchParams.get("slug") ?? "";
  const expires = searchParams.get("expires") ?? "";
  if (!/^[a-z0-9-]+$/.test(slug) || !/^\d{10}$/.test(expires)) {
    return new Response("Invalid link.", { status: 400 });
  }
  if (!isSignedLink(slug, expires, searchParams.get("signature") ?? "")) {
    return new Response("Invalid signature.", { status: 401 });
  }
  if (Number(expires) * 1000 < Date.now()) {
    return new Response("Link expired.", { status: 401 });
  }
  const post = await getDraftPost(slug);
  if (!post) {
    return new Response("No such post.", { status: 404 });
  }
  (await draftMode()).enable();
  redirect(`/news/${post.slug}`);
}

import Link from "next/link";
import { draftMode } from "next/headers";

export async function PreviewBanner() {
  const { isEnabled } = await draftMode();
  if (!isEnabled) return null;
  return (
    <aside role="status">
      <p>You are previewing drafts.</p>
      <Link href="/api/draft/exit">Exit preview</Link>
    </aside>
  );
}

import { draftMode } from "next/headers";
import { exitPreview } from "./actions";

export async function PreviewBanner() {
  const { isEnabled } = await draftMode();
  if (!isEnabled) return null;
  return (
    <aside role="status">
      <p>You are previewing drafts.</p>
      <form action={exitPreview}>
        <button>Exit preview</button>
      </form>
    </aside>
  );
}

import "server-only";
import { cacheTag } from "next/cache";
import { draftMode } from "next/headers";

export type Post = { slug: string; title: string; body: string };

const cms = process.env.CMS_URL;

export async function getPublishedSlugs(): Promise<string[]> {
  "use cache";
  cacheTag("posts");
  const response = await fetch(`${cms}/posts`);
  const posts: Post[] = await response.json();
  return posts.map((post) => post.slug);
}

export async function getPost(slug: string): Promise<Post | undefined> {
  "use cache";
  cacheTag("posts");
  const { isEnabled } = await draftMode();
  const response = await fetch(`${cms}/${isEnabled ? "drafts" : "posts"}/${slug}`, {
    headers: isEnabled ? { authorization: `Bearer ${process.env.CMS_PREVIEW_TOKEN}` } : {},
  });
  return response.ok ? response.json() : undefined;
}

export async function getDraftPost(slug: string): Promise<Post | undefined> {
  const response = await fetch(`${cms}/drafts/${slug}`, {
    headers: { authorization: `Bearer ${process.env.CMS_PREVIEW_TOKEN}` },
  });
  return response.ok ? response.json() : undefined;
}

Check your understanding

Key takeaways

• The CMS's Preview link is a password for every draft. Have the CMS sign it for one post with an expiry, check the HMAC with timingSafeEqual, check the slug's shape and the time, ask the CMS for the post, then call enable().
• Redirect to a path built from the CMS's answer, never to the address's slug: that's an open redirect.
• Fetch drafts with the preview token only when draftMode().isEnabled is true, in server-only code, and don't cache them.
• In draft mode, Next.js renders the page for the request, never saves it, sends private, no-cache, no-store, and runs "use cache" functions again without storing them. Visitors keep the cached pages.
• In next start, the __prerender_bypass cookie is Path=/, HttpOnly, Secure and SameSite=none (next dev uses SameSite=lax without Secure). It ends when the browser closes, and works only while its value matches the build's preview ID.
• Leave draft mode with a form and a Server Action that calls disable(). A Link to a GET handler gets prefetched and ends draft mode on its own.

Coming next: Work after the response. after() runs logging and other jobs once the response has gone, so nobody waits for them.