能否将Next.js 13项目静态导出为单个HTML文件？

针对Next.js 13.x.x版本静态导出单HTML文件的需求，有两种实用方案可选：

方案一：重构项目为单入口客户端路由（推荐） #

直接将所有页面逻辑整合到主入口，通过客户端组件切换内容，从根源上避免多HTML文件生成：

• 仅保留app/page.tsx作为唯一页面入口，其他原页面改为客户端组件（比如PageA.tsx、PageB.tsx）
• 在主page.tsx中引入这些组件，用状态或Next.js自带的useRouter控制页面切换
• 配置next.config.js开启静态导出

示例代码：

// app/page.tsx
'use client';
import { useState } from 'react';
import PageA from './components/PageA';
import PageB from './components/PageB';

export default function Home() {
  const [activePage, setActivePage] = useState('a');

  return (
    <div>
      <nav>
        <button onClick={() => setActivePage('a')}>页面A</button>
        <button onClick={() => setActivePage('b')}>页面B</button>
      </nav>
      {activePage === 'a' && <PageA />}
      {activePage === 'b' && <PageB />}
    </div>
  );
}

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

module.exports = nextConfig;

执行next build && next export后，out文件夹只会生成单个index.html，所有页面内容都打包在其中。

方案二：脚本合并已生成的多HTML文件（适合已有多页面项目） #

如果不想重构项目，可以先正常导出多HTML文件，再用脚本合并：

1. 先执行next build && next export生成out文件夹下的多页面文件
2. 编写Node.js脚本，提取所有页面的内容嵌入到index.html，通过客户端JS控制显示/隐藏
3. 处理资源路径，确保合并后CSS、图片等资源引用正常

示例脚本思路：

const fs = require('fs');
const path = require('path');

const outDir = path.join(__dirname, 'out');
const indexPath = path.join(outDir, 'index.html');
const pageAPath = path.join(outDir, 'page-a.html');

// 读取页面内容
let indexContent = fs.readFileSync(indexPath, 'utf8');
const pageAContent = fs.readFileSync(pageAPath, 'utf8');

// 提取目标页面的body内容
const pageABody = pageAContent.match(/<body>([\s\S]*?)<\/body>/)[1];

// 将页面内容插入主页面，添加切换逻辑
indexContent = indexContent.replace('</body>', `
  <div id="page-a" style="display:none">${pageABody}</div>
  <script>
    // 基于哈希的路由切换
    window.addEventListener('hashchange', () => {
      const hash = window.location.hash.slice(1);
      document.querySelectorAll('[id^="page-"]').forEach(el => el.style.display = 'none');
      document.getElementById('page-' + hash)?.style.display = 'block';
    });
    // 初始显示首页
    window.location.hash = '#home';
  </script>
</body>`);

// 更新主页面并删除多余文件
fs.writeFileSync(indexPath, indexContent);
fs.unlinkSync(pageAPath);

注意事项 #

• 单HTML文件会包含所有页面内容，初始加载体积会变大，需评估性能影响
• 客户端路由模式下，SEO友好性会受影响，若需SEO支持，需额外处理静态快照或预渲染逻辑
• 合并后要检查所有资源路径，避免出现404错误

内容的提问来源于stack exchange，提问作者Nguyễn Hiếu