在 Next.js 中，API 路由允许你在同一个项目中创建后端接口，而无需设置单独的服务器。这些 API 路由位于 pages/api 目录中，每个文件即对应一个 API 端点。这种功能非常适合处理简单的后端任务，如表单处理、数据库访问、或外部 API 的代理。

1. 创建 API 路由

API 路由的每个文件或文件夹都自动成为一个可访问的 API 端点，默认暴露在 /api 路径下。

1.1 创建简单的 API 路由

步骤：

1. 在 pages/api 目录中创建一个新的文件，比如 hello.js。

   文件路径：pages/api/hello.js

2. 在 hello.js 中定义一个简单的 API 响应。

代码示例：

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, this is your API response!' });
}

1.2 解释：

• handler(req, res)：这是一个标准的 API 路由处理函数，接收两个参数：

  • req（请求对象）：包含有关请求的信息（如查询参数、请求头等）。
  • res（响应对象）：用于向客户端返回响应。

• res.status(200).json()：用于返回状态码为 200 的 JSON 响应。

1.3 访问 API 路由

启动开发服务器并访问 http://localhost:3000/api/hello，你将看到返回的 JSON 数据：

{
  "message": "Hello, this is your API response!"
}

2. 处理请求方法（GET, POST 等）

Next.js 的 API 路由支持处理不同的 HTTP 方法（如 GET、POST、PUT、DELETE 等）。通过 req.method 可以判断当前请求的类型并处理不同的逻辑。

2.1 处理 POST 请求

在 API 路由中可以根据请求类型进行不同的处理。例如，处理一个 POST 请求并返回请求中的数据。

步骤：

1. 创建一个新的 API 路由 pages/api/data.js。
2. 修改代码以处理不同的请求方法。

代码示例：

export default function handler(req, res) {
  if (req.method === 'POST') {
    // 处理 POST 请求
    const { name } = req.body;
    res.status(200).json({ message: `Hello, ${name}!` });
  } else {
    // 处理其他请求
    res.status(405).json({ message: 'Only POST requests are allowed.' });
  }
}

2.2 解释：

• req.method：用于获取请求的方法，判断是 GET、POST 还是其他类型。
• req.body：包含了 POST 请求中的请求体数据（需要确保使用 JSON.stringify() 发送数据，Next.js 会自动解析 JSON 请求体）。
• 通过返回 405 状态码来表示不支持的请求方法。

2.3 发送 POST 请求

你可以使用工具如 Postman 或 fetch 在浏览器控制台发送 POST 请求：

fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'John Doe' }),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

3. 动态 API 路由

与页面路由类似，API 路由也支持动态参数。可以通过创建带有方括号的文件名来定义动态 API 路由。

3.1 创建动态 API 路由

假设你需要创建一个 API 来根据用户 ID 获取用户数据，可以创建 pages/api/user/[id].js 文件。

步骤：

1. 在 pages/api/user/ 目录下创建 [id].js 文件。
2. 编写代码以处理动态 ID 参数。

代码示例：

export default function handler(req, res) {
  const { id } = req.query; // 动态路由参数
  res.status(200).json({ message: `User ID: ${id}` });
}

3.2 解释：

• req.query：用于获取动态路由参数。这里的 id 是从 URL 中提取的参数。

3.3 访问动态 API

在浏览器中访问 http://localhost:3000/api/user/123，你将看到类似如下的响应：

{
  "message": "User ID: 123"
}

4. 总结

• 创建 API 路由：在 pages/api 文件夹中创建文件即为 API 路由，默认暴露在 /api/ 下。
• 处理不同请求方法：通过 req.method 可以处理 GET、POST 等不同的请求。
• 动态 API 路由：使用带方括号的文件名（如 [id].js）来定义动态路由。

Next.js 的 API 路由使得在同一项目中管理前后端变得更简单，特别适合小型应用或简单的后端任务。