メインコンテンツまでスキップ

draftMode

draftMode は、Draft Modeを有効または無効にし、server componentで Draft Mode が有効かどうかを確認できる非同期の関数です。

app/page.ts
import { draftMode } from 'next/headers'

export default async function Page() {
const { isEnabled } = await draftMode()
}

リファレンス

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

メソッド説明
isEnabledDraft Mode が有効かどうかを示すブール値です
enable()cookie(__prerender_bypass)を設定することで Route Handler で Draft Mode を有効にします
disable()cookie を削除することで Route Handler で Draft Mode を無効にします

参考情報

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

Draft Mode の有効化

Draft Mode を有効にするには、新しいroute handlerを作成し、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')
}

Draft Mode の無効化

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

Draft Mode を手動で無効にするには、Route Handler内で 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')
}

その後、Route Handler を呼び出すリクエストを送信します。<Link> componentを使ってルートを呼び出す場合は、prefetch={false}を渡し、prefetch 時に誤って cookie を削除しないようにします。

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

isEnabled プロパティを使用して、server component で Draft Mode が有効かどうかを確認できます:

app/page.ts
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-RCdraftMode は今や非同期関数です。 codemod が利用可能です
v13.4.0draftMode が導入されました