草稿模式 | DevRefinery

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

tsx

import { draftMode } from "next/headers";

export default async function Page() {
    const { isEnabled } = await draftMode();
}

jsx

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() 方法：

tsx

import { draftMode } from "next/headers";

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

javascript

import { draftMode } from "next/headers";

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

禁用草稿模式

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

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

tsx

import { draftMode } from "next/headers";

export async function GET(request: Request) {
    const draft = await draftMode();
    draft.disable();
    return new Response("Draft mode is disabled");
}

javascript

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 属性在服务端组件中检查草稿模式是否启用：

tsx

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

jsx

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 是一个异步函数，允许您启用和禁用草稿模式，以及检查服务端组件中草稿模式是否启用。

tsx

import { draftMode } from "next/headers";

export default async function Page() {
    const { isEnabled } = await draftMode();
}

jsx

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() 方法：

tsx

import { draftMode } from "next/headers";

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

javascript

import { draftMode } from "next/headers";

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

禁用草稿模式

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

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

tsx

import { draftMode } from "next/headers";

export async function GET(request: Request) {
    const draft = await draftMode();
    draft.disable();
    return new Response("Draft mode is disabled");
}

javascript

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 属性在服务端组件中检查草稿模式是否启用：

tsx

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

jsx

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`。

文档导航

参考

须知

示例

启用草稿模式

禁用草稿模式

检查草稿模式是否启用

版本历史

参考

须知

示例

启用草稿模式

禁用草稿模式

检查草稿模式是否启用

版本历史