时间戳

首页 > 解决方案 > 从 Next.js 中的 CMS 访问预览 api

content-management-system - 从 Next.js 中的 CMS 访问预览 api

问题描述

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

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

标签： content-management-systemnext.js

解决方案

据我所知，代理没有什么。根据我在 Sanity.io 中使用预览模式的经验，过程如下：

  1. 在 Next.js 端，您创建一个 API 路由，它可以 a) 在用户浏览器上设置一些启用预览模式的 cookie，b) 根据查询字符串将用户重定向到所需的页面。当Next.js 页面中的数据获取方法 ( getStaticProps, ) 看到启用该标志时，它们将绕过任何静态生成并在请求时而不是构建时呈现页面。getStaticPathspreview
https://yourdomain.com/api/preview
  1. 在 CMS 端，您根据视图中的文档构造预览 URL 查询字符串（并出于安全目的添加令牌字符串）。使用 Sanity，您可以使用插件来帮助您。
function resolvePreviewUrl(document) {
  return `https://yourdomain.com/api/preview?slug=${document.slug.current}&token=${process.env.PREVIEW_SECRET}`
}
  1. 然后在 CMS 端，您可以根据需要使用已解析的预览 URL。您可以创建一个按钮，单击该按钮，打开一个新的浏览器选项卡并将用户带到预览 API 路由，或者创建一个src指向预览 URL 的 iframe。

参考：

推荐阅读