draftMode
draftMode
は 非同期 関数で、Draft Mode を有効化および無効化し、server component で Draft Mode が有効かどうかを確認することができます。
- TypeScript
- JavaScript
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()
}
リファレンス
以下のメソッドとプロパティが利用可能です:
メソッド | 説明 |
---|---|
isEnabled | Draft Mode が有効かどうかを示すブール値です。 |
enable() | cookie (__prerender_bypass ) を設定することで、route handler で Draft Mode を有効にします。 |
disable() | cookie を削除することで、route handler で Draft Mode を無効にします。 |
知っておくと良いこと
draftMode
は 非同期 関数で、promise を返します。async/await
または React のuse
関数を使用する必要があります。- バージョン 14 以前では、
draftMode
は同期関数でした。後方互換性を考慮して、Next.js 15 でも同期的にアクセスできますが、この動作は将来的に廃止される予定です。
- バージョン 14 以前では、
next build
を実行するたびに、新しいバイパス cookie 値が生成されます。これにより、バイパス cookie が推測されることはありません。- HTTP 経由でローカルで Draft Mode をテストするには、ブラウザがサードパーティの cookie とローカルストレージへのアクセスを許可する必要があります。
例
Draft Mode を有効にする
Draft Mode を有効にするには、新しい route handler を作成し、enable()
メソッドを呼び出します:
- TypeScript
- JavaScript
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')
}
app/draft/route.js
import { draftMode } from 'next/headers'
export async function GET(request) {
const draft = await draftMode()
draft.enable()
return new Response('Draft mode is enabled')
}
Draft Mode を無効にする
デフォルトでは、Draft Mode セッションはブラウザを閉じると終了します。
Draft Mode を手動で無効にするには、route handler で disable()
メソッドを呼び出します:
- TypeScript
- JavaScript
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')
}
app/draft/route.js
import { draftMode } from 'next/headers'
export async function GET(request) {
const draft = await draftMode()
draft.disable()
return new Response('Draft mode is disabled')
}
その後、route handler を呼び出すリクエストを送信します。<Link>
コンポーネント を使用してルートを呼び出す場合、prefetch 時に誤って cookie を削除しないようにするために prefetch={false}
を渡す必要があります。
Draft Mode が有効かどうかを確認する
isEnabled
プロパティを使用して、server component で Draft Mode が有効かどうかを確認できます:
- TypeScript
- JavaScript
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-RC | draftMode は非同期関数になりました。codemod が利用可能です。 |
v13.4.0 | draftMode が導入されました。 |