NextJS 页面的选择性静态 html 导出

Question

我正在开发一个 NextJS 项目，我们计划按照 here.

所述静态 HTML 导出页面

这里是我想要的场景：

假设我们已经静态生成了以下页面。

about/product1

about/product2

about/product3

在一天中，产品 1 的可用性发生了变化。有没有办法只静态导出 about/product1，而不触及之前导出的其他页面。

Answer 1

根据您的示例，您应该遵循以下步骤：

步骤 1

创建配置文件以设置自定义 exportMap:

// next.config.js
module.exports = {
  exportPathMap: async function(
    defaultPathMap,
    { dev, dir, outDir, distDir, buildId }
  ) {
    return {
      // only include the pages that you want to export
      'about/product1': { page: 'about/product1' },
    }
  },
}

第 2 步

构建并导出确保设置不同的输出文件夹。例如，如果您的构建和导出脚本名为 bexport，并且您想将新的导出文件夹命名为 "out2"，您可以使用：

yarn bexport -o out2

警告：如果您不指定不同的输出文件夹，只有about/product1会被重新导出到原始输出文件夹，但about/product2和about/product3 将被删除，因为它们未包含在当前 exportMap 设置中。

步骤 3

将重新导出的文件移动到包含所有导出页面的文件夹以覆盖以前版本的 about/product1:

mv out2/about/product1.html out/about/

Answer 2

处理这种情况的正确方法是使用

https://vercel.com/docs/concepts/next.js/incremental-static-regeneration

NextJS 页面的选择性静态 html 导出

Selective static html export of pages in NextJS

reactjs

server-side-rendering

next.js

步骤 1

第 2 步

步骤 3