Nginx反向代理下Next.js(App Router)出现永久重定向问题

问题原因 #

• Next.js 默认以根路径/作为路由基准，部署时未配置basePath，导致它无法感知请求是通过/my/frontend这个代理前缀进入的。生成重定向、路由跳转时都会直接使用根路径，从而跳出代理路径范围。
• Nginx 配置中location /my/frontend的proxy_pass末尾加了/，会将请求路径中的/my/frontend截断后转发给容器（比如/my/frontend/overviewPage会被转发为/overviewPage）。但 Next.js 处理请求时无法识别原始请求的前缀，返回的重定向 Location 会是/overviewPage，而非预期的/my/frontend/overviewPage。
• 客户端router.push("/overviewPage")是基于根路径的跳转，由于 Next.js 未配置basePath，会直接跳转到域名根路径下的/overviewPage，而非代理前缀下的目标路径。

解决方案 #

1. 配置 Next.js 的basePath #

在next.config.js中添加basePath配置，通过环境变量区分本地和部署环境：

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: process.env.NEXT_PUBLIC_BASE_PATH || '',
  // 保留其他原有配置
}

module.exports = nextConfig

• 部署时设置环境变量NEXT_PUBLIC_BASE_PATH=/my/frontend，Next.js 会自动为所有路由、资源路径加上该前缀。
• 本地开发时不设置该环境变量，保持basePath为空，路由依然是localhost:3000/overviewPage，和原有逻辑一致。

2. 调整 Nginx 配置 #

修改 Nginx 转发规则，确保路径完整传递，并补充必要的请求头：

location /_next/static {
    add_header Cache-Control "public, max-age=3600, immutable";
    # 匹配basePath，转发到容器对应路径
    proxy_pass http://127.0.0.1:8001/my/frontend/_next/static;
}

location /my/frontend {
    proxy_pass http://127.0.0.1:8001/my/frontend;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    # 传递原始请求的主机、协议信息，让Next.js生成正确的绝对路径
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_cache_bypass $http_upgrade;
}

• 去掉proxy_pass末尾的/，确保/my/frontend/overviewPage完整转发到容器的/my/frontend/overviewPage，和 Next.js 的basePath配置匹配。
• 添加X-Forwarded-*系列请求头，让 Next.js 能正确识别外部请求的协议和主机，生成符合预期的重定向和跳转路径。

3. 统一客户端路由逻辑 #

配置basePath后，客户端的router.push("/overviewPage")会自动拼接/my/frontend前缀，无需手动修改路径参数，本地和部署环境的跳转行为将完全一致。

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