NextJS中如何让next export生成about/index.html而非about.html？

要让NextJS执行next export时生成about/index.html而非about.html，可以通过配置文件开启尾随斜杠选项，具体分两种路由模式处理：

Pages Router 模式（NextJS 12及以下，或13+仍使用pages目录） #

1. 项目根目录下创建或编辑next.config.js文件，添加exportTrailingSlash: true配置：

module.exports = {
  exportTrailingSlash: true,
};

2. 保持页面结构：在pages目录下新建about文件夹，将页面文件命名为index.tsx放入其中（即pages/about/index.tsx）。
3. 重新执行next build && next export命令，导出目录中就会生成about子目录，里面包含index.html文件。

App Router 模式（NextJS 13+使用app目录） #

1. 编辑next.config.js文件，配置output: 'export'和trailingSlash: true：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
};

module.exports = nextConfig;

2. 在app目录下创建about文件夹，放入page.tsx文件（即app/about/page.tsx）。
3. 执行next build命令（App Router下next export已整合到next build中），导出产物里就会生成about/index.html结构。

注意事项 #

• 开启该配置后，所有页面都会生成对应目录下的index.html，而非单独的.html文件。
• 如果之前有遗留的about.tsx文件，建议删除，避免导出冲突。

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