跳到主要内容

如何在 Next.js 中使用草稿模式预览内容

草稿模式允许你在 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('草稿模式已启用')
}

这将设置一个 cookie 来启用草稿模式。包含此 cookie 的后续请求将触发草稿模式并改变静态生成页面的行为。

你可以通过访问 /api/draft 并查看浏览器的开发者工具来手动测试此功能。注意带有名为 __prerender_bypass 的 cookie 的 Set-Cookie 响应头。

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

这些步骤假设你使用的无头 CMS 支持设置自定义草稿 URL。如果不支持，你仍然可以使用此方法来保护你的草稿 URL，但你需要手动构建和访问草稿 URL。具体步骤将根据你使用的无头 CMS 而有所不同。

要从你的无头 CMS 安全地访问路由处理器：

  1. 使用你选择的令牌生成器创建一个秘密令牌字符串。这个秘密只有你的 Next.js 应用程序和你的无头 CMS 知道。
  2. 如果你的无头 CMS 支持设置自定义草稿 URL，请指定一个草稿 URL（这假设你的路由处理器位于 app/api/draft/route.ts）。例如：
Terminal
https://<your-site>/api/draft?secret=<token>&slug=<path>
  • <your-site> 应该是你的部署域名。
  • <token> 应该替换为你生成的秘密令牌。
  • <path> 应该是你想要查看的页面的路径。如果你想查看 /posts/one，那么你应该使用 &slug=/posts/one。

你的无头 CMS 可能允许你在草稿 URL 中包含一个变量，这样 <path> 可以根据 CMS 的数据动态设置，如下所示：&slug=/posts/{entry.fields.slug}

  1. 在你的路由处理器中，检查秘密是否匹配以及 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) {
  // 解析查询字符串参数
  const { searchParams } = new URL(request.url)
  const secret = searchParams.get('secret')
  const slug = searchParams.get('slug')

  // 检查秘密和下一个参数
  // 这个秘密应该只有这个路由处理器和 CMS 知道
  if (secret !== 'MY_SECRET_TOKEN' || !slug) {
    return new Response('无效令牌', { status: 401 })
  }

  // 获取无头 CMS 以检查提供的 `slug` 是否存在
  // getPostBySlug 将实现对无头 CMS 的所需获取逻辑
  const post = await getPostBySlug(slug)

  // 如果 slug 不存在，阻止启用草稿模式
  if (!post) {
    return new Response('无效 slug', { status: 401 })
  }

  // 通过设置 cookie 启用草稿模式
  const draft = await draftMode()
  draft.enable()

  // 重定向到从获取的帖子中的路径
  // 我们不重定向到 searchParams.slug，因为这可能导致开放重定向漏洞
  redirect(post.slug)
}

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

步骤 3：预览草稿内容​

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

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

此外，isEnabled 的值将为 true。

app/page.tsx
// 获取数据的页面
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），你现在应该能够看到草稿内容。而且，如果你在不发布的情况下更新草稿，你应该能够查看草稿。

最后于 更新