Next.js 是一个基于 React 的 Web 开发框架，它通过扩展 React 的功能，使开发人员能够高效构建全栈网络应用程序。
这些扩展功能包括静态网站生成（SSG）、服务器端渲染（SSR）、自动化的代码拆分和打包，以及简单而强大的路由系统。
本篇文章将向你详细介绍 Next.js 的动态 API 路由，包括其概念、创建方法以及如何扩展其功能。
Next.js 路由系统简介
Next.js 的路由系统是其框架中的一个核心功能，它提供了一种直观且高效的方式来管理 Web 应用程序中的页面导航。
Next.js 的路由系统是基于文件系统的，这意味着每个页面都是一个独立的文件，存放在pages目录下。Next.js 会根据这些文件自动生成路由，而无需像其他路由库（如react-router-dom）那样显式地定义路由表。
例如，如果在pages目录下创建了一个名为about.js的文件，那么访问/about路径时，Next.js 就会自动加载并渲染about.js文件中的内容。
Next.js 中的路由系统一个强大特性是，允许你在项目中的pages/api目录下创建 API 路由，用于处理 HTTP 请求并返回 JSON 数据。
如何创建 API 路由
要创建 API 路由，需要在 pages 文件夹中创建一个名为 api 的文件夹。在 /pages/api 目录中的任何文件都将被视为 API 路由，而不是页面。
例如，我们可以在 pages 文件夹中创建一个名为 api 的文件夹，然后在其中创建一个名为 start.js 的文件，并添加以下代码：
// pages/api/start.js
export default function handler(req, res) {
res.status(200).json({ message: '请求成功' });
}
以上代码中，我们已经成功构建了一个 API 路由。现在，可以通过 /api/start 来访问该路由。此路由能够接受 HTTP 请求，并向客户端返回相应的响应。
在 Next.js 的 API 路由定义中，req（请求对象）和res（响应对象）是两个非常重要的参数，分别代表 HTTP 请求和 HTTP 响应。通过req参数允许我们访问请求相关信息（如请求头、查询参数、请求体等）以及通过res发送响应给客户端。
借助req参数，我们可以构建一个专门处理特定 HTTP 请求方法的 API 路由。为此，我们需要创建一个名为 get.js 的文件，并在该文件中添加以下代码：
// pages/api/get.js
export default function handler(req, res) {
if (req.method === 'GET') {
res.status(200).json({ message: '这是一个 GET 请求' });
} else {
res.status(405).json({ message: '不支持该请求方法' });
}
}
我们现在可以通过 /api/get 访问此 API 路由，它只会处理 HTTP get 请求。
此外，我们还可以创建一个支持处理多种 HTTP 请求方法的 API 路由。为此，创建一个名为 all.js 的文件，并在其中添加以下代码：
// pages/api/all.js
function handler(req, res) {
if (req.method === 'GET') {
// Handle GET request
res.status(200).json({ message: '这是一个 GET 请求' });
} else if (req.method === 'POST') {
// Handle POST request
res.status(200).json({ message: '这是一个 POST 请求' });
} else if (req.method === 'PUT') {
// Handle PUT request
res.status(200).json({ message: '这是一个 PUT 请求' });
} else (req.method === 'DELETE') {
// Handle DELETE request
res.status(200).json({ message: '这是一个 DELETE 请求' });
}
}
我们现在可以通过 api/all 访问此 API 路由，该 API 路由支持四种 HTTP 请求方法（GET、POST、PUT 和 DELETE）。
如何创建动态 API 路由
动态路由是指在路由路径中包含可变部分的参数。在 Next.js 中，这些可变部分用方括号[]来定义，例如/posts/[id]，其中[id]就是一个动态路由参数。
例如，如果我们需要构建一个根据 ID 获取相关作者数据的动态 API 路由，可以先创建一个名为 authors 的新文件夹，并在该文件夹内创建一个名为 [id].js 的文件，然后将以下代码添加到该文件中：
// api/authors/[id].js
export default function handler(req, res) {
const { id } = req.query;
if (req.method === 'GET') {
res.status(200).json({ id, message: '成功获取作者数据' });
}
}
在以上代码中，API 路由格式为 /author/[id]。当传入参数 { id: '234' } 时，该路由将成功与 /author/234 匹配。
此外，借助req参数，我们还可以让动态 API 路由根据不同的 HTTP 请求方法返回不同内容。要做到这一点，请删除[id].js文件中的所有代码，改为以下代码：
// api/authors/[id].js
export default function handler(req, res) {
const { id } = req.query;
if (req.method === 'GET') {
res.status(200).json({ id, message: '成功获取作者数据' });
} else if (req.method === 'POST') {
res.status(200).json({ id, message: '作者数据提交成功' });
} else if (req.method === 'PUT') {
res.status(200).json({ id, message: '作者数据更新成功' });
} else if (req.method === 'DELETE') {
res.status(200).json({ id, message: 'Author data deleted successfully' });
}
}
Catch-all segments
这个术语用于描述 Next.js 路由功能中的一个特定模式，允许我们匹配和捕获 URL 路径中任意数量的路径段（segments）。
要创建一个能捕捉所有片段的动态 API 路由，请创建一个名为 store 的文件夹，并在 store 文件夹中创建一个名为 [...gadgets].js 的文件。然后添加以下代码：
// api/store/[...gadgets].js
export default function handler(req, res) {
const { gadget } = req.query;
if (req.method === 'GET') {
res.status(200).json({ id, message: '成功获取数据' });
}
}
以上代码中的 API 路由格式为 pages/api/store/[...gadgets].js，它可以匹配/store/phones、/store/phones/iphones、/store/phones/iphones/iphone15等任何路径。
Optional catch-all segments
我们还可以将上一节的 "Catch-all segments" 动态 API 路由设置为可选项，请将文件名（包括后缀）使用方括号括起来，如下所示：[[...store]].js]。这样，它不仅能匹配/store/phones、/store/phones/iphones、/store/phones/iphones/iphone15，还能匹配/store。
结语
通过本文我们将了解如何在 Next.js 中创建动态 API 路由。希望对你有所帮助。
