draftMode

draftMode 是一個非同步函式，可讓您啟用或停用草稿模式 (Draft Mode)，並檢查伺服器元件 (Server Component) 中是否啟用了草稿模式。

import { draftMode } from 'next/headers'

export default async function Page() {
  const { isEnabled } = await draftMode()
}

import { draftMode } from 'next/headers'

export default async function Page() {
  const { isEnabled } = await draftMode()
}

參考

以下方法和屬性可供使用：

方法	說明
`isEnabled`	一個布林值，表示草稿模式是否已啟用。
`enable()`	透過設定 cookie (`__prerender_bypass`) 在路由處理器 (Route Handler) 中啟用草稿模式。
`disable()`	透過刪除 cookie 在路由處理器中停用草稿模式。

須知事項

draftMode 是一個非同步函式，會回傳一個 promise。您必須使用 async/await 或 React 的 use 函式。
- 在版本 14 及更早版本中，draftMode 是一個同步函式。為了向後相容，在 Next.js 15 中您仍可以同步存取它，但此行為將在未來被棄用。
每次執行 next build 時都會產生一個新的繞過 cookie 值。這確保了繞過 cookie 無法被猜測。
要在 HTTP 上本地測試草稿模式，您的瀏覽器需要允許第三方 cookie 和本地儲存存取。

範例

啟用草稿模式

要啟用草稿模式，請建立一個新的路由處理器 (Route Handler) 並呼叫 enable() 方法：

import { draftMode } from 'next/headers'

export async function GET(request: Request) {
  const draft = await draftMode()
  draft.enable()
  return new Response('草稿模式已啟用')
}

import { draftMode } from 'next/headers'

export async function GET(request) {
  const draft = await draftMode()
  draft.enable()
  return new Response('草稿模式已啟用')
}

停用草稿模式

預設情況下，草稿模式工作階段會在瀏覽器關閉時結束。

要手動停用草稿模式，請在您的路由處理器中呼叫 disable() 方法：

import { draftMode } from 'next/headers'

export async function GET(request: Request) {
  const draft = await draftMode()
  draft.disable()
  return new Response('草稿模式已停用')
}

import { draftMode } from 'next/headers'

export async function GET(request) {
  const draft = await draftMode()
  draft.disable()
  return new Response('草稿模式已停用')
}

然後，發送請求以呼叫路由處理器。如果使用 <Link> 元件呼叫路由，您必須傳遞 prefetch={false} 以防止在預取時意外刪除 cookie。

檢查草稿模式是否啟用

您可以使用 isEnabled 屬性在伺服器元件中檢查草稿模式是否啟用：

import { draftMode } from 'next/headers'

export default async function Page() {
  const { isEnabled } = await draftMode()
  return (
    <main>
      <h1>我的部落格文章</h1>
      <p>草稿模式目前為 {isEnabled ? '已啟用' : '已停用'}</p>
    </main>
  )
}

import { draftMode } from 'next/headers'

export default async function Page() {
  const { isEnabled } = await draftMode()
  return (
    <main>
      <h1>我的部落格文章</h1>
      <p>草稿模式目前為 {isEnabled ? '已啟用' : '已停用'}</p>
    </main>
  )
}

版本歷史

版本	變更
`v15.0.0-RC`	`draftMode` 現在是一個非同步函式。提供了一個代碼修改工具 (codemod)。
`v13.4.0`	引入 `draftMode`。

草稿模式

Next.js 提供草稿模式功能，可在靜態與動態頁面間切換。您可在此了解如何搭配應用程式路由 (App Router) 使用。

參考