Next.js 13.4 API路由中无法获取URL查询参数id的问题

兄弟，我懂你现在的困惑——明明URL里带了id=2，但用req.query就是拿不到，还提示undefined，对吧？其实问题出在Next.js 13.4默认用的App Router和传统Pages Router的API路由逻辑不一样！

你当前写的是App Router下的API路由（文件应该在app/api/xxx/route.js路径下），这里的req不是Express风格的请求对象，自然没有req.query这个属性，这就是为啥你拿不到值的原因。

给你两种简单的解决方法，不用手动拆分URL：

方法一：直接用req.nextUrl.searchParams获取 #

这是App Router里官方推荐的获取查询参数的方式，代码改成这样：

import { NextResponse } from 'next/server';

export async function PUT(req) {
  // 用get方法直接获取指定的查询参数
  const id = req.nextUrl.searchParams.get('id');
  console.log('查询参数id:', id); // 这里会输出2
  return NextResponse.json('hi');
}

方法二：转成对象后解构（适合多参数场景） #

如果需要同时获取多个查询参数，可以先把searchParams转成普通对象再解构：

import { NextResponse } from 'next/server';

export async function PUT(req) {
  const searchParams = Object.fromEntries(req.nextUrl.searchParams);
  const { id } = searchParams;
  console.log('查询参数id:', id); // 同样能拿到2
  return NextResponse.json('hi');
}

另外提一嘴：你的URL里还有/89这个部分，看起来像是动态路由参数（比如路由文件是app/api/abc/abc/update/[id]/route.js），如果需要拿这个89，得从第二个参数params里获取，写法是这样的：

import { NextResponse } from 'next/server';

export async function PUT(req, { params }) {
  const dynamicRouteId = params.id; // 这里拿到的是89
  const queryId = req.nextUrl.searchParams.get('id'); // 这里拿到的是2
  console.log('动态路由id:', dynamicRouteId, '查询参数id:', queryId);
  return NextResponse.json('hi');
}

核心就是别再用Pages Router的老思路啦，App Router的API路由有自己的参数获取方式，换上面的写法就能解决问题！

备注：内容来源于stack exchange，提问作者Yogesh Kumar