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

时间:2020-10-05 14:06:58

标签: reactjs wordpress next.js static-site

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

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

我的死角男子的想法是手动下载该文件夹,并对这些文件进行查找/替换。不知道这是否行得通,但我很好奇是否有人想到了我当前遇到的相同问题并提出了解决方案,或者知道我应该朝哪个方向发展?

1 个答案:

答案 0 :(得分:0)

我也遇到了同样的问题,但是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上传网址看起来像https://res.cloudinary.com/${cloudinaryStorageName}/image/upload/user-picture/${googlePictureId}

对我来说效果很好。