Next.js › Draft Mode & Preview Mode

How would you build a complete preview workflow connecting a headless CMS to Draft Mode in Next.js?

Advanced

Answer

You configure your CMS to generate a preview link containing a secret token and the content slug, pointing to your Draft Mode enabling route, which verifies the secret, enables Draft Mode, and redirects the editor to the actual content page, which then fetches and displays the unpublished draft version.

export async function GET(request) {
  const secret = request.nextUrl.searchParams.get('secret');
  const slug = request.nextUrl.searchParams.get('slug');
  if (secret !== process.env.DRAFT_SECRET) {
    return new Response('Invalid token', { status: 401 });
  }
  const draft = await draftMode();
  draft.enable();
  redirect(`/posts/${slug}`);
}

Real-world example A publishing company sets up a full preview button inside their CMS that links directly to their Next.js Draft Mode route, letting editors instantly view any unpublished article exactly as it will appear once published.

Common follow-ups: How do you exit Draft Mode once an editor is finished previewing?;What happens if the slug in the preview link does not match any existing content?

Headless CMS Integration;Route Handlers (API Route.js)