Skip to main content

draftMode

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

¥draftMode is an async function allows you to enable and disable Draft Mode, as well as check if Draft Mode is enabled in a 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()
}

参考​

¥Reference

以下方法和属性可用：

¥The following methods and properties are available:

方法描述
isEnabled指示是否启用草稿模式的布尔值。
enable()通过设置 cookie（__prerender_bypass）在路由处理程序中启用草稿模式。
disable()通过删除 cookie 禁用路由处理程序中的草稿模式。

很高兴知道​

¥Good to know

  • draftMode 是一个返回 promise 的异步函数。你必须使用 async/await 或 React 的 use 函数。

    ¥draftMode is an asynchronous function that returns a promise. You must use async/await or React's use function.

    • 在版本 14 及更早版本中，draftMode 是一个同步函数。为了帮助实现向后兼容，你仍然可以在 Next.js 15 中同步访问它，但此行为将来会被弃用。

      ¥In version 14 and earlier, draftMode was a synchronous function. To help with backwards compatability, you can still access it synchronously in Next.js 15, but this behavior will be deprecated in the future.

  • 每次运行 next build 时都会生成一个新的旁路 cookie 值。这确保了旁路 cookie 无法被猜测。

    ¥A new bypass cookie value will be generated each time you run next build. This ensures that the bypass cookie can’t be guessed.

  • 要通过 HTTP 在本地测试草稿模式，你的浏览器需要允许第三方 cookie 和本地存储访问。

    ¥To test Draft Mode locally over HTTP, your browser will need to allow third-party cookies and local storage access.

示例​

¥Examples

启用草稿模式​

¥Enabling Draft Mode

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

¥To enable Draft Mode, create a new Route Handler and call the enable() method:

import { draftMode } from 'next/headers'

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

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

禁用草稿模式​

¥Disabling Draft Mode

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

¥By default, the Draft Mode session ends when the browser is closed.

要手动禁用草稿模式，请在 路由处理程序 中调用 disable() 方法：

¥To disable Draft Mode manually, call the disable() method in your Route Handler:

import { draftMode } from 'next/headers'

export async function GET(request: Request) {
  const draft = await draftMode()
  draft().disable()
  return new Response('Draft mode is disabled')
}
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。

¥Then, send a request to invoke the Route Handler. If calling the route using the <Link> component, you must pass prefetch={false} to prevent accidentally deleting the cookie on prefetch.

检查草稿模式是否已启用​

¥Checking if Draft Mode is enabled

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

¥You can check if Draft Mode is enabled in a Server Component with the isEnabled property:

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

版本历史​

¥Version History

版本变化
v15.0.0-RCdraftMode 现在是一个异步函数。codemod 可用。
v13.4.0draftMode 推出。