draftMode

draftMode is anasync function allows you to enable and disableDraft Mode, as well as check if Draft Mode is enabled in aServer Component.

import { draftMode }from'next/headers'exportdefaultasyncfunctionPage() {const {isEnabled }=awaitdraftMode()}

Reference

The following methods and properties are available:

Good to know

• draftMode is anasynchronous function that returns a promise. You must useasync/await or React'suse function.
  • In version 14 and earlier,draftMode was a synchronous function. To help with backwards compatibility, you can still access it synchronously in Next.js 15, but this behavior will be deprecated in the future.
• A new bypass cookie value will be generated each time you runnext build. This ensures that the bypass cookie can’t be guessed.
• To test Draft Mode locally over HTTP, your browser will need to allow third-party cookies and local storage access.

Examples

Enabling Draft Mode

To enable Draft Mode, create a newRoute Handler and call theenable() method:

import {draftMode }from'next/headers'exportasyncfunctionGET(request:Request) {constdraft=awaitdraftMode()draft.enable()returnnewResponse('Draft mode is enabled')}

Disabling Draft Mode

By default, the Draft Mode session ends when the browser is closed.

To disable Draft Mode manually, call thedisable() method in yourRoute Handler:

import {draftMode }from'next/headers'exportasyncfunctionGET(request:Request) {constdraft=awaitdraftMode()draft.disable()returnnewResponse('Draft mode is disabled')}

Then, send a request to invoke the Route Handler. If calling the route using the<Link> component, you must passprefetch={false} to prevent accidentally deleting the cookie on prefetch.

Checking if Draft Mode is enabled

You can check if Draft Mode is enabled in a Server Component with theisEnabled property:

import { draftMode }from'next/headers'exportdefaultasyncfunctionPage() {const {isEnabled }=awaitdraftMode()return (    <main>      <h1>My Blog Post</h1>      <p>Draft Mode is currently {isEnabled?'Enabled':'Disabled'}</p>    </main>  )}

Version History

Next Steps