draftMode

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

app/page.ts

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を実行するたびに、新しいバイパスCookie値が生成されます。これにより、バイパスCookieが推測されるのを防ぎます。
HTTP経由でローカルでドラフトモードをテストするには、ブラウザでサードパーティのCookieとローカルストレージへのアクセスを許可する必要があります。

例

ドラフトモードの有効化

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

ドラフトモードが有効かどうかを確認する

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

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

次のステップ

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

ドラフトモード

Next.js には、静的ページと動的ページを切り替えるドラフトモードがあります。App Router での動作についてはこちらで学習できます。

役に立ちましたか？