NextJS服务端API路由无法提取查询字符串问题求助

问题分析 #

你在Next.js App Router架构下，前端页面能通过searchParams获取URL查询参数并传递给API，但后端/app/api/products/route.js的GET接口中，尝试用req.query获取参数时返回undefined。这是因为App Router的API路由使用标准Web Request接口，而非传统Express风格的请求对象，所以不存在req.query属性。

解决方案 #

要从Request对象中获取查询参数，需通过URL对象解析请求URL，再利用URLSearchParams提取参数。以下是修改后的GET接口代码：

import Product from "@backend/models/product";
import { connectToDB } from "@backend/utils/connectToDB";

export const POST = async (request) => {
  try {
    await connectToDB();
    const data = await request.json();
    const newProduct = new Product(data);
    await newProduct.save();
    return new Response(JSON.stringify(newProduct), { status: 201 });
  } catch (error) {
    console.log(error);
    return new Response(error, { status: 500 });
  }
};

export const GET = async (request) => {
  try {
    // 解析请求URL，提取查询参数
    const url = new URL(request.url);
    const min = url.searchParams.get("min") || "";
    const max = url.searchParams.get("max") || "";
    const category = url.searchParams.get("category") || "";
    const rating = url.searchParams.get("rating") || "";

    console.log("获取到的查询参数：", { min, max, category, rating });

    await connectToDB();
    // 根据参数构建MongoDB查询条件
    let query = {};
    if (min) query.price = { ...query.price, $gte: Number(min) };
    if (max) query.price = { ...query.price, $lte: Number(max) };
    if (category) query.category = category;
    if (rating) query.rating = { $gte: Number(rating) };

    const data = await Product.find(query);
    return new Response(
      JSON.stringify({
        data: data,
        message: "Products fetched successfully",
      }),
      { status: 200 } // 获取资源成功用200状态码更规范
    );
  } catch (error) {
    console.error(error);
    return new Response("Failed to fetch products", { status: 500 });
  }
};

关键说明 #

1. 解析URL参数：通过new URL(request.url)创建URL对象，再用searchParams.get('参数名')获取单个参数值；若需要一次性获取所有参数，可使用Object.fromEntries(url.searchParams)将其转为对象。
2. 类型转换：查询参数默认是字符串类型，需根据业务需求转换为对应类型（如数字），才能用于MongoDB的范围查询。
3. 前端优化：建议将前端axios请求改为通过params对象传递参数，避免手动拼接URL的潜在错误：

   const getProducts = async (min, max, category, rating) => {
     const { data } = await axios.get(`${process.env.AXIOS_URL}/api/products`, {
       params: { min, max, category, rating }
     });
     return data;
   };
   

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