Next.js 13+部署环境刷新跳转首页问题求助

问题本质 #

你的核心问题是Nginx配置不兼容Next.js的SSR路由机制：

• 本地开发时Next.js Dev Server会接管所有路由处理，但生产环境用静态托管的方式（当前Nginx配置），无法让SSR组件正确处理路由请求，导致刷新非首页路由时，要么跳首页，要么显示首页内容。
• 启用trailingSlash: true后，路由格式和Nginx静态托管的文件结构不匹配，且没有转发给Next.js服务，导致页面失效。

解决方案 #

1. 重构Nginx反向代理配置 #

因为项目包含SSR组件，必须让Nginx把非静态资源请求转发给Next.js服务，而不是直接返回静态index.html。修改Nginx配置中的server块：

server {
    # 保留原有的limit_conn、listen、ssl等配置...

    root /usr/share/nginx/apps; # 静态资源目录（比如Next.js导出的public文件）

    # 优先处理静态资源，找不到则转发给Next.js服务
    location / {
        try_files $uri $uri/ @nextjs;
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Cache-Control' 'no-store';
    }

    # 转发所有动态路由请求到Next.js服务
    location @nextjs {
        proxy_pass http://localhost:3000; # 替换成你的Next.js服务地址（比如容器内部端口）
        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_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }

    # 保留原有的error_page等配置...
}

2. 统一路由后缀配置 #

如果要启用trailingSlash: true，需要同步调整两处：

• 在next.config.js中明确配置：

  module.exports = {
    trailingSlash: true,
  }
  

• 确保Nginx的try_files规则能适配带斜杠的路由（上面的配置已经包含$uri/，无需额外修改）。

3. 清除缓存并重启服务 #

如果怀疑缓存导致异常，执行以下操作：

• 重启Nginx：nginx -s reload
• 重启Next.js服务（根据你的部署方式，比如容器重启或进程重启）

4. 检查OpenShift路由配置 #

确认OpenShift的路由规则没有错误重写路径，比如是否把/aboutus这类子路径重定向到了根目录，检查路由的注解和转发规则，确保路径完整传递到Nginx。

内容的提问来源于stack exchange，提问作者Before The Empire