如何将前端用户查询参数传递给Next.js API路由？

你遇到的问题主要有两处核心错误，分别在服务端参数取值和前端SWR请求逻辑上：

1. Next.js API 路由的GET请求查询参数存放在req.query对象中，你当前使用的req.params仅用于动态路由的路径参数（例如/api/podcast/[id]中的id值），因此无法拿到前端传递的q参数。
2. useSWR会基于请求key做缓存，你当前固定用/api/podcast作为key，即使后续查询词变化，SWR也会直接返回缓存结果，不会触发新的请求。

前端代码修改 #

export default function SearchBar() {
  const [query, setQuery] = useState("");
  const [shouldFetch, setShouldFetch] = useState(false);
  // 将查询词纳入SWR的key，保证查询词变化时自动发起新请求
  const fetcher = async ([url, q]) => await axios.get(url, { params: {q} }).then((res) => res.data);
  const { data, error } = useSWR(shouldFetch ? ["/api/podcast", query] : null, fetcher);

  const handleSubmit = (e) => {
    e.preventDefault();
    // 过滤空查询
    if(!query.trim()) return
    setShouldFetch(true);
  };

  return (
    <>
      <Form onSubmit={handleSubmit}>
        <Input
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />
        <SearchButton type="submit">Search</SearchButton>
      </Form>
    </>
  );
}

后端API代码修改 #

const { Client } = require("podcast-api");

export default function handler(req, res) {
  // 限制仅接受GET请求
  if(req.method !== 'GET') {
    return res.status(405).json({error: '请求方法不允许'})
  }
  const client = Client({
    apiKey: process.env.REACT_APP_API_KEY || null,
  });

  // 从req.query中取出前端传递的q参数
  client     
    .search({ q: req.query.q })
    .then((response) => {
      res.status(200).json(response.data);
    })
    .catch((error) => {
      console.log("apiError: " + error);
      res.status(500).json({error: '搜索请求失败'})
    });
}

额外优化建议 #

• 建议给服务端使用的环境变量去掉REACT_APP_前缀，Next.js中带此前缀的环境变量会暴露到前端，服务端专用的环境变量直接命名为API_KEY即可，安全性更高
• 可以根据实际需求加请求防抖逻辑，避免用户频繁提交触发过多无效请求

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