Draft Mode

Next.js heavily caches pages for performance (SSG). But content editors need a way to preview unpublished drafts from a Headless CMS (like Sanity or Contentful) *before* publishing.

**Draft Mode** solves this by setting a secure, signed cookie on the editor's browser. When Next.js detects this cookie, it temporarily bypasses the Full Route Cache and Data Cache, rendering the page dynamically.

You don't want to disable caching for everyone just because one editor is previewing a post.

Draft Mode ensures that the 99.9% of regular visitors continue to get the blazing fast, cached, statically generated version of the site, while the 0.1% (the editors) get dynamic, real-time draft data.

First, create a Route Handler to enable it. This should be secured with a secret token.

typescript

// app/api/draft/route.ts

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.MY_SECRET) {

return new Response('Invalid token', { status: 401 });

}

draftMode().enable(); // Sets the signed cookie

redirect('/post/my-new-post');

}

Then, in your Server Component, check if it's enabled:

typescript

// app/post/[slug]/page.tsx

import { draftMode } from 'next/headers';

export default async function Page({ params }) {

const { isEnabled } = draftMode();

// Fetch draft data if enabled, otherwise fetch live cached data

const post = await fetchCMS(params.slug, { draft: isEnabled });

return <article>{post.title}</article>;

}