如何在Next.js的build文件夹中导出.html格式文件？

为啥会这样？ #

Next.js 13之后的App Router模式，默认静态导出时会给客户端组件生成.js文件，而非传统的静态HTML。如果你的页面都是静态内容，就得调整配置强制生成HTML文件。

怎么解决？ #

1. 先确认路由模式 #

先搞清楚你项目用的是哪种路由模式：

• 旧版Pages Router（pages目录）：导出默认应该生成.html，要是出.js大概率是配置出错了
• 新版App Router（app目录）：需要额外配置才能生成静态HTML

2. 修改next.config.js配置 #

在项目根目录的next.config.js里添加以下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export', // 明确指定静态导出模式
  incrementalStaticRegeneration: false, // 禁用增量静态再生，确保生成完整HTML
}

module.exports = nextConfig

注：如果是Next.js 13.0-13.1早期版本，还需要额外添加experimental.appDir: true，13.2及之后版本无需此配置

3. 给App Router页面加静态渲染标记 #

如果用的是App Router，在页面组件文件顶部加一行代码，告诉Next.js这个页面是纯静态的，必须生成HTML：

// app/page.js
export const dynamic = 'force-static'

export default function Home() {
  return <div>Hello World</div>
}

4. 重新执行导出操作 #

先删掉旧的.next和out文件夹，再重新运行构建命令：

npm run build

这时候out目录里就应该能看到对应的.html文件了。

额外提醒 #

• 要是页面包含动态内容（比如需要发请求、依赖用户登录状态），Next.js会生成.js文件在客户端渲染，这种情况要生成HTML的话，得确保内容能在构建阶段完成预渲染。
• 要是页面用了use client指令，又想生成HTML，可以把静态内容单独抽离到服务器组件中，客户端组件只负责处理交互逻辑。

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