Next13 Loading.tsx搭配Nginx时加载动画不显示问题求助

核心原因 #

直接访问Next服务正常，但Nginx代理后加载动画失效，通常是因为Nginx未正确传递关键请求头，导致Next.js的客户端路由或资源加载逻辑异常。

解决方案 #

1. 补全Nginx代理请求头
   Next.js的客户端组件（包括路由加载指示器Loading.tsx）依赖正确的请求头来识别运行环境、处理资源路径。修改Nginx配置，在对应的location块中添加必要的头信息：

server{
    server_name jamalyzer.com www.jamalyzer.com;

    location /api {
        proxy_pass http://localhost:3001;
        # 传递主机头，确保Next.js正确识别域名
        proxy_set_header Host $host;
        # 传递真实客户端IP
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # 传递协议类型（HTTPS），避免Next.js资源路径错误
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location / {
        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;
        proxy_set_header X-Forwarded-Proto $scheme;
        # 禁用缓存，防止加载状态被缓存（调试阶段适用，生产可按需调整）
        proxy_cache_bypass $http_upgrade;
    }
}

2. 确保Next.js资源路径配置正确
   如果你的Next.js应用需要适配代理后的HTTPS域名，在next.config.js中添加assetPrefix配置，保证静态资源加载路径正确：

/** @type {import('next').NextConfig} */
const nextConfig = {
  assetPrefix: process.env.NODE_ENV === 'production' ? 'https://jamalyzer.com' : '',
}

module.exports = nextConfig;

3. 强制清除浏览器缓存
   浏览器可能缓存了旧的路由状态或资源，导致加载组件不触发。按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，清除缓存后重新测试。

4. 完善Nginx SSL配置（针对HTTPS场景）
   因为代理后使用HTTPS，需确保Nginx的SSL配置完整，避免资源加载被拦截。示例完整SSL配置：

server{
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name jamalyzer.com www.jamalyzer.com;

    ssl_certificate /path/to/your/ssl/cert.pem;
    ssl_certificate_key /path/to/your/ssl/key.pem;

    # 优化SSL协议和加密套件
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

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

    location / {
        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;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }
}

# 重定向HTTP请求到HTTPS
server{
    listen 80;
    listen [::]:80;
    server_name jamalyzer.com www.jamalyzer.com;
    return 301 https://$host$request_uri;
}

修改配置后，执行sudo nginx -s reload重启Nginx生效。

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