draftMode

draftMode 是一个异步函数，允许你启用和禁用 Draft Mode，以及在 Server Component 中检查 Draft Mode 是否已启用。

app/page.ts

TypeScript

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 中同步访问它，但此行为将在未来被弃用。
每次运行 next build 时都会生成一个新的绕过 cookie 值。这确保了绕过 cookie 无法被猜测。
要通过 HTTP 在本地测试 Draft Mode，你的浏览器需要允许第三方 cookie 和本地存储访问。

示例

启用 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} 以防止在预取时意外删除 cookie。

检查 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`。

draftMode

参考

值得注意的是

示例

启用 Draft Mode

禁用 Draft Mode

检查 Draft Mode 是否已启用

版本历史

下一步

Draft Mode