Next.js 13.4.19部署后req.nextUrl.searchParams.get为何返回null？

问题背景 #

使用Next.js 13.4.19开发的API路由，本地环境能正常通过req.nextUrl.searchParams.get('sort')获取URL http://mysite/api/records?sort=Newest&page=1中的sort参数值Newest，但部署后该方法返回null，page参数也存在同样问题。

可能的原因及解决方法 #

1. 部署平台的URL代理/重写配置丢失参数 #

很多部署平台（如Vercel、Netlify、Nginx）的默认配置可能会修改或过滤URL查询参数：

• Vercel：检查vercel.json中的重写规则，确保重写时保留查询参数，避免使用会丢弃query的配置。正确示例：

  {
    "rewrites": [
      { "source": "/api/:path*", "destination": "/api/:path*" }
    ]
  }
  

• Nginx：反向代理配置中，proxy_pass要保留原始查询参数，不要手动拼接URL（若必须拼接，需加上$query_string）：

  location /api/ {
    proxy_pass http://your-upstream-server;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
  

2. API路由被静态缓存导致参数无法实时获取 #

Next.js可能会将API路由默认标记为静态生成，部署后缓存结果，导致查询参数无法被实时解析。可以强制路由为动态：
在API路由文件顶部添加：

export const dynamic = 'force-dynamic';

这会让Next.js每次请求都执行该路由，不缓存结果。

3. nextUrl解析异常，改用原始URL解析 #

部署环境中req.nextUrl的解析可能存在差异，尝试直接使用req.url创建URL对象来解析参数：

const url = new URL(req.url);
const sort = url.searchParams.get('sort');
const page = url.searchParams.get('page');

也可以将这种方式作为备用，和原方法结合提升兼容性：

const sort = url.searchParams.get('sort') || req.nextUrl?.searchParams?.get('sort');

4. Next.js版本bug #

13.4.19版本可能存在nextUrl查询参数解析的已知问题，建议升级到最新的13.x稳定版，或者降级到13.4.18版本测试。

5. 增加日志定位问题 #

在部署环境添加详细日志，确认请求到达时的URL和参数状态：

console.log('完整请求URL:', req.url);
console.log('nextUrl对象:', req.nextUrl);
console.log('查询参数字符串:', req.nextUrl.searchParams.toString());

通过日志可以确认参数是在传输过程中丢失，还是API路由解析时出现问题。

修改后的示例代码 #

import {NextResponse, NextRequest} from 'next/server';

// 强制动态路由，避免缓存
export const dynamic = 'force-dynamic';

const GET = async (req: NextRequest) => {
  if (!req) {
    return NextResponse.json({error: 'Invalid Request'}, {status: 400});
  }

  // 优先用原始URL解析参数，兼容部署环境
  const url = new URL(req.url);
  const sort = url.searchParams.get('sort');
  const page = url.searchParams.get('page');

  console.log('请求URL:', req.url);
  console.log('sort参数:', sort);
  console.log('page参数:', page);

  try {
    return NextResponse.json({
      sort,
      page,
    });
  } catch (error: any) {
    const message = error.message === 'fetch failed' ? 'Session Timeout' : error.message;
    return NextResponse.json({error: message}, {status: 500});
  }
};

export {GET};

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