反向代理下Next.js React应用资源路径问题及多实例部署方案咨询

核心问题在于Next.js默认生成的资源路径是绝对根路径（/_next/...），没有带上反向代理的子路径前缀。通过官方提供的basePath配置可以彻底解决这个问题，无需单独配置/_next/的location规则，还能支持多实例部署。

1. 配置Next.js的basePath #

修改项目根目录下的next.config.js，添加basePath字段，值对应反向代理的子路径（这里是/reactjs）：

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '/reactjs',
  // 该配置会自动让所有资源、路由URL带上/reactjs前缀
}

module.exports = nextConfig

配置完成后重启Next.js应用，确保配置生效。

2. 调整反向代理配置 #

保留你现有的/reactjs/ location规则，建议补充必要的请求头，确保Next.js能正确识别请求环境：

location /reactjs/ {
  rewrite        /reactjs/(.*) /$1 break;
  proxy_pass     http://reactjs:3000/;
  
  # 必须添加的请求头，避免Next.js生成错误的URL
  proxy_set_header Host $host;
  proxy_set_header X-Forwarded-Proto $scheme;
  proxy_set_header X-Forwarded-For $remote_addr;
}

配置生效后，Next.js生成的所有资源路径会自动变为/reactjs/_next/...，浏览器请求时会匹配到/reactjs/的规则，被正确转发到你的Next.js容器，不会出现404。

3. 多实例部署实现 #

如果需要部署第二个Next.js应用（比如对应/reactjs2路径），只需要重复以下两步：

• 给第二个应用的next.config.js设置basePath: '/reactjs2'
• 在反向代理中添加对应的location规则：

location /reactjs2/ {
  rewrite        /reactjs2/(.*) /$1 break;
  proxy_pass     http://reactjs2:3000/;
  
  proxy_set_header Host $host;
  proxy_set_header X-Forwarded-Proto $scheme;
  proxy_set_header X-Forwarded-For $remote_addr;
}

两个应用的资源路径会分别带上各自的前缀，完全独立，不会互相干扰。

常见问题排查 #

如果之前配置basePath没生效，可能是以下原因：

• 未重启Next.js应用，配置未加载
• next.config.js存在语法错误（比如括号不匹配、缺少逗号）
• 反向代理未正确转发Host等请求头，导致Next.js无法生成正确的带前缀URL

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