Docker部署Next.js配置assetPrefix后Nginx无法加载静态资源

问题根因 #

你当前的Nginx配置存在两处核心问题导致静态资源加载失败：

1. /blog/_next/static/ 匹配块的alias路径配置错误，缺少static层级目录，会导致路径拼接后无法定位到真实静态文件
2. 你的Next.js运行在Docker容器内，除非你提前将容器内的_next/static目录挂载到宿主机的/usr/src/app/_next/static路径，否则宿主机上的Nginx无法访问到容器内的静态资源文件

解决方案 #

方案1：最简配置（无需挂载静态资源）

直接删除现有的location /blog/_next/static/配置块即可，所有/blog/前缀的请求都会转发到5000端口的Next.js服务，由Next.js自行处理静态资源响应，修改后的完整配置如下：

server {
        server_name mydomain.com;

        location / {
            proxy_pass    http://localhost:3000;
        }

        location /blog/ {
            proxy_pass    http://localhost:5000;
            # 可选补充代理头配置，避免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;
        }
}

方案2：Nginx托管静态资源（性能更优）

先修改Docker运行配置，将容器内Next.js构建后的_next/static目录挂载到宿主机的/usr/src/app/_next/static路径，再调整Nginx配置如下：

server {
        server_name mydomain.com;

        location /blog/_next/static/ {
            # 修正alias路径，补全static层级
            alias /usr/src/app/_next/static/;
            sendfile on;
            sendfile_max_chunk 1m;
            # 可选添加静态资源缓存配置，提升加载速度
            expires 1y;
            add_header Cache-Control "public, immutable";
        }

        location / {
            proxy_pass    http://localhost:3000;
        }

        location /blog/ {
            proxy_pass    http://localhost:5000;
            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;
        }
}

额外注意事项 #

如果你的整个博客站点都挂载在/blog路径下，除了assetPrefix之外，还需要在next.config.js中添加basePath: '/blog'配置，否则页面路由跳转可能会出现路径错误。

配置修改完成后执行nginx -t验证语法正确性，再执行nginx -s reload重载配置即可生效。

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