在NGINX子路径部署多应用 如何解决Next.js _next/static资源冲突

针对两个Next.js应用静态资源路径冲突的问题，有两种可落地的方案，优先推荐从项目配置层面解决的方案一：

方案一：修改Next.js项目配置（推荐） #

从根源上避免静态资源请求路径重复，不需要依赖Nginx的不稳定判断逻辑。

• 分别给两个Next.js项目配置basePath和assetPrefix参数，配置文件为项目根目录的next.config.js：
  应用A的配置示例：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    // 页面路由统一前缀
    basePath: '/products/a',
    // 静态资源请求统一加前缀
    assetPrefix: '/products/a/'
  }
  module.exports = nextConfig
  

  应用B的配置示例：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    basePath: '/products/b',
    assetPrefix: '/products/b/'
  }
  module.exports = nextConfig
  

配置完成后重新构建镜像，两个应用的静态资源请求会自动带上各自的路径前缀，比如A的资源请求路径为/products/a/_next/static/xxx，B的为/products/b/_next/static/xxx，不会再出现公共的/_next/static路径请求。
对应的Nginx配置可以简化为：

worker_processes 1;
 
events { worker_connections 1024; }
 
http {
  server {
        listen 80;
        server_name saasbase.dev;

        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;
        
        # 应用A反向代理，端口3007根据实际情况调整
        location ~ ^/products/a(.*) {
            proxy_pass http://a:3007$1;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        # 应用B反向代理，端口3008根据实际情况调整
        location ~ ^/products/b(.*) {
            proxy_pass http://b:3008$1;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}

方案二：Nginx通过Referer头判断转发（仅适用于无法修改项目代码的场景） #

如果暂时没有权限修改两个应用的代码，可以通过Nginx判断静态资源请求的来源页面标识来转发到对应应用：

worker_processes 1;
 
events { worker_connections 1024; }
 
http {
  server {
        listen 80;
        server_name saasbase.dev;

        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/static路径请求
        location /_next/static {
            # 来源为应用A页面的请求转发到A
            if ($http_referer ~* /products/a/) {
                rewrite ^/_next/static/(.*)$ /_next/static/$1 break;
                proxy_pass http://a:3007;
            }
            # 来源为应用B页面的请求转发到B
            if ($http_referer ~* /products/b/) {
                rewrite ^/_next/static/(.*)$ /_next/static/$1 break;
                proxy_pass http://b:3008;
            }
            # 都匹配不到返回404，也可以调整为默认转发到某个应用
            return 404;

            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
  
        location ~ ^/products/a(.*) {
            proxy_pass http://a:3007$1;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        location ~ ^/products/b(.*) {
            proxy_pass http://b:3008$1;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }
}

注意：该方案依赖浏览器的Referer头，如果用户手动禁用了Referer发送，会导致静态资源加载失败，仅作为临时过渡方案使用。

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