draftMode

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

app/page.ts

import { draftMode } from 'next/headers'
 
export default async function Page() {
  const { isEnabled } = await draftMode()
}

app/page.js

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 时都会生成一个新的 bypass cookie 值。这确保了 bypass cookie 不会被猜到。
要在本地通过 HTTP 测试草稿模式，你的浏览器需要允许第三方 cookie 和本地存储访问。

示例

启用草稿模式

要启用草稿模式，创建一个新的路由处理程序并调用 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')
}

app/draft/route.js

import { draftMode } from 'next/headers'
 
export async function GET(request) {
  const draft = await draftMode()
  draft().enable()
  return new Response('Draft mode is enabled')
}

禁用草稿模式

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

要手动禁用草稿模式，在你的路由处理程序中调用 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')
}

app/draft/route.js

import { draftMode } from 'next/headers'
 
export async function GET(request) {
  const draft = await draftMode()
  draft().disable()
  return new Response('Draft mode is disabled')
}

然后，发送请求来调用路由处理程序。如果使用 <Link> 组件调用路由，你必须传递 prefetch={false} 以防止在预取时意外删除 cookie。

检查草稿模式是否启用

你可以在服务器组件中使用 isEnabled 属性检查草稿模式是否启用：