Next.js 中的 pages/api 目录有什么作用？

推荐答案

在 Next.js 中，pages/api 目录用于创建 API 路由。这些路由允许你在 Next.js 应用程序中编写服务器端代码，处理 HTTP 请求并返回响应。每个放在 pages/api 目录下的文件都会自动映射为一个 API 端点，可以通过 /api/filename 路径访问。

本题详细解读

1. pages/api 目录的作用

pages/api 目录是 Next.js 提供的一个特殊目录，用于定义 API 路由。这些路由允许你在 Next.js 应用中编写服务器端逻辑，处理 HTTP 请求（如 GET、POST 等）并返回 JSON 数据或其他响应。

2. 如何创建 API 路由

在 pages/api 目录下创建一个文件，例如 hello.js，并导出一个默认的异步函数。这个函数将处理传入的请求并返回响应。

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

3. 访问 API 路由

创建好 API 路由后，你可以通过 /api/hello 路径访问它。例如，在浏览器中访问 http://localhost:3000/api/hello，将会返回 { "message": "Hello, world!" }。

4. 请求和响应对象

在 API 路由中，req 和 res 是 Node.js 的 http.IncomingMessage 和 http.ServerResponse 对象。你可以使用它们来读取请求数据、设置响应头、发送响应等。

5. 动态路由

你还可以在 pages/api 目录下创建动态路由。例如，创建一个文件 pages/api/[id].js，可以通过 /api/123 访问，并在 req.query 中获取 id 参数。

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

6. 中间件支持

Next.js 的 API 路由支持使用中间件来处理请求。你可以使用 next-connect 或其他中间件库来简化请求处理逻辑。

7. 部署

当你部署 Next.js 应用时，pages/api 目录下的 API 路由会自动部署为无服务器函数（Serverless Functions），这意味着它们会根据请求动态扩展，而不需要管理服务器。

通过 pages/api 目录，Next.js 提供了一种简单而强大的方式来构建全栈应用，将前端和后端逻辑无缝集成在同一个项目中。