Next.js-Api路线

概览

Next.js是一个React框架，使得在服务器上渲染React应用程序非常容易。其中的API路由功能可以帮助开发人员创建自己的API端点。

API路由

使用Next.js的API路由非常简单，只需在pages目录下创建一个名为/api/的文件夹，再在该文件夹中创建.js文件即可创建一个API端点。

以下是一个简单的示例：

// pages/api/hello.js
export default (req, res) => {
  res.status(200).json({ text: 'Hello' })
}

即在浏览器地址栏中输入 /api/hello 即可返回 { text: 'Hello' }。

该文件可以包含任何有效的Node.js代码，包括用于处理数据库查询或处理身份验证逻辑的代码。

请注意，由于该文件是在服务器端执行的，因此您无法从此处使用浏览器API或DOM。

动态API路由

在API路由中，有时您需要处理动态请求，例如：/api/post/[pid]这样的请求，其中[pid]表示动态pid参数。 Next.js的API路由很容易处理这些动态请求。

以下是一个示例：

// pages/api/post/[pid].js
export default (req, res) => {
  const {
    query: { pid },
  } = req

  res.end(`Post: ${pid}`)
}

即在浏览器地址栏中输入 /api/post/123 即可返回 Post: 123。

或者，您也可以从query对象中获取路由参数。

以下是获取查询参数的另一个示例：

// pages/api/post/[pid]/[comment].js
export default (req, res) => {
  const {
    query: { pid, comment },
  } = req

  res.end(`Post: ${pid}, Comment: ${comment}`)
}

即在浏览器地址栏中输入 /api/post/123/abc 即可返回 Post: 123, Comment: abc。

中间件

Next.js的API路由还允许您使用中间件。这可以帮助您更轻松地扩展API功能。中间件是一个函数，它在请求到达API函数之前运行一些逻辑。

以下是中间件的示例：

// middleware.js
const middleware = handler => (req, res) => {
  console.log('Middleware is running')
  return handler(req, res)
}

export default middleware

// pages/api/hello.js
import middleware from '../../middleware'

const handler = (req, res) => {
  res.status(200).json({ text: 'Hello' })
}

export default middleware(handler)

即在请求到达pages/api/hello.js之前，先执行middleware.js中定义的中间件。如果想执行多个中间件的话可以用类似的方法链接起来。

路由响应头

你可以在API路由中设置响应头。

以下是一个示例：

// pages/api/hello.js
export default (req, res) => {
  res.setHeader('Set-Cookie', ['a=1', 'b=2'])
  res.status(200).json({ text: 'Hello' })
}

隐藏API路由

您可以将API路由文件放入不以/api目录或文件名开头的文件夹或文件中，以隐藏API路由。

例如，在pages/blog/*中的路由不会被解析为API路由。

结论

利用Next.js API路由功能，可以轻松创建API端点并连接自定义后端逻辑。在服务端渲染的同时，提供灵活的API防范，帮助开发人员更好地管理项目，并严格遵循API接口协议。