Nextjs -如何在 url 中为 api 传递多个参数？

在 Next.js 中，向 API 路由传递多个参数通常有两种方式：查询字符串（Query Strings）和动态路由（Dynamic Routes）。下面我将详细说明这两种方法，并给出相应的例子。

1. 查询字符串（Query Strings）

查询字符串是 URL 的一部分，用于传递非层级性数据。在 Next.js 中，你可以通过在页面中使用 fetch 或其他 HTTP 客户端库（如 axios）来发送带有查询参数的请求。

例子：

假设你有一个名为 api/users 的 API 路由，并且你想根据用户名（username）和年龄（age）来过滤用户。

你可以构建一个这样的请求：

js
// 在页面中或者其他客户端代码里面
fetch(`/api/users?username=${encodeURIComponent(username)}&age=${encodeURIComponent(age)}`)
  .then(response => response.json())
  .then(data => {
    // 处理你的数据
  });

在这个请求中，username 和 age 是传递给 /api/users 路由的查询参数。

在 API 路由中，你可以这样获取这些参数：

js
// 在 pages/api/users.js 中
export default function handler(req, res) {
  const { query } = req;
  const { username, age } = query;

  // 根据 username 和 age 来处理你的逻辑

  res.status(200).json({ /* 你的响应数据 */ });
}

2. 动态路由（Dynamic Routes）

动态路由允许你根据 URL 的路径部分定义变量。这在你想要创建一个基于特定路径参数的 API 路由时非常有用。

例子：

如果你要通过用户 ID 和文章 ID 获取特定的文章，你可以创建一个这样的动态路由：/api/users/[userId]/posts/[postId]。

在 Next.js 中，你将这样创建文件结构：

shell
pages/
  api/
    users/
      [userId]/
        posts/
          [postId].js

在 [postId].js 文件中，你可以这样获取动态路径参数：

js
// 在 pages/api/users/[userId]/posts/[postId].js 中
export default function handler(req, res) {
  const { query } = req;
  const { userId, postId } = query;

  // 使用 userId 和 postId 来处理你的逻辑

  res.status(200).json({ /* 你的响应数据 */ });
}

客户端代码会是这样：

js
// 使用模板字符串构建 URL
fetch(`/api/users/${userId}/posts/${postId}`)
  .then(response => response.json())
  .then(data => {
    // 处理数据
  });

在这种情况下，userId 和 postId 作为 URL 的一部分，而不是查询字符串的参数。

以上就是在 Next.js 中传递多个参数给 API 的两种主要方法。在实际应用中，你可以根据具体的需求选择最适合的方式。