draftMode
draftMode 是一個非同步函式，可讓您啟用和停用草稿模式，以及在 伺服器元件 中檢查草稿模式是否已啟用。
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 | 一個布林值，指示草稿模式是否已啟用。 |
enable() | 透過設定 Cookie (__prerender_bypass) 在路由處理程式中啟用草稿模式。 |
disable() | 透過刪除 Cookie 在路由處理程式中停用草稿模式。 |
注意事項
draftMode是一個**非同步**函式，會回傳一個 promise。您必須使用async/await或 React 的use函式。- 在版本 14 以及更早的版本中，
draftMode是一個同步函式。為了向下相容，您仍然可以在 Next.js 15 中以同步方式存取它，但此行為將在未來版本中被棄用。
- 在版本 14 以及更早的版本中，
- 每次執行
next build時，都會產生一個新的 bypass cookie 值。這確保了 bypass cookie 無法被猜測。 - 要在本機透過 HTTP 測試草稿模式，您的瀏覽器需要允許第三方 Cookie 和本地儲存空間的存取。
範例
啟用草稿模式 並呼叫 enable() 方法
app/draft/route.tsimport { 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.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> 元件 呼叫路由，您必須傳遞 prefetch={false} 以防止在預取時意外刪除 cookie。
檢查草稿模式是否已啟用
您可以使用 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>
)
}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 現在是一個非同步函式。提供了一個 程式碼修改器。 |
v13.4.0 | 引進 draftMode。 |
這有幫助嗎？