jsschools

draftMode()

Enables preview/draft rendering of unpublished CMS content.

Since Next 13.4 (App Router); async since Next 15 Spec ↗

Syntax

import { draftMode } from 'next/headers'; const dm = await draftMode()

Returns

Promise<{ isEnabled, enable, disable }> — Draft mode state and toggles.

Examples

import { draftMode } from 'next/headers'

export default async function Page() {
  const { isEnabled } = await draftMode()
  const posts = await getPosts({ preview: isEnabled })
  return <PostList posts={posts} />
}

// app/api/draft/route.ts — enable from a CMS preview link
import { draftMode } from 'next/headers'
import { redirect } from 'next/navigation'

export async function GET() {
  const dm = await draftMode()
  dm.enable()
  redirect('/')
}

Notes

Next 15: `draftMode()` is async. `enable()`/`disable()` can only be called in a Route Handler or Server Action (they set a cookie). When enabled, the route renders dynamically with fresh data so editors see unpublished content. Server-only.

See also