如何使用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 }) }

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

在动态页面中,您需要导入useRouternext/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.queryreq.method我们已经看到,我们可以通过引用访问cookiereq.cookies,请求正文在req.body

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

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

免费下载我的Next.js手册


接下来的更多教程: