draftMode
draftModeは、Draft Modeを有効化・無効化したり、Server ComponentでDraft Modeが有効になっているかどうかを確認したりできるasync関数です。
app/page.ts
TypeScript
import { draftMode } from 'next/headers'
export default async function Page() {
const { isEnabled } = await draftMode()
}リファレンス
以下のメソッドとプロパティが利用可能です：
| メソッド | 説明 |
|---|---|
isEnabled | Draft Modeが有効になっているかどうかを示すブール値です。 |
enable() | Route Handlerでクッキー（__prerender_bypass）を設定してDraft Modeを有効にします。 |
disable() | Route Handlerでクッキーを削除してDraft Modeを無効にします。 |
補足
draftModeは非同期関数で、Promiseを返します。async/awaitまたはReactのuse関数を使用する必要があります。- バージョン14以前では、
draftModeは同期関数でした。下位互換性をサポートするため、Next.js 15でも同期的にアクセスすることはできますが、この動作は将来非推奨になります。 next buildを実行するたびに、新しいバイパスクッキー値が生成されます。これにより、バイパスクッキーが予測されることはありません。- HTTPでローカルにDraft Modeをテストするには、ブラウザがサードパーティクッキーとローカルストレージアクセスを許可する必要があります。
- バージョン14以前では、
例
Draft Modeを有効にする
Draft Modeを有効にするには、新しいRoute Handlerを作成してenable()メソッドを呼び出します：
app/draft/route.ts
TypeScript
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
TypeScript
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>コンポーネントを使用してルートを呼び出す場合は、プリフェッチ時にクッキーが誤って削除されるのを防ぐためにprefetch={false}を渡す必要があります。
Draft Modeが有効になっているかどうかを確認する
Server ComponentでisEnabledプロパティを使用してDraft Modeが有効になっているかどうかを確認できます：
app/page.ts
TypeScript
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が導入されました。 |
次のステップ
このステップバイステップガイドを使用してDraft Modeの使用方法を学びます。