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 测试草稿模式，您的浏览器需要允许第三方 Cookie 和本地存储访问。

示例

启用草稿模式

要启用草稿模式，请创建一个新的路由处理器并调用 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-RC`	`draftMode` 现在是一个异步函数。 codemod 可用。
`v13.4.0`	引入了 `draftMode`。

draftMode

参考

须知

示例

启用草稿模式

禁用草稿模式

检查草稿模式是否已启用

版本历史

后续步骤

草稿模式