NGINX反向代理多Next.js应用出现静态资源404错误求助

AI 小北

2026-7-5

解决Next.js应用在NGINX反向代理子路径下静态资源404问题

1. 修改Next.js App2的配置

在App2的next.config.js中添加basePath配置，告诉Next.js应用运行在/admin子路径下，这样它生成的所有静态资源、路由链接都会自动带上/admin前缀：

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '/admin',
  // 保留你已有的其他配置
}

module.exports = nextConfig

2. 调整NGINX代理配置

你的现有NGINX配置需要两处关键调整，修复路径转发和请求头问题：

location /admin {
    proxy_pass http://adminui:3010/;
    # 传递必要的请求头，让Next.js识别真实请求信息
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    # 适配Next.js的路由刷新需求
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_cache_bypass $http_upgrade;
}

location / {
    proxy_pass http://frontendui:3003;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

关键逻辑说明

Next.js的basePath：Next.js默认从根路径/加载资源，设置basePath: '/admin'后，所有静态资源、路由链接都会自动拼接/admin前缀，比如/_next/static/xxx.js会变成/admin/_next/static/xxx.js，刚好匹配NGINX的/admin规则。
proxy_pass末尾的斜杠：如果不带斜杠，NGINX会把/admin连同后续路径一起转发给后端（比如/admin/_next/xxx会变成http://adminui:3010/admin/_next/xxx），但App2已经设置了basePath，实际期望的后端路径是/_next/xxx，加斜杠后NGINX会自动去掉/admin前缀再转发。
代理请求头：确保Next.js能正确获取请求的主机、协议等信息，避免生成错误的资源链接或路由跳转。