Some checks failed
Test examples / Test Examples (20) (push) Has been cancelled
Test examples / Test Examples (22) (push) Has been cancelled
Lock Threads / action (push) Has been cancelled
Trigger Release / start (push) Has been cancelled
Stale issue handler / stale (push) Has been cancelled
Update Font Data / create-pull-request (push) Has been cancelled
build-and-deploy / deploy-target (push) Has been cancelled
build-and-deploy / build (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / build-wasm (nodejs) (push) Has been cancelled
build-and-deploy / build-wasm (web) (push) Has been cancelled
build-and-deploy / Deploy preview tarball (push) Has been cancelled
build-and-deploy / Potentially publish release (push) Has been cancelled
build-and-deploy / publish-turbopack-npm-packages (push) Has been cancelled
build-and-deploy / Deploy examples (push) Has been cancelled
build-and-deploy / thank you, build (push) Has been cancelled
build-and-deploy / Upload Turbopack Bytesize metrics to Datadog (push) Has been cancelled
Rspack Next.js development integration tests / Rspack integration tests (push) Has been cancelled
Rspack Next.js production integration tests / Rspack integration tests (push) Has been cancelled
Turbopack Next.js development integration tests / Next.js integration tests (push) Has been cancelled
Turbopack Next.js production integration tests / Next.js integration tests (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack development test manifest (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack production test manifest (push) Has been cancelled
Upload bundler test manifests to areweturboyet.com / Upload test results (push) Has been cancelled
Update React / create-pull-request (push) Has been cancelled
test-e2e-project-reset-cron / reset-test-project (push) Has been cancelled
Notify about the top 15 issues/PRs/feature requests (most reacted) in the last 90 days / run (push) Has been cancelled
138 lines
4.7 KiB
Plaintext
138 lines
4.7 KiB
Plaintext
---
|
||
title: draftMode
|
||
description: API Reference for the draftMode function.
|
||
related:
|
||
title: Next Steps
|
||
description: Learn how to use Draft Mode with this step-by-step guide.
|
||
links:
|
||
- app/guides/draft-mode
|
||
---
|
||
|
||
`draftMode` is an **async** function allows you to enable and disable [Draft Mode](/docs/app/guides/draft-mode), as well as check if Draft Mode is enabled in a [Server Component](/docs/app/getting-started/server-and-client-components).
|
||
|
||
```tsx filename="app/page.ts" switcher
|
||
import { draftMode } from 'next/headers'
|
||
|
||
export default async function Page() {
|
||
const { isEnabled } = await draftMode()
|
||
}
|
||
```
|
||
|
||
```jsx filename="app/page.js" switcher
|
||
import { draftMode } from 'next/headers'
|
||
|
||
export default async function Page() {
|
||
const { isEnabled } = await draftMode()
|
||
}
|
||
```
|
||
|
||
## 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
|
||
|
||
- `draftMode` is an **asynchronous** function that returns a promise. You must use `async/await` or React's [`use`](https://react.dev/reference/react/use) 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 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](/docs/app/api-reference/file-conventions/route) and call the `enable()` method:
|
||
|
||
```tsx filename="app/draft/route.ts" switcher
|
||
import { draftMode } from 'next/headers'
|
||
|
||
export async function GET(request: Request) {
|
||
const draft = await draftMode()
|
||
draft.enable()
|
||
return new Response('Draft mode is enabled')
|
||
}
|
||
```
|
||
|
||
```js filename="app/draft/route.js" switcher
|
||
import { draftMode } from 'next/headers'
|
||
|
||
export async function GET(request) {
|
||
const draft = await draftMode()
|
||
draft.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](/docs/app/api-reference/file-conventions/route):
|
||
|
||
```tsx filename="app/draft/route.ts" switcher
|
||
import { draftMode } from 'next/headers'
|
||
|
||
export async function GET(request: Request) {
|
||
const draft = await draftMode()
|
||
draft.disable()
|
||
return new Response('Draft mode is disabled')
|
||
}
|
||
```
|
||
|
||
```js filename="app/draft/route.js" switcher
|
||
import { draftMode } from 'next/headers'
|
||
|
||
export async function GET(request) {
|
||
const draft = await draftMode()
|
||
draft.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](/docs/app/api-reference/components/link), 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:
|
||
|
||
```tsx filename="app/page.ts" switcher
|
||
import { draftMode } from 'next/headers'
|
||
|
||
export default async function Page() {
|
||
const { isEnabled } = await draftMode()
|
||
return (
|
||
<main>
|
||
<h1>My Blog Post</h1>
|
||
<p>Draft Mode is currently {isEnabled ? 'Enabled' : 'Disabled'}</p>
|
||
</main>
|
||
)
|
||
}
|
||
```
|
||
|
||
```jsx filename="app/page.js" switcher
|
||
import { draftMode } from 'next/headers'
|
||
|
||
export default async function Page() {
|
||
const { isEnabled } = await draftMode()
|
||
return (
|
||
<main>
|
||
<h1>My Blog Post</h1>
|
||
<p>Draft Mode is currently {isEnabled ? 'Enabled' : 'Disabled'}</p>
|
||
</main>
|
||
)
|
||
}
|
||
```
|
||
|
||
## Version History
|
||
|
||
| Version | Changes |
|
||
| ------------ | -------------------------------------------------------------------------------------------------------- |
|
||
| `v15.0.0-RC` | `draftMode` is now an async function. A [codemod](/docs/app/guides/upgrading/codemods#150) is available. |
|
||
| `v13.4.0` | `draftMode` introduced. |
|