NextJS含Query String的URL生产环境报404跳转问题求助

下面是几个常见的原因和对应的解决办法：

1. 静态生成页面的URL格式不匹配 #

当你开启了trailingSlash: true，Next.js会为静态页面生成带尾部斜杠的文件结构（比如index.html放在/目录下）。如果访问的是www.domain.com?data=1（不带尾部斜杠），生产服务器可能无法正确匹配到对应的静态资源，直接返回404并触发默认重定向，导致query参数丢失。

解决办法：

• 确保前端跳转或用户访问的URL带尾部斜杠，即www.domain.com/?data=1
• 或者在服务器配置中添加重写规则，自动将不带尾部斜杠的请求重定向到带斜杠的版本，同时保留query参数。比如Nginx配置：

  rewrite ^([^.]*[^/])$ $1/ permanent;
  

2. 服务器路由规则丢失Query参数 #

很多托管平台或自定义服务器（如Apache、Nginx）的默认路由规则可能会忽略query参数来匹配静态文件，导致带query的请求无法正确转发给Next.js处理。

解决办法：

• 检查服务器配置，确保路由规则保留query参数。比如Apache的.htaccess添加：

  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ /index.html?$1 [L,QSA]
  

  其中QSA标志会自动保留原请求的query参数，确保Next.js能正常接收。
• 如果用托管平台（如Vercel、Netlify），检查平台的重定向/重写规则，确认没有会移除query参数的配置。

3. trailingSlash配置与平台默认规则冲突 #

即使你在next.config.js中设置了trailingSlash: true，部分托管平台可能自带自动调整URL的规则（比如强制移除尾部斜杠），导致URL被修改后query参数丢失。

解决办法：

• 在托管平台的项目设置中关闭自动URL调整功能，确保平台规则与Next.js的trailingSlash配置一致。比如Vercel中，在“Rewrites and Redirects”里删除所有会修改URL尾部斜杠的规则。

4. 页面数据获取逻辑错误触发重定向 #

如果你的页面使用了getServerSideProps或getStaticProps，检查是否有逻辑错误地在存在query参数时触发重定向到根路径。

解决办法：

• 排查页面中的数据获取代码，比如是否有类似这样的错误逻辑：

  export async function getServerSideProps(context) {
    const { data } = context.query;
    // 错误逻辑：没有判断data是否存在就重定向
    if (!data) {
      return { redirect: { destination: '/' } };
    }
    // 正常数据处理逻辑
    return { props: { data } };
  }
  

  确保重定向逻辑只有在必要时才触发，不要误拦截合法的带query参数的请求。

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