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`) 在路由处理器中启用草稿模式。
`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('已启用草稿模式')
}

禁用草稿模式

默认情况下，草稿模式会话会在浏览器关闭时结束。

要手动禁用草稿模式，在您的路由处理器 (Route Handler) 中调用 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`。

草稿模式 (Draft Mode)

Next.js 提供了草稿模式 (Draft Mode) 用于在静态页面和动态页面之间切换。您可以在此了解如何与 App Router 配合使用。

参考

须知

示例

启用草稿模式

禁用草稿模式

检查是否启用了草稿模式

版本历史

草稿模式 (Draft Mode)

On this page