Next.js导出HTML的根相对路径HREF部署子目录链接失效如何解决

这个问题可以直接在Next.js导出阶段通过配置解决，不需要导出后手动修正文件。

核心配置方案 #

Next.js 提供了原生的basePath配置项，专门用于解决部署到子目录的路径适配问题，适配所有支持静态导出的Next.js版本（包括Pages Router和App Router模式）。

配置步骤 #

1. 打开项目根目录下的next.config.js文件，添加如下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 替换为你实际部署的子目录路径，开头加斜杠，结尾不要加斜杠
  basePath: '/app',
  // 静态导出必须配置的参数（Next.js 12.3+ 版本支持，旧版本用next export命令即可）
  output: 'export',
  // 可选配置，根据你是否需要页面路径末尾带斜杠调整
  trailingSlash: false
}

module.exports = nextConfig

2. 重新执行导出命令，此时所有生成的HTML内的静态资源链接、路由跳转href都会自动加上配置的子目录前缀，例如原路径/static/xxx.js会自动生成/app/static/xxx.js，部署到对应子目录即可正常访问。

注意事项 #

• 使用Next.js官方提供的next/link组件做路由跳转时，不需要手动拼接子目录前缀，组件会自动补全basePath
• 如果是自行硬编码的原生a标签href、资源引用路径，需要手动拼接前缀，可通过useRouter钩子获取当前配置的basePath参数动态拼接，避免后续修改子目录时批量改代码

导出后修正方案（不推荐） #

如果已经完成导出不想重新构建，也可以通过批量替换工具处理导出后的HTML文件：

• 批量把所有href="/替换为href="/app/
• 批量把所有src="/替换为src="/app/
  该方案容易出现特殊场景的遗漏问题，仅适合临时应急使用。

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