为什么 req.query 在 NEXT.js 中没有按预期运行？

Question

我在最新的 NEXT js App Router 的文件内有以下代码

app\api\products\route.tsx

import { initMongoose } from "@/lib/mongoose";
import Product from "@/models/products";
import { NextApiRequest } from "next";
import { NextResponse } from "next/server";

export async function GET(req: NextApiRequest,res: NextResponse) {
  await initMongoose();
  console.log("Query is ",req.query);
  return NextResponse.json( await Product.find().exec() )
}

但是，即使我使用查询参数到达端点，它也会返回

Query is undefined

。

示例：

http://localhost:3000/api/products?abc=def

我想要得到类似物体的东西

{
   "abc" : "def"
}

我正在使用带有 TypeScript 的 NEXT JS 版本 14。

这不是“使用客户端”问题

端点也正在工作，因为我收到了所有产品的响应。

Answer 1

试试这个

import { initMongoose } from "@/lib/mongoose";
import Product from "@/models/products";
//import { NextApiRequest } from "next";
import { NextRequest, NextResponse } from "next/server";

export async function GET(req: NextRequest, res: NextResponse) {
  
  //console.log("Query is ",req.query);
  const searchParams = req.nextUrl.searchParams;
  const abc = searchParams.get('abc');
  console.log("Query is ", abc); 

  await initMongoose();

  return NextResponse.json(await Product.find().exec());
}

NextJSv13.4+ 从使用 NextAPIRequest 切换到 NextRequest。 NextAPIRequest 源自 Node 请求，而 NextRequest 更直接源自 Web API 请求。随着变化，辅助方法也发生了变化。