draftMode

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

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

リファレンス

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

メソッド	説明
`isEnabled`	ドラフトモードが有効になっているかどうかを示すブール値。
`enable()`	Cookie（`__prerender_bypass`）を設定することにより、ルートハンドラーでドラフトモードを有効にします。
`disable()`	Cookieを削除することにより、ルートハンドラーでドラフトモードを無効にします。

Good to know

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

例

ドラフトモードを有効にする

ドラフトモードを有効にするには、新しいルートハンドラーを作成し、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')
}

ドラフトモードを無効にする

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

手動でドラフトモードを無効にするには、ルートハンドラーで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>コンポーネントを使用してルートを呼び出す場合、プリフェッチ時のCookieの誤った削除を防ぐためにprefetch={false}を渡す必要があります。

ドラフトモードが有効になっているか確認する

isEnabledプロパティを使用して、サーバーコンポーネントでドラフトモードが有効になっているか確認できます。

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`は非同期関数になりました。Codemodが利用可能です。
`v13.4.0`	`draftMode`が導入されました。

次のステップ

このステップバイステップガイドでドラフトモードの使用方法を学びましょう。

ドラフトモード

Next.jsには、静的ページと動的ページを切り替えるためのドラフトモードがあります。App Routerでこれがどのように機能するかをここで学ぶことができます。