You are currently viewing documentation for the canary channel of Next.js
draftMode
The draftMode
function allows you to enable and disable Draft Mode, as well as check if Draft Mode is enabled in a Server Component.
Reference
The following methods and properties are available:
Method | Description |
---|---|
isEnabled | A boolean value that indicates if Draft Mode is enabled. |
enable() | Enables Draft Mode in a Route Handler by setting a cookie (__prerender_bypass ). |
disable() | Disables Draft Mode in a Route Handler by deleting a cookie. |
Good to know:
- A new bypass cookie value will be generated each time you run
next 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 new Route Handler and call the enable()
method:
app/draft/route.ts
import { draftMode } from 'next/headers'
export async function GET(request: Request) {
draftMode().enable()
return new Response('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 the disable()
method in your Route Handler:
app/draft/route.ts
import { draftMode } from 'next/headers'
export async function GET(request: Request) {
draftMode().disable()
return new Response('Draft mode is disabled')
}
Then, send a request to invoke the Route Handler. If calling the route using the <Link>
component, you must pass prefetch={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 the isEnabled
property:
app/page.ts
import { draftMode } from 'next/headers'
export default function Page() {
const { isEnabled } = draftMode()
return (
<main>
<h1>My Blog Post</h1>
<p>Draft Mode is currently {isEnabled ? 'Enabled' : 'Disabled'}</p>
</main>
)
}
app/page.js
import { draftMode } from 'next/headers'
export default function Page() {
const { isEnabled } = draftMode()
return (
<main>
<h1>My Blog Post</h1>
<p>Draft Mode is currently {isEnabled ? 'Enabled' : 'Disabled'}</p>
</main>
)
}
Version History
Version | Changes |
---|---|
v13.4.0 | draftMode introduced. |
Next Steps
Learn how to use Draft Mode with this step-by-step guide.
Was this helpful?