如果觉得这篇文章对你有所帮助，希望能点个赞加个关注

Next.js 是基于 React 的 Web 开发框架，旨在帮助开发者高效的构建生产级应用，支持静态生成和服务器端渲染，并且内置了众多实用功能。

Next.js 采用基于文件的路由系统，并提供 API 路由功能，允许我们在 pages 目录中直接构建 API ，从而无需创建额外的后端项目。这使得 Next.js 实现 RESTful 或 GraphQL API 变得异常简单。

在本文中，我们将学习如何使用 Next.js 的 API 路由系统，并详细解释其核心概念，以及探讨如何在实际应用中如何高效利用这一功能。

Next.js API 路由简介

API（Application Programming Interface，应用程序编程接口）是实现不同应用程序之间相互通信的桥梁，它允许一个应用程序能够访问另一个应用程序的特定功能和数据，从而实现数据交换或功能调用。

在现代 Web 开发中，构建依赖外部数据源提供和存储数据的应用程序时，通常情况下，需要开发两个应用：一个是在浏览器中运行的客户端应用，负责与用户交互；另一个是在服务器上运行的服务器端应用，负责管理数据的请求和存储。这两个应用通过 API 进行通信，实现数据的交换和共享。

然而，Next.js 的 API 路由功能简化了全栈 Web 开发，消除了对独立的服务器端应用的依赖。这一特性允许开发者可以直接在 Next.js 应用中实现对数据库的访问和存储逻辑，就像独立的服务器端应用实现的一样。接下来，我们将深入探讨如何快速上手这一强大的开发方式。

在 Next.js 中创建 API 路由

在 Next.js 中，创建 API 路由的方式与创建页面路由类似，主要区别在于 API 路由文件需放置于 pages 文件夹内的 api 子文件夹中。位于 pages/api 文件夹下的所有文件都会被自动识别为 API 路由。例如，如果 pages/api 中存在一个名为 example.js 的文件，则可以通过发送请求到 /api/example 路径来访问该 API 路由。

让我们看一个例子：

当我们使用 create-next-app 创建了一个 Next.js 项目后，打开项目根目录下的 pages 文件夹，通常会看到一个名为 api 的子文件夹（如果该文件夹不存在，你需要自行创建它）。这个 api 文件夹专门用于存放 Next.js 的 API 路由文件，在这些文件中，我们可以定义服务器端逻辑，以响应来自客户端的请求。作为示例，我们可能会发现一个名为 hello.js 的文件，它展示了如何创建一个简单的 API 路由。这个文件通常包含以下内容：

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: "John Doe" });
}

在浏览器中访问 localhost:3000/api/hello 或通过其他方式向该地址发送 GET 请求，我们将接收到以下 JSON 格式的响应数据：

下面是对上述示例代码的解释说明。

每个 API 路由文件都必须导出一个默认函数，用于处理发送到该端点的请求。该函数接受两个参数：

req：http.IncomingMessage 的一个实例，它被用来表示从客户端收到的 HTTP 请求，提供了很多有用的属性，例如 req.body 、req.query 等，用于解析传入的请求信息。

res：http.ServerResponse 的一个实例，它用于表示从服务器端发送到客户端的 HTTP 响应，提供了很多有用的方法，例如 res.send 、res.body 等，用于向客户端发送响应信息。

如果你此前使用过 Express.js ，那么你应该熟悉这些属性和方法。

在我们的示例中，我们导出了一个名为 handler 的默认函数（可以根据需要自由命名），用于处理 HTTP 请求。在此函数中，我们利用 res （服务器响应对象）来设置 HTTP 状态码，并返回 JSON 格式的数据作为响应内容。

默认情况下，不论使用哪种 HTTP 请求方法（如GET、PUT、DELETE等），同一 API 路由都会返回相同的响应。为了根据不同 HTTP 请求方法返回不同的响应，我们可以利用 switch 语句（当然，if/else 结构同样适用，选择哪种方式完全取决于个人偏好）来编写更灵活的处理函数，示例如下：

// pages/api/hello.js
export default function handler(req, res) {
  const requestMethod = req.method;
  const body = JSON.parse(req.body);
  switch (requestMethod) {
    case "POST":
      res
        .status(200)
        .json({ message: `你提交了以下数据：${body}` });
    // 处理其他 HTTP 方法
    default:
      res.status(200).json({ message: "欢迎访问 API 路由！" });
  }
}

下面是另一个示例，演示了如何在应用程序中通过 POST 方法将表单数据发送到给定 API 路由，以便服务器存储数据。

在 pages/post.js 文件中，负责将表单数据通过 POST 方法发送至 api/post API 路由，代码如下：

// pages/post.js
import { useState } from "react";
const Post = () => {
  const [title, setTitle] = useState("");
  const [post, setPost] = useState("");
  function handleSubmit(e) {
    e.preventDefault();
    const postData = async () => {
      const data = {
        title: title,
        post: post,
      };
      const response = await fetch("/api/post", {
        method: "POST",
        body: JSON.stringify(data),
      });
      return response.json();
    };
    postData().then((data) => {
      alert(data.message);
    });
  }
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="Title">标题label>
        <input
          id="title"
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
      div>
      <div>
        <label htmlFor="post">正文label>
        <input
          id="post"
          type="text"
          value={post}
          onChange={(e) => setPost(e.target.value)}
        />
      div>
      <button type="submit">提交button>
    form>
  );
};
export default Post;

在 pages/api/post.js 文件中，负责接收客户端提交的表单数据，代码如下：

// pages/api/post.js
export default function handler(req, res) {
  const { title, post } = JSON.parse(req.body);
  // 此处将提交数据保存到数据库
  res.status(200).json({ message: "帖子创建成功！" });
}

动态 API 路由

Next.js 的 API 路由同样支持动态路由，这与动态页面路由的实现方式类似。利用动态 API 路由，我们可以根据不同的查询参数，向客户端发送特定的响应。下面是一个示例展示了其用法。

在项目的 /pages/api 文件夹中创建一个名为 trivia 的文件夹，然后在 trivia 文件夹中创建一个名为 [number].js 的文件。此时的文件夹结构如下所示：pages/api/trivia/[number].js 。

在此示例中，我们将使用 superagent 作为 HTTP 客户端，从外部地址 / 获取与路由查询数字相关的一个随机事实，并作为我们的 API 路由的响应内容。

我们可以使用以下命令进行安装：

npm install superagent

接下来，将以下代码添加到 [number].js：

// pages/api/trivia/[number].js
const superagent = require("superagent");
export default function handler(req, res) {
  const number = Number(req.query.number);
  if (isNaN(number) || typeof number !== "number") {
    res.status(400).send("无效请求！");
  }
  superagent.get(`http://numbersapi.com/${number}`).then((response) => {
    res.status(200).send(response.text);
  });
}

现在，如果我们访问 :3000/api/trivia/34 （你可以使用任意数字构建该URL），将会收到一条根据该数字生成的随机事实的内容。如果使用的是无效数字，我们将收到一个 400 错误请求的响应。

自定义配置

Next.js 的 API 路由系统不仅拥有强大的功能，还支持自定义配置。具体而言，Next.js 允许在每个 API 路由文件中通过导出一个 config 对象来覆盖该路由的默认配置，其中 config 对象的 api 属性应该包含针对 API 路由配置的专属选项。

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: "John Doe" });
}
export const config = {
  api: {
    bodyParser: false, // 默认启用正文解析。若设为false，则禁用此功能，允许你直接以流（stream）或原始体（raw-body）形式访问请求正文。
    responseLimit: false, // 自动启用，默认限制响应正文发送量为4MB。
    externalResolver: true, // 当路由由外部解析器（如Express.js或Connect）处理时，可禁用对未解析请求的警告，默认不启用此功能。
  },
};