草稿模式

**草稿模式** 允许你在 Next.js 应用中预览来自你的无头 CMS 的草稿内容。这对于在构建时生成的静态页面非常有用，因为它允许你切换到动态渲染并查看草稿更改，而无需重新构建整个网站。

本页面介绍了如何启用和使用草稿模式。

步骤 1：创建路由处理程序

创建一个路由处理程序。它可以具有任何名称，例如 app/api/draft/route.ts。

app/api/draft/route.ts

export async function GET(request: Request) {
  return new Response('')
}

然后，导入draftMode 函数并调用 enable() 方法。

app/api/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')
}

这将设置一个**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 指定的路径。

app/api/draft/route.ts

import { draftMode } from 'next/headers'
import { redirect } from 'next/navigation'
 
export async function GET(request: Request) {
  // Parse query string parameters
  const { searchParams } = new URL(request.url)
  const secret = searchParams.get('secret')
  const slug = searchParams.get('slug')
 
  // Check the secret and next parameters
  // This secret should only be known to this Route Handler and the CMS
  if (secret !== 'MY_SECRET_TOKEN' || !slug) {
    return new Response('Invalid token', { status: 401 })
  }
 
  // Fetch the headless CMS to check if the provided `slug` exists
  // getPostBySlug would implement the required fetching logic to the headless CMS
  const post = await getPostBySlug(slug)
 
  // If the slug doesn't exist prevent draft mode from being enabled
  if (!post) {
    return new Response('Invalid slug', { status: 401 })
  }
 
  // Enable Draft Mode by setting the cookie
  const draft = await draftMode()
  draft.enable()
 
  // Redirect to the path from the fetched post
  // We don't redirect to searchParams.slug as that might lead to open redirect vulnerabilities
  redirect(post.slug)
}

如果成功，则浏览器将重定向到要查看的路径，并带有草稿模式 cookie。

步骤 3：预览草稿内容

下一步是更新你的页面以检查 draftMode().isEnabled 的值。

如果你请求一个已设置 cookie 的页面，则数据将在**请求时**（而不是在构建时）获取。

此外，isEnabled 的值将为 true。

app/page.tsx

// page that fetches data
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 或手动使用 URL 访问草稿路由处理程序（使用 secret 和 slug），你现在应该能够看到草稿内容。并且，如果你更新草稿而不发布，你应该能够查看草稿。

草稿模式

步骤 1：创建路由处理程序

步骤 2：从你的无头 CMS 访问路由处理程序

步骤 3：预览草稿内容

后续步骤

草稿模式