draftMode

draftMode は、ドラフトモードを有効化および無効化したり、サーバーコンポーネントでドラフトモードが有効になっているかどうかを確認したりできる、**非同期** 関数です。

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`	ドラフトモードが有効になっているかどうかを示すブール値。
`enable()`	クッキー (`__prerender_bypass`) を設定することにより、ルートハンドラーでドラフトモードを有効にします。
`disable()`	クッキーを削除することにより、ルートハンドラーでドラフトモードを無効にします。

知っておくと良いこと

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

例

ドラフトモードの有効化

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

app/draft/route.ts

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

ドラフトモードの無効化

デフォルトでは、ドラフトモードセッションはブラウザーが閉じられたときに終了します。

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

app/draft/route.ts

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} を渡す必要があります。

ドラフトモードが有効かどうかを確認しています

サーバーコンポーネントでドラフトモードが有効かどうかは、isEnabledプロパティで確認できます。