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

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()
}
app/page.js
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は、プロミスを返す非同期関数です。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が有効かどうかを確認する​

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>
  )
}
app/page.js
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が導入されました。