draftMode

draftModeは、Draft Modeの有効化、無効化、およびサーバーコンポーネントでDraft Modeが有効かどうかを確認できる非同期関数です。

app/page.ts

import { draftMode } from 'next/headers'
 
export default async function Page() {
  const { isEnabled } = await draftMode()
}

app/page.js

import { draftMode } from 'next/headers'
 
export default async function Page() {
  const { isEnabled } = await draftMode()
}

リファレンス

以下のメソッドとプロパティが利用可能です：

メソッド	説明
`isEnabled`	Draft Modeが有効かどうかを示すブール値。
`enable()`	ルートハンドラでクッキー（`__prerender_bypass`）を設定してDraft Modeを有効にします。
`disable()`	ルートハンドラでクッキーを削除してDraft Modeを無効にします。

補足

draftModeは非同期関数でプロミスを返します。async/awaitまたはReactのuse関数を使用する必要があります。
- バージョン14以前では、draftModeは同期関数でした。下位互換性のため、Next.js 15では引き続き同期的にアクセスできますが、この動作は将来的に非推奨になります。
next buildを実行するたびに新しいバイパスクッキー値が生成されます。これにより、バイパスクッキーを推測できないようにします。
HTTPでDraft Modeをローカルにテストするには、ブラウザがサードパーティのクッキーとローカルストレージへのアクセスを許可する必要があります。

例

Draft Modeの有効化

Draft Modeを有効にするには、新しいルートハンドラを作成し、enable()メソッドを呼び出します：

app/draft/route.ts

TypeScript

import { draftMode } from 'next/headers'
 
export async function GET(request: Request) {
  const draft = await draftMode()
  draft().enable()
  return new Response('Draft mode is enabled')
}

app/draft/route.js

import { draftMode } from 'next/headers'
 
export async function GET(request) {
  const draft = await draftMode()
  draft().enable()
  return new Response('Draft mode is enabled')
}

Draft Modeの無効化

デフォルトでは、Draft Modeセッションはブラウザを閉じると終了します。

Draft Modeを手動で無効にするには、ルートハンドラでdisable()メソッドを呼び出します：

app/draft/route.ts

TypeScript

import { draftMode } from 'next/headers'
 
export async function GET(request: Request) {
  const draft = await draftMode()
  draft().disable()
  return new Response('Draft mode is disabled')
}

app/draft/route.js

import { draftMode } from 'next/headers'
 
export async function GET(request) {
  const draft = await draftMode()
  draft().disable()
  return new Response('Draft mode is disabled')
}

次に、ルートハンドラを呼び出すリクエストを送信します。<Link>コンポーネントを使用してルートを呼び出す場合は、プリフェッチ時に誤ってクッキーが削除されないようにprefetch={false}を渡す必要があります。

Draft Modeが有効かどうかの確認

サーバーコンポーネントでisEnabledプロパティを使用してDraft Modeが有効かどうかを確認できます：