使用Next.js导出静态HTML时遇CSS/JS失效问题

排查与修复步骤 #

1. 配置Next.js输出模式与基础路径 #

如果使用Next.js 13及以上版本，需要在next.config.js中显式声明静态导出模式，同时确保资源路径正确：

module.exports = {
  output: 'export', // 明确指定为静态导出模式
  basePath: '', // 部署在根目录则留空，子目录需填写对应路径如'/my-project'
  assetPrefix: '',
}

2. 修正构建命令 #

确保build命令匹配Next.js版本要求，新版本无需单独执行next export，直接用next build即可生成静态文件：

"scripts": {
  "build": "next build"
}

若需保留旧命令格式，可添加基础路径参数：

"scripts": {
  "build": "next build --base-path '' && next export"
}

3. 检查资源引用路径 #

打开out文件夹内的HTML文件，查看CSS/JS的引用路径是否为相对路径（如./_next/static/css/xxx.css）。如果是绝对路径（/_next/...），本地访问时会因file://协议限制无法加载资源，需通过上述配置修正。

4. 清理缓存后重新构建 #

缓存可能导致资源生成异常，执行以下命令重置后再构建：

rm -rf .next out
npm run build

5. 正确访问静态文件 #

不要直接双击打开HTML文件（浏览器file://协议会限制跨资源加载），使用Live Server时需将服务器根目录设置为out文件夹——比如在VS Code中右键out文件夹，选择「Open with Live Server」。

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