Previewing Content with Draft Mode in Next.js – Secure Previews from Your Headless CMS

Introduction

Draft Mode in Next.js lets you preview unpublished content from your CMS without triggering a full rebuild. It enables dynamic rendering for statically generated pages, making it ideal for editorial workflows and content previews.

Step 1: Create a Route Handler

Create a file like app/api/draft/route.ts and enable Draft Mode:

import { draftMode } from 'next/headers'

export async function GET(request: Request) {
  const draft = await draftMode()
  draft.enable()
  return new Response('Draft mode is enabled')
}

This sets a cookie that activates Draft Mode. You can test it by visiting /api/draft and checking for the __prerender_bypass cookie in your browser.

Step 2: Secure Access from Your CMS

To securely enable Draft Mode from your CMS:

1. Generate a secret token shared between your CMS and Next.js
2. Configure your CMS to use a preview URL like:

https://your-site.com/api/draft?secret=YOUR_TOKEN&slug=/posts/one

Update your route handler to validate the token and slug:

import { draftMode } from 'next/headers'
import { redirect } from 'next/navigation'

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const secret = searchParams.get('secret')
  const slug = searchParams.get('slug')

  if (secret !== 'MY_SECRET_TOKEN' || !slug) {
    return new Response('Invalid token', { status: 401 })
  }

  const post = await getPostBySlug(slug)
  if (!post) {
    return new Response('Invalid slug', { status: 401 })
  }

  const draft = await draftMode()
  draft.enable()

  redirect(post.slug)
}

Step 3: Render Draft Content

In your page, check if Draft Mode is enabled and fetch the appropriate data:

import { draftMode } from 'next/headers'

async function getData() {
  const { isEnabled } = await draftMode()

  const url = isEnabled
    ? 'https://draft.example.com'
    : 'https://production.example.com'

  const res = await fetch(url)
  return res.json()
}

export default async function Page() {
  const { title, desc } = await getData()

  return (
    <main>
      <h1>{title}</h1>
      <p>{desc}</p>
    </main>
  )
}

When the draft cookie is present, the page will render dynamically and show the latest draft content.

Conclusion

Draft Mode in Next.js provides a secure and efficient way to preview unpublished content from your CMS. By validating tokens and slugs, and dynamically rendering pages when needed, you can create a seamless editorial experience without compromising performance or security.