draftMode

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

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 は Promise を返す 非同期 関数です。async/await または React の use 関数を使用する必要があります。
- バージョン 14 以前では、draftMode は同期関数でした。後方互換性のために Next.js 15 でも同期アクセス可能ですが、この動作は将来非推奨になります。
next build を実行するたびに新しいバイパスクッキー値が生成されます。これにより、バイパスクッキーが推測されるのを防ぎます。
HTTP 経由でローカルで Draft Mode をテストする場合、ブラウザでサードパーティークッキーとローカルストレージへのアクセスを許可する必要があります。

使用例

Draft Mode の有効化

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

import { draftMode } from 'next/headers'

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

Draft Mode の無効化

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

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

import { draftMode } from 'next/headers'

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

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

Draft Mode の有効状態を確認

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

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>
  )
}

バージョン履歴

バージョン	変更内容
`v15.0.0-RC`	`draftMode` が非同期関数に変更。コードモッドが利用可能。
`v13.4.0`	`draftMode` が導入。

Draft Mode

Next.jsには静的ページと動的ページを切り替えるDraft Modeがあります。App Routerでの動作方法について学びましょう。