reactjs 如何在Next.js中使用查询字符串创建API端点

qv7cva1a 于 2023-03-29 发布在 React

关注(0)|答案(2)|浏览(118)

我需要使用Next.js创建以下API端点：
/api/products/[name]?keyword=${anykeyword}。
我知道我需要在index.js中的pages/API/products/[name]目录下创建它。但是我怎么才能访问keyword呢？
req.query只包含name。
下面是我的代码：

import { connectToDatabase } from "../../../../util/mongodb";
    import validate from "../../../../validation/product";
    //capitalize first letter only to avoid errors
    import capitalize from "lodash.capitalize";

    export default async function productsHandler(req, res) {
    const {
      query: { name, keyword }, // here i cannot access keyword//
      method,
    } = req,
    Name = capitalize(name),
    { db } = await connectToDatabase(),
    searchCriteria = keyword ? keyword : "price";

  switch (method) {
    case "GET":
      // @route GET api/products/[name]
      // @desc get products of [name] from data base
      // @access public
      {
        const products = await db
          .collection("products")
          .find({ category: Name })
          .sort({ [searchCriteria]: 1 })
          .toArray();

        if (!products.length)
          return res.status(404).json({ error: "no such category" });

        res.status(200).json(products);
      }

      break;

reactjs

来源：https://stackoverflow.com/questions/66291447/how-can-i-create-api-end-point-in-next-js-with-query-string

2条答案

按热度按时间

qxsslcnc1#

它可能与如何从客户端发送请求到服务器端有关。您可能需要修改它。我刚刚使用Postman尝试了这个示例，它正确地解析了参数：

import { NextApiRequest, NextApiResponse } from "next";

export default async (request: NextApiRequest, response: NextApiResponse) => {
  const {
    query: { name, keyword },
    method,
  } = request;
  console.log(name, keyword, method);

  // do nothing fancy and simply return a string concatenation
  return response.status(200).json({ query: name + " " + keyword });
};

Postman ：

赞(0）回复(0）举报 2023-03-29

mdfafbf12#

这对我很有效：

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const qs = getQSParamFromURL("qs", req.url);
  return new Response(
    JSON.stringify({
      data: {
        hello: qs,
      },
    }),
    {
      status: 200,
      headers: {
        "content-type": "application/json",
        "cache-control": "public, s-maxage=1800, stale-while-revalidate=600",
      },
    }
  );
}

export function getQSParamFromURL(
  key: string,
  url: string | undefined
): string | null {
  if (!url) return "";
  const search = new URL(url).search;
  const urlParams = new URLSearchParams(search);
  return urlParams.get(key);
}

赞(0）回复(0）举报 2023-03-29

我来回答

reactjs 如何在Next.js中使用查询字符串创建API端点

2条答案

相关问题

热门标签

最新问答