如何在Next.js中创建动态API路由
Next.js是一个基于React的框架，可以让开发者通过扩展最新的React功能来创建全栈Web应用Next可以帮助您为您的React应用程序添加额外的功能和优化，如静态网站生成（SSG）、服务器端渲染（SSR）、自动代码拆分和打包，以及动态API路由
Next.js是一个基于React的框架，它能够通过扩展最新的React功能来帮助开发人员创建全栈Web应用程序。
Next可以帮助您为React应用程序添加附加功能和优化，例如静态网站生成（SSG）、服务器端渲染（SSR）、自动代码拆分和捆绑以及动态API路由。
在本文中，您将了解Next.js中的动态API路由：它们是什么，如何创建它们以及如何扩展它们的功能。
什么是API路由？
在了解API路由是什么之前，您应该知道什么是路由和API。
路由是一条嵌套文件夹的路径。Next.js使用页面路由器在Web应用程序中导航到各个页面。Next.js应用程序代码中的pages目录中的每个文件都代表Web应用程序上的一个页面。
例如，如果您在pages文件夹中创建一个checkout.js文件，并在浏览器中访问URL：”your-app’s-domain-name/checkout”，您将看到渲染的checkout.js文件的内容。
API（应用程序编程接口）在两台计算机或两个软件之间提供通信的手段。在Web应用程序中，API用于客户端和服务器之间的通信。
API路由是将来自客户端的传入请求定向到处理请求的适当服务器资源的URL。
Next.js中的API路由使您能够创建作为Node.js无服务器函数的API端点。这些端点允许您进行HTTPS请求，并与数据库进行通信。
如何创建API路由
要创建API路由，您将在pages文件夹中创建一个名为API的文件夹。/pages/api目录中的任何文件将被视为API路由，而不是页面。
例如，您可以在pages文件夹中创建一个名为API的文件夹，然后在其中创建一个名为start.js的文件，其中包含以下代码：
// pages/api/start.jsexport default function handler(req, res) { res.status(200).json({ message: '请求成功' });}现在您已经创建了一个API路由。您可以通过URL /api/start访问此API路由。您可以使用它来处理HTTP请求并将响应发送回客户端。
请求参数是HTTP传入消息的一个实例，以及一些预建中间件。响应参数是HTTP服务器响应的一个实例，以及一些辅助函数。
您可以创建一个API路由来处理一个HTTP方法。要这样做，您需要创建一个名为get.js的新文件。然后，您可以将以下代码添加到文件中：
// pages/api/get.jsexport default function handler(req, res) { if (req.method === 'GET') { res.status(200).json({ message: '这是一个GET请求' }); } else { res.status(405).json({ message: '不允许的方法' }); }}此API路由可以通过URL /api/get访问，它只会处理HTTP的get请求。
您还可以创建一个API路由来处理多个HTTP方法。要这样做，创建一个名为all.js的新文件，并将以下代码放入其中：
// pages/api/all.jsfunction handler(req, res) { if (req.method === 'GET') { // 处理GET请求 res.status(200).json({ message: '这是一个GET请求' }); } else if (req.method === 'POST') { // 处理POST请求 res.status(200).json({ message: '这是一个POST请求' }); } else if (req.method === 'PUT') { // 处理PUT请求 res.status(200).json({ message: '这是一个PUT请求' }); } else (req.method === 'DELETE') { // 处理DELETE请求 res.status(200).json({ message: '这是一个DELETE请求' }); }}此API路由可以通过URL /api/all访问，它可以处理四个HTTP方法（GET、POST、PUT和DELETE）。
如何创建动态API路由
Next.js允许开发人员创建动态路由。动态路由是路由的段名在事先不确定的路由。它们是根据动态数据创建的。
动态API路由是动态路由的一种形式，它允许您在路由路径中创建具有动态段的API端点。
这些段在请求时填充或在构建时预渲染。它们还可以被浏览器缓存，这可以提高对频繁访问的页面的性能。这使得它们成为对预计有大量流量的应用程序的良好选择。
动态路由语法
在 Next.js 中，有一种特殊的语法用于创建动态 API 路由。Next.js 允许你通过将文件名放在方括号中来创建动态 API 路由。
要为一个使用动态 ID 获取作者数据的图书馆 API 创建动态 API 路由，你可以先创建一个名为 authors 的新文件夹，然后在其中创建一个名为 [id].js 的文件，并添加以下代码：
// api/authors/[id].jsexport default function handler(req, res) { const { id } = req.query; if (req.method === 'GET') { res.status(200).json({ id, message: '作者数据获取成功' }); }}上述代码的 API 路由将是 /author/[id]，如果传入参数 { id: '234' }，它将匹配 URL：/author/234。
你可以让你的动态 API 路由处理不同的 HTTP 方法。为此，删除你的 [id].js 文件中的代码，然后将以下代码放入其中：
// api/authors/[id].jsexport 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: '作者数据删除成功' }); }}捕获所有片段
你还可以将子参数传递给你的动态 API 路由。为此，你需要扩展你的动态 API 路由，以便能够通过在方括号中文件名前面添加省略号来捕获传递给它的所有后续片段。这样确保 API 路由可以传递多个子参数。
要创建一个捕获所有片段的动态 API 路由，创建一个名为 store 的文件夹，然后在 store 文件夹中创建一个名为 [...gadgets].js 的文件，然后添加以下代码：
// api/store/[...gadgets].jsexport 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。如果传入参数 { gadget: ['phones', 'iphones', 'iphone15'] }，它将匹配以下 URL： /store/phones 或 /store/phones/iphones 或 /store/phones/iphones/iphone15。
可选的捕获所有片段
你可以使捕获所有后续片段的动态 API 路由变为可选。当你将其设为可选时，它不仅可以匹配 URL 路径的所有后续片段，还可以匹配主 URL 路径。
要使前面一节中介绍的捕获所有后续片段的动态 API 路由可选，只需在文件名中加上方括号，像这样：[[...store]].js。可选的捕获所有片段不仅可以匹配这些 URL：/store/phones 或 /store/phones/iphones 或 /store/phones/iphones/iphone15 – 它还可以匹配 /store 这样的 URL。
结论
本文帮助你了解了 Next.js 中的动态 API 路由，包括它们是什么，它们的用途以及如何创建它们。
Leave a Reply