Next.js导出静态HTML后CSS/JS路径错误，如何预配置？

方法1：使用Next.js官方配置（推荐） #

在项目根目录的next.config.js中添加以下配置，直接指定资源路径前缀，无需手动修改HTML：

module.exports = {
  output: 'export', // 启用静态导出模式
  basePath: '../../', // 对应你手动添加的路径层级
  assetPrefix: '../../',
};

执行next build && next export后，生成的所有HTML文件中，_next相关的CSS/JS路径会自动带上配置的前缀，无需手动修改。

方法2：调整自定义webpack配置的publicPath #

如果你坚持使用自己的webpack配置，将output中的publicPath从绝对路径改为所需的相对路径：

output: {
  path: `${__dirname}/dist`,
  publicPath: '../../', // 替换原有的'/'
  filename: "[name].js"
},

同时确保HtmlWebpackPlugin保持默认配置，不要额外覆盖路径规则。

注意事项 #

• 若部署在域名根目录，publicPath用/即可；若本地打开静态文件或部署在子目录，必须使用对应层级的相对路径。
• Next.js 13+ App Router模式下，需确保next.config.js中设置output: 'export'，且页面组件未使用服务端专属API。

内容的提问来源于stack exchange，提问作者Julius'Web