How to preview content with Draft Mode in Next.js
Draft Mode 允许你在 Next.js 应用程序中预览来自无头 CMS 的草稿内容。这对于在构建时生成的静态页面很有用，因为它允许你切换到动态渲染并查看草稿更改，而无需重新构建整个网站。
本页将指导你如何启用和使用 Draft Mode。
步骤 1：创建路由处理程序
创建一个路由处理程序。它可以有任何名称，例如，app/api/draft/route.ts。
export async function GET(request: Request) {
return new Response('')
}然后，导入 draftMode 函数并调用 enable() 方法。
import { draftMode } from 'next/headers'
export async function GET(request: Request) {
const draft = await draftMode()
draft.enable()
return new Response('Draft mode is enabled')
}这将设置一个 cookie 来启用草稿模式。包含此 cookie 的后续请求将触发草稿模式并更改静态生成页面的行为。
你可以通过访问 /api/draft 并查看浏览器的开发者工具来手动测试这一点。注意带有名为 __prerender_bypass 的 cookie 的 Set-Cookie 响应头。
步骤 2：从你的无头 CMS 访问路由处理程序
这些步骤假设你使用的无头 CMS 支持设置自定义草稿 URL。如果不支持，你仍然可以使用此方法来保护你的草稿 URL，但你需要手动构建和访问草稿 URL。具体步骤将取决于你使用的无头 CMS。
要从你的无头 CMS 安全地访问路由处理程序：
- 使用你选择的令牌生成器创建一个秘密令牌字符串。此秘密将只有你的 Next.js 应用和你的无头 CMS 知道。
- 如果你的无头 CMS 支持设置自定义草稿 URL，请指定一个草稿 URL（假设你的路由处理程序位于
app/api/draft/route.ts）。例如：
https://<your-site>/api/draft?secret=<token>&slug=<path>
<your-site>应该是你的部署域名。<token>应该替换为你生成的秘密令牌。<path>应该是你想要查看的页面路径。如果你想查看/posts/one，那么你应该使用&slug=/posts/one。你的无头 CMS 可能允许你在草稿 URL 中包含一个变量，以便根据 CMS 的数据动态设置
<path>，如：&slug=/posts/{entry.fields.slug}
- 在你的路由处理程序中，检查秘密是否匹配以及
slug参数是否存在（如果不存在，请求应该失败），调用draftMode.enable()来设置 cookie。然后，将浏览器重定向到slug指定的路径：
import { draftMode } from 'next/headers'
import { redirect } from 'next/navigation'
export async function GET(request: Request) {
// 解析查询字符串参数
const { searchParams } = new URL(request.url)
const secret = searchParams.get('secret')
const slug = searchParams.get('slug')
// 检查 secret 和 next 参数
// 此秘密应该只有此路由处理程序和 CMS 知道
if (secret !== 'MY_SECRET_TOKEN' || !slug) {
return new Response('Invalid token', { status: 401 })
}
// 访问无头 CMS 以检查提供的 `slug` 是否存在
// getPostBySlug 将实现所需的无头 CMS 获取逻辑
const post = await getPostBySlug(slug)
// 如果 slug 不存在，阻止启用草稿模式
if (!post) {
return new Response('Invalid slug', { status: 401 })
}
// 通过设置 cookie 启用草稿模式
const draft = await draftMode()
draft.enable()
// 重定向到从获取的文章中的路径
// 我们不重定向到 searchParams.slug，因为这可能导致开放重定向漏洞
redirect(post.slug)
}如果成功，浏览器将被重定向到你想要查看的带有草稿模式 cookie 的路径。
步骤 3：预览草稿内容
下一步是更新你的页面以检查 draftMode().isEnabled 的值。
如果你请求一个已设置 cookie 的页面，那么数据将在请求时获取（而不是在构建时）。
此外，isEnabled 的值将为 true。
// 获取数据的页面
import { draftMode } from 'next/headers'
async function getData() {
const { isEnabled } = await draftMode()
const url = isEnabled
? 'https://draft.example.com'
: 'https://production.example.com'
const res = await fetch(url)
return res.json()
}
export default async function Page() {
const { title, desc } = await getData()
return (
<main>
<h1>{title}</h1>
<p>{desc}</p>
</main>
)
}如果你从你的无头 CMS 访问草稿路由处理程序（带有 secret 和 slug）或使用 URL 手动访问，你现在应该能够看到草稿内容。并且，如果你更新草稿而不发布，你应该能够查看草稿。