Categories: Next.js教程

Next.js教程:API路由简介

先来看下实例:

API 路由为使用 Next.js 构建你自己的 API 提供了一种解决方案。

pages/api 目录下的任何文件都将作为 API 端点映射到 /api/*,而不是 page。这些文件只会增加服务端文件包的体积,而不会增加客户端文件包的大小。

例如,以下 API 路由 pages/api/user.js 返回 json 格式的数据,并且状态码为 200

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

为了使 API 路由能正常工作,你需要导出(export)一个默认函数(即 请求处理器),并且该函数能够接收以下参数:

  • req: 一个 http.IncomingMessage 实例,以及一些预建的中间件,可以在 此处 查看
  • res: 一个 http.ServerResponse 实例,以及一些辅助函数,可以在 [此处]](/docs/api-routes/response-helpers.md) 查看

要处理 API 路由的不同 HTTP 方法,可以在请求处理器中使用 req.method,如下所示:

export default function handler(req, res) {
  if (req.method === 'POST') {
    // Process a POST request
  } else {
    // Handle any other HTTP method
  }
}

要用 fetch 函数请求 API 端点,请查看本章开头列出的任何一个示例。

Use Cases

对于新项目,您可以使用API​​路由构建整个API。如果您有现有的API,则无需通过API路由将调用转发给API。API路由的其他一些用例是:

  • 屏蔽外部服务的网址(例如/api/secret代替https://company.com/secret-url
  • 在服务器上使用环境变量来安全地访问外部服务。

注意事项

  • API 路由 未指定 CORS 标头意味着它们在默认情况下 仅是同源(same-origin)策略。你可以通过使用 cors 中间件 包装出一个请求处理器来自定义此行为。
  • API路由不能与 next export 一起使用

terry

这个人很懒,什么都没有留下~

Share
Published by
terry

Recent Posts

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

5 天 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

2 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

2 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

3 周 ago

聊聊React和Vue组件更新的实现及区别

React 和 Vue 都是当…

3 周 ago