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