Next.js动态路由+Nginx代理生产环境域名访问404问题求助

问题概述 #

• 生产环境通过域名访问带动态路由的页面（如/markets/[coinId]）时触发404错误，对应静态chunk文件路径为_next/static/chunks/pages/market/%5BcoinId%5D-f8020cad1ec98b8a.js
• 直接通过IP+端口3000访问相同页面时，静态文件可正常加载
• 所有动态路由页面均存在此域名访问问题，更新Next.js及相关依赖至最新版本（Next 13.4.18、React 18.2.0）后出现该问题
• 使用Nginx作为反向代理，Docker/非Docker部署环境下问题一致

当前Nginx核心配置：

location / {
    limit_req zone=one burst=5 nodelay;

    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Port $server_port;

    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;

    proxy_pass http://localhost:3000/;
}

可能原因 #

Next.js 13.x版本对静态资源路径解析逻辑有调整，在Nginx反向代理场景下，通用的location /规则可能无法正确处理动态路由对应的静态chunk请求，导致域名访问时路径解析错误。

解决方案 #

1. 单独配置/_next/路径代理 #

在Nginx配置中新增专门处理Next.js静态资源的规则，确保/_next/开头的请求被正确转发：

# 优先处理Next.js静态资源请求
location /_next/ {
    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;
    proxy_pass http://localhost:3000/_next/;
}

# 原有根路径代理规则
location / {
    limit_req zone=one burst=5 nodelay;

    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Port $server_port;

    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;

    proxy_pass http://localhost:3000/;
}

2. 检查Next.js配置文件 #

修改next.config.js，确保静态资源路径配置正确：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 若域名无二级路径，无需设置basePath；若有则填写对应路径，如'/app'
  basePath: '',
  // 确保静态资源前缀正确，与Nginx代理路径匹配
  assetPrefix: '',
  // 根据需求设置是否保留结尾斜杠，避免路径解析不一致
  trailingSlash: false,
}

module.exports = nextConfig

3. 清理缓存并重新部署 #

• 清理Nginx缓存：执行nginx -s reload重启服务，或手动清除Nginx缓存目录（如/var/cache/nginx/）
• 重新构建Next.js项目：执行next build生成最新生产包，确保部署的是最新构建产物

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