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

Jon*_*uza 8 reactjs server-side-rendering next.js

我正在从事 NextJS 项目,我们计划按照此处所述进行页面的静态 HTML 导出。

在这里,是我想要工作的场景:

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

关于/产品1

关于/产品2

关于/产品3

在一天中,product1 的可用性发生了变化。有没有办法只对 about/product1 进行静态导出,而无需触及之前导出的其他页面。

Lua*_*ual 3

根据您的示例,您应该执行以下步骤:

步骤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' },
    }
  },
}
Run Code Online (Sandbox Code Playgroud)

第2步

构建和导出确保设置不同的输出文件夹。例如,如果您的构建和导出脚本被调用bexport,并且您想将新的导出文件夹命名为“out2”,您将使用:

yarn bexport -o out2
Run Code Online (Sandbox Code Playgroud)

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

步骤3

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

mv out2/about/product1.html out/about/
Run Code Online (Sandbox Code Playgroud)