如何使用Next.js API路由

了解Next.js提供的这项强大技术，以在Next.js应用程序中创建API端点

除了创造页面路线，这意味着页面作为网页提供给浏览器，Next.js可以创建API路线。

这是一个非常有趣的功能，因为这意味着Next.js可用于为Next.js本身存储和检索的数据创建前端，并通过获取请求传输JSON。

API路由位于/pages/api/文件夹，并映射到/api端点。

此功能是非常在创建应用程序时很有用。

在这些路由中，我们编写Node.js代码（而不是React代码）。这是一种范式转换，您可以从前端移动到后端，但是非常无缝。

说你有一个/pages/api/comments.js文件，其目标是将博客文章的评论以JSON格式返回。

假设您有一个评论列表，该评论列表存储在comments.json文件：

[
  {
    "comment": "First"
  },
  {
    "comment": "Nice post"
  }
]

这是一个示例代码，它将注释列表返回给客户端：

import comments from './comments.json'
export default (req, res) => {
res.status(200).json(feeds)
}

它将听/api/commmentsGET请求的网址，您可以尝试使用浏览器调用它：

API路由也可以使用动态路由像网页一样，请使用[]创建动态API路由的语法，例如/pages/api/comments/[id].js它将检索特定于帖子ID的评论。

在 - 的里面[id].js您可以检索id通过在内部查找来获得价值req.query目的：

import comments from '../comments.json'
export default (req, res) => {
res.status(200).json({ post: req.query.id, comments })
}

在这里，您可以看到上面的代码正在运行：

在动态页面中，您需要导入useRouter从next/router，然后使用获取路由器对象const router = useRouter()，然后我们就可以获取id值使用router.query.id。

在服务器端，这很容易，因为查询已附加到请求对象上。

如果您执行POST请求，则所有请求均以相同的方式工作-所有操作均通过该默认导出进行。

要将POST与GET和其他HTTP方法（PUT，DELETE）分开，请查找req.method价值：

export default (req, res) => {
  switch (req.method) {
    case 'GET':
      //...
      break
    case 'POST':
      //...
      break
    default:
      res.status(405).end() //Method Not Allowed
      break
  }
}

此外req.query和req.method我们已经看到，我们可以通过引用访问cookiereq.cookies，请求正文在req.body。

在引擎盖下，这一切都由微是一个由支持Next.js的团队开发的支持异步HTTP微服务的库。

您可以在我们的API路由中使用任何Micro中间件来添加更多功能。

免费下载我的Next.js手册

如何使用Next.js API路由

了解Next.js提供的这项强大技术，以在Next.js应用程序中创建API端点

接下来的更多教程：