Next.js 16+ · Function

draftMode

draftMode lets App Router code inspect or toggle Draft Mode for previewing unpublished CMS content. It is asynchronous and exposes isEnabled, enable(), and disable().

How it works

Call the asynchronous function in a Server Component or Route Handler, then use its returned object to inspect isEnabled or toggle the session with enable() and disable(). Enabling sets a bypass cookie so the request avoids cached or pre-rendered results and can retrieve current draft data.

Syntax

const draft = await draftMode()

Returns

A promise resolving to an object with isEnabled, enable(), and disable().

Key points

Import draftMode from next/headers; it exposes the controls for the current Draft Mode session.
Read isEnabled in a Server Component when the UI needs to distinguish preview output from published output.
Call enable() in a Route Handler to set the bypass cookie that activates preview behavior.
Call disable() in a Route Handler when the preview session should end before the browser session expires.

Common mistakes

Await the function before reading its properties or calling its methods; synchronous access is not supported.
Draft Mode normally uses a session cookie, so preview access does not persist after the browser closes.

Example: Enable Draft Mode in a Route Handler

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

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const slug = searchParams.get('slug') || '/'
  const draft = await draftMode()

  draft.enable()
  redirect(slug)
}

This Route Handler enables Draft Mode for the request and redirects the browser to the requested path.

When to use it

Preview unpublished content

A CMS preview link opens a Route Handler that enables Draft Mode before redirecting to a page.

Detect preview state

A Server Component checks isEnabled to render preview-only controls or diagnostics.

End a preview session

A preview-exit endpoint calls disable() to remove the bypass cookie.

Interview questions

QWhat does draftMode provide?

draftMode is asynchronous and returns an object containing isEnabled, enable(), and disable(). Use isEnabled in a Server Component to determine whether the current request is previewing draft content.

Follow-up: Why must a Route Handler or Server Action perform the toggle? The documentation disallows enable() and disable() inside a caching directive scope, so the mutation belongs in a request-handling or action boundary.

QHow do you enable and disable Draft Mode?

Calling enable() sets the __prerender_bypass cookie, which activates Draft Mode for subsequent requests. Calling disable() removes that cookie and ends the mode manually.

Follow-up: What happens to the default session? It ends when the browser closes unless the application explicitly disables it earlier.

QWhat rendering behavior changes when Draft Mode is enabled?

Draft Mode bypasses cached or pre-rendered content for the preview request, allowing draft data to be fetched from upstream sources. Other visitors continue receiving the cached or pre-rendered page.

Follow-up: Which caching mechanisms are affected? fetch() skips the Next.js fetch cache, 'use cache' code re-executes without saving results, and unstable_cache reads and writes are bypassed.

Route Handlers
Server Components
Server Actions
fetch cache
use cache
unstable_cache

Source: Functions: draftMode. Checked 2026-10-15.