API 路由

概述

Next.js 提供了一个内置的 API 路由功能，允许开发者直接在项目中创建后端 API 端点，而无需单独设置 Node.js 服务器。这些 API 路由位于 pages/api 目录下，Next.js 会自动将它们映射为 /api/* 路由。

创建 API 路由

  1. 在 pages/api 目录下创建文件，例如 hello.js。
  2. 默认导出请求处理函数，接收 req (请求对象) 和 res (响应对象) 参数。
// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' })
}

请求方法处理

可以通过 req.method 判断请求方法，实现 RESTful API：

export default function handler(req, res) {
  switch (req.method) {
    case 'GET':
      res.status(200).json({ message: 'GET request' })
      break
    case 'POST':
      res.status(201).json({ message: 'POST request' })
      break
    default:
      res.setHeader('Allow', ['GET', 'POST'])
      res.status(405).end(`Method ${req.method} Not Allowed`)
  }
}

动态 API 路由

与页面路由类似，可以通过文件名实现动态路由：

pages/api/
  posts/
    [id].js

// pages/api/posts/[id].js
export default function handler(req, res) {
  const { id } = req.query
  res.status(200).json({ postId: id })
}

实用功能

  1. 中间件支持：可以在 API 路由中使用中间件处理逻辑
  2. TypeScript 支持：自动获得完整的类型定义
  3. 环境变量：安全访问服务端环境变量
  4. CORS 支持：通过配置实现跨域请求

注意事项

  1. API 路由不会被打包到客户端代码中
  2. 适合中小型项目，大型项目可能需要单独的后端服务
  3. 默认配置了 bodyParser，可以自动解析请求体

示例：完整的 CRUD API

// pages/api/tasks.js
let tasks = [
  { id: 1, title: 'Learn Next.js', completed: false }
]

export default function handler(req, res) {
  const { method } = req

  switch (method) {
    case 'GET':
      res.status(200).json(tasks)
      break
    case 'POST':
      const newTask = {
        id: tasks.length + 1,
        title: req.body.title,
        completed: false
      }
      tasks.push(newTask)
      res.status(201).json(newTask)
      break
    // 其他方法实现...
    default:
      res.setHeader('Allow', ['GET', 'POST', 'PUT', 'DELETE'])
      res.status(405).end(`Method ${method} Not Allowed`)
  }
}

通过 API 路由，Next.js 实现了前后端一体化的开发体验，极大简化了全栈应用的开发流程。

Last Updated::