从 Next.js 中的 CMS 访问预览 api

Question

我在 next.js 中阅读了有关预览模式的信息，并且阅读了有关手动或从 CMS 访问预览的部分 api。我不知道如何通过无头 CMS 访问。

类似代理的东西吗？如果是，有人可以给我举个例子吗？

Answer 1

据我所知，没有关于代理的事情。根据我在 Sanity.io 中使用预览模式的经验，过程是这样的：

在 Next.js 端，您创建了一个 API 路由，它可以 a) 在用户的浏览器上设置一些启用预览模式的 cookie，以及 b) 根据查询字符串。当 Next.js 页面中的数据获取方法（getStaticProps、getStaticPaths）看到启用了 preview 标志时，它们将绕过任何静态生成并在请求时呈现页面而不是构建时间。

https://yourdomain.com/api/preview

在 CMS 端，您根据视图中的文档构造预览 URL 查询字符串（并添加一个标记字符串以确保安全）。使用 Sanity，您可以使用插件来帮助您。

function resolvePreviewUrl(document) {
  return `https://yourdomain.com/api/preview?slug=${document.slug.current}&token=${process.env.PREVIEW_SECRET}`
}

然后在 CMS 端，您可以根据需要使用已解析的预览 URL。您可以创建一个按钮，单击该按钮会打开一个新的浏览器选项卡并将用户带到预览 API 路由，或者创建一个 src 指向预览 URL 的 iframe。

参考文献：

从 Next.js 中的 CMS 访问预览 api

Access preview api from a CMS in Next.js

content-management-system

next.js