next.js 多级路由_如何使用Next.js API路由-CSDN博客

next.js 多级路由

In addition to creating page routes, which means pages are served to the browser as Web pages, Next.js can create API routes.

除了创建页面路由 (这意味着将页面作为网页提供给浏览器)之外，Next.js还可创建API路由 。

This is a very interesting feature because it means that Next.js can be used to create a frontend for data that is stored and retrieved by Next.js itself, transferring JSON via fetch requests.

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

API routes live under the /pages/api/ folder and are mapped to the /api endpoint.

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

This feature is very useful when creating applications.

创建应用程序时，此功能非常有用。

In those routes, we write Node.js code (rather than React code). It’s a paradigm shift, you move from the frontend to the backend, but very seamlessly.

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

Say you have a /pages/api/comments.js file, whose goal is to return the comments of a blog post as JSON.

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

Say you have a list of comments stored in a comments.json file:

假设您有一个存储在comments.json文件中的comments.json列表：

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

Here’s a sample code, which returns to the client the list of comments:

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

import comments from './comments.json'

export default (req, res) => {
  res.status(200).json(feeds)
}

It will listen on the /api/commments URL for GET requests, and you can try calling it using your browser:

它将在/api/commments URL上侦听GET请求，您可以尝试使用浏览器调用它：

API routes can also use dynamic routing like pages, use the [] syntax to create a dynamic API route, like /pages/api/comments/[id].js which will retrieve the comments specific to a post id.

API路由也可以使用动态路由，例如页面，使用[]语法创建动态API路由，例如/pages/api/comments/[id].js ，它将检索特定于帖子ID的注释。

Inside the [id].js you can retrieve the id value by looking it up inside the req.query object:

在[id].js内部，您可以通过在req.query对象中查找id值来检索id值：

import comments from '../comments.json'

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

Heres you can see the above code in action:

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

In dynamic pages, you’d need to import useRouter from next/router, then get the router object using const router = useRouter(), and then we’d be able to get the id value using router.query.id.

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

In the server-side it’s all easier, as the query is attached to the request object.

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

If you do a POST request, all works in the same way - it all goes through that default export.

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

To separate POST from GET and other HTTP methods (PUT, DELETE), lookup the req.method value:

要将POST与GET和其他HTTP方法(PUT，DELETE) req.method ，请查找req.method值：

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

In addition to req.query and req.method we already saw, we have access to cookies by referencing req.cookies, the request body in req.body.

除了req.query和req.method我们已经看到了，我们必须通过引用访问饼干req.cookies ，请求体req.body 。

Under the hoods, this is all powered by Micro, a library that powers asynchronous HTTP microservices, made by the same team that built Next.js.

在幕后，这些全部由Micro提供支持， Micro是一个支持异步HTTP微服务的库，该库由构建Next.js的同一团队制作。

You can make use of any Micro middleware in our API routes to add more functionality.

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