Next.js静态站点如何在pages目录下创建子目录对应路由页面？

核心生效步骤 #

• 第一步：确认pages目录结构，二选一即可：
  • 在pages目录下新建technology.js文件
  • 在pages目录下新建technology文件夹，内部新建index.js文件
• 第二步：修正next.config.js配置
  之前配置失效的核心问题是exportPathMap的路径规则书写错误，不需要手动加.html后缀，参考配置如下：

  module.exports = {
    trailingSlash: true,
    exportPathMap: async function () {
      return {
        '/': { page: '/' },
        '/technology/': { page: '/technology' },
      };
    }
  }
  

• 第三步：执行正确的静态导出命令
  项目构建时需要执行next export指令，执行完成后生成的out目录下会自动生成technology/index.html文件，直接部署out目录的内容到静态服务器即可，访问/technology/路径会自动加载对应文件。

验证方式 #

导出完成后打开out目录，可看到已经生成technology子目录，内部存在index.html即表示配置生效。

内容的提问来源于stack exchange，提问作者shackleton