Next.js 中如何创建 API 路由？

推荐答案

在 Next.js 中，创建 API 路由非常简单。你只需要在 pages/api 目录下创建一个文件，该文件的路径将自动成为 API 路由的路径。例如，如果你创建了一个文件 pages/api/hello.js，那么你可以通过 /api/hello 访问这个 API 路由。

以下是一个简单的示例：

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, world!' });
}

在这个示例中，handler 函数接收两个参数：req（请求对象）和 res（响应对象）。你可以在这个函数中处理请求并返回响应。

本题详细解读

1. API 路由的基本概念

Next.js 的 API 路由允许你在 pages/api 目录下创建服务器端 API。这些路由是作为 Node.js 服务器的一部分运行的，因此你可以在其中执行服务器端代码，如数据库查询、文件操作等。

2. 创建 API 路由的步骤

1. 创建文件：在 pages/api 目录下创建一个新的文件。文件名将决定 API 路由的路径。例如，pages/api/user.js 将创建一个 /api/user 的路由。

2. 编写处理函数：在文件中导出一个默认的处理函数。这个函数将接收 req 和 res 两个参数，分别代表 HTTP 请求和响应对象。

3. 处理请求：在处理函数中，你可以根据请求的方法（如 GET、POST 等）执行不同的逻辑，并通过 res 对象返回响应。

3. 示例代码解析

// pages/api/hello.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ message: 'Hello, world!' });
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

• req.method：用于检查请求的 HTTP 方法。在这个示例中，我们只允许 GET 请求。
• res.status(code)：设置 HTTP 响应的状态码。200 表示成功，405 表示方法不被允许。
• res.json(data)：返回 JSON 格式的响应数据。

4. 动态路由

Next.js 还支持动态 API 路由。你可以通过在文件名中使用方括号 [] 来创建动态路由。例如，pages/api/user/[id].js 将匹配 /api/user/1、/api/user/2 等路径。

// pages/api/user/[id].js
export default function handler(req, res) {
  const { id } = req.query;
  res.status(200).json({ userId: id });
}

在这个示例中，req.query 包含了路由的动态部分。例如，访问 /api/user/123 时，req.query.id 将是 123。

5. 中间件和高级用法

你还可以在 API 路由中使用中间件来处理请求，例如验证、日志记录等。Next.js 的 API 路由与 Express.js 类似，因此你可以使用类似的中间件模式。

// pages/api/with-middleware.js
import { withMiddleware } from 'some-middleware-library';

const handler = (req, res) => {
  res.status(200).json({ message: 'Middleware applied' });
};

export default withMiddleware(handler);

在这个示例中，withMiddleware 是一个假设的中间件函数，它可以在处理请求之前执行一些逻辑。

6. 注意事项

• 安全性：在处理 API 请求时，确保对输入进行验证和清理，以防止安全漏洞。
• 性能：避免在 API 路由中执行耗时的操作，如复杂的数据库查询或文件操作，以免影响性能。
• 部署：Next.js 的 API 路由在部署时会被自动处理，无需额外配置。