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

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 を無効にします

Good to know​

  • 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> コンポーネントを使用してルートを呼び出す場合、プリフェッチ時に誤って cookie を削除しないように prefetch={false} を渡す必要があります。

Draft Mode が有効かどうかを確認する​

Server Component で isEnabled プロパティを使用して、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 が導入されました。