Nginx部署Next.js站点遇静态资源及路由404问题求助

问题根源 #

1. 初始配置中，所有请求（包括静态资源）都转发给Next.js服务，但Next.js运行时未正确暴露静态资源路径，导致静态资源404。
2. 添加/_next/static/的alias配置后，静态资源能直接从磁盘读取，但_next/data这类动态数据请求被Nginx误判为静态资源路径，未转发给Next.js服务，导致导航和数据请求404；同时原location /中的try_files $uri $uri/ =404会在找不到静态文件时直接返回404，而非转发给Next.js处理路由。

修改后的Nginx配置 #

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    server_name a.com;

    # 处理Next.js的静态资源（_next/static）
    location /_next/static/ {
        alias /var/www/html/dist/_next/static/; # 确保路径与你的Next.js构建产物一致
        expires 365d;
        access_log off;
    }

    # 处理项目public目录下的静态资源
    location /static/ {
        alias /var/www/html/dist/static/;
        expires 30d;
        access_log off;
    }

    # 所有其他请求转发给PM2运行的Next.js服务
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        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_cache_bypass $http_upgrade;
        # 移除=404，让Next.js处理所有路由（包括单页应用的前端路由）
        try_files $uri $uri/ @proxy_nextjs;
    }

    # 兜底转发所有未匹配的请求给Next.js
    location @proxy_nextjs {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

关键修改说明 #

• 修正静态资源路径：确保/_next/static/的alias指向你Next.js构建后dist/_next/static的真实路径（如果你的构建目录不是dist，请替换为实际路径，比如.next）。
• 移除错误的try_files规则：原配置中的=404会导致Nginx在找不到静态文件时直接返回404，而不是转发给Next.js处理前端路由和动态数据请求。
• 新增兜底转发规则：@proxy_nextjs确保所有未被静态资源规则匹配的请求（包括_next/data、前端路由）都转发给Next.js服务处理。
• 单独处理public静态资源：如果你的Next.js项目有public/static目录，添加location /static/规则直接读取磁盘文件，提升性能。

验证步骤 #

1. 保存修改后的配置，执行nginx -t检查配置语法是否正确。
2. 重启Nginx：systemctl restart nginx。
3. 访问站点，验证静态资源加载、页面导航和动态数据请求是否正常。

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