Next.Js 使用无头 CMS 资产生成静态站点

Posted 2023-02-19

【中文标题】Next.Js 使用无头 CMS 资产生成静态站点

【英文标题】：Next.Js static site generation with headless CMS assets

【发布时间】：2021-01-20 10:00:00

【问题描述】：

我正在使用 WordPress 作为我网站的无头 CMS，我希望从我的 Next.js 项目中生成一个静态网站。我想要实现的是能够将图像和数据从wp-content文件夹复制到我的next.js out文件夹，将构建的html文件中的url（http://mywpsite.com/wp-content/uploads/2020/10/1.jpg等）更改为/public /wp-content/uploads/2020/10/1.jpg.

基本上，我想以一种同时托管与该项目相关联的文件的方式导出我的 Next 项目。我也不想从无头 CMS 中托管我的图像资产，而只是从输出的文件夹中托管。

我的石匠人的想法是手动下载该文件夹并对这些文件进行查找/替换。不知道这是否可行，但我很好奇是否有人考虑过我目前遇到的相同问题并提出了解决方案或知道我应该朝哪个方向发展？

【问题讨论】：

似乎没有办法做到这一点，我认为你必须接受你的石器时代的想法，或者可能转向 GatsbyJS

使用 github.com/wp-graphql/wp-graphql 来检索图片 url 而不是下载它们，在此处阅读更多信息：medium.com/kata-engineering/…

【参考方案1】：

我遇到了同样的问题，但不是 WordPress。

我的问题：next.js 项目需要显示来自 Goodreads 的图书照片、来自 Google 个人资料的用户图片。

我的解决方案：我不想开发自己的解决方案来解决它，因为潜在的风险可能会花费我很多时间，因此我使用 Cloudinary 来管理图像：

它有一个免费计划，可让您存储高达 11Gb 我为自动上传映射创建了规则，允许我从 Google、Goodread 即时下载图像到我的 Cloudinary。您可以进行配置以确保 Cloudinary 只为您的 WordPress 中的文件存储一个文件，而不是每次您的用户再次访问该文件时下载和生成新文件。您可以从他们的文档中查看更多信息https://cloudinary.com/documentation/fetch_remote_images#auto_upload_remote_resources 我将 Cloudinary URL 存储到我的数据库中

关于来自 Google 的照片，Cloudinary 上传 URL 看起来像 https://res.cloudinary.com/$cloudinaryStorageName/image/upload/user-picture/$googlePictureId

对我来说效果很好。