跳到主要内容

draftMode

draftMode 是一个异步函数，允许你启用和禁用 草稿模式，以及在 服务端组件 中检查草稿模式是否已启用。

app/page.ts
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 测试草稿模式，你的浏览器需要允许第三方 cookies 和本地存储访问。

示例​

启用草稿模式​

要启用草稿模式，创建一个新的 路由处理器 并调用 enable() 方法：

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>
  )
}

版本历史​

版本更改
v15.0.0-RCdraftMode 现在是一个异步函数。提供了 codemod。
v13.4.0引入了 draftMode。
最后于 更新