Nginx反向代理NextJS应用时无法加载/_next/static/css静态资源

你的问题核心是Nginx配置冲突导致静态资源请求没有正确转发到NextJS服务，而是尝试从本地路径读取，从而加载失败。

修正后的Nginx配置 #

server {
    listen 80;
    server_name localhost;

    # 正确引入mime.types，放在server块中确保全局生效
    include /path/to/nginx-1.25.0/conf/mime.types;

    location = /favicon.ico {
        return 204;
        access_log off;
        log_not_found off;
    }

    location / {
        proxy_pass http://127.0.0.1:3000;
        access_log off;
        # 转发必要请求头，让NextJS正确识别请求上下文
        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;
    }
}

关键修改说明 #

• 移除root和default_type：你原本设置的root D:/es12front/会让Nginx优先从本地目录读取静态资源，而非转发给NextJS服务，这就是css、media加载失败的直接原因。反向代理模式下，所有请求都应交给后端NextJS服务处理。
• 调整mime.types引入位置：将include放在server块中，确保Nginx能正确识别各类文件的MIME类型，避免静态资源被误当作二进制流返回。
• 补充代理请求头：额外添加的请求头能让NextJS正确处理资源路径，避免因上下文信息缺失导致的资源定位错误。

验证步骤 #

1. 保存修改后的配置文件
2. 重启Nginx服务（执行nginx -s reload命令）
3. 清除浏览器缓存后访问localhost:80，检查css和media资源是否正常加载

内容的提问来源于stack exchange，提问作者Joaquín Gómez