Next.js API路由[编辑 | 编辑源代码]

介绍[编辑 | 编辑源代码]

Next.js API路由是Next.js框架提供的一项核心功能，允许开发者在同一项目中创建后端API端点，无需单独配置服务器。这些API路由位于pages/api目录下，每个文件会自动映射为一个HTTP端点，支持常见的请求方法（GET、POST、PUT等）。API路由基于Node.js运行时，适合处理表单提交、数据库操作或第三方服务集成等场景。

基本结构[编辑 | 编辑源代码]

Next.js API路由的文件系统遵循以下规则：

文件路径：pages/api/目录下的.js或.ts文件
路由映射：文件路径直接对应URL路径（例如pages/api/user.js → /api/user）
默认导出：每个文件需导出一个请求处理函数，接收req（请求对象）和res（响应对象）参数

示例代码[编辑 | 编辑源代码]

// pages/api/hello.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ message: 'Hello from Next.js!' })
  } else {
    res.setHeader('Allow', ['GET'])
    res.status(405).end(`Method ${req.method} Not Allowed`)
  }
}

输入：GET /api/hello
输出：{ "message": "Hello from Next.js!" }

请求方法处理[编辑 | 编辑源代码]

API路由可通过req.method区分HTTP方法，实现RESTful接口：

// pages/api/tasks.js
export default function handler(req, res) {
  switch (req.method) {
    case 'GET':
      // 获取任务列表
      res.status(200).json(tasks)
      break
    case 'POST':
      // 创建新任务
      const newTask = JSON.parse(req.body)
      tasks.push(newTask)
      res.status(201).json(newTask)
      break
    default:
      res.setHeader('Allow', ['GET', 'POST'])
      res.status(405).end()
  }
}

动态路由[编辑 | 编辑源代码]

支持动态参数，文件名使用[param]语法：

// pages/api/users/[id].js
export default function handler(req, res) {
  const { id } = req.query
  res.status(200).json({ userId: id })
}
</code>

'''访问'''：<code>/api/users/123</code> → 输出<code>{ "userId": "123" }</code>

== 中间件支持 ==
可通过高阶函数实现中间件逻辑：

<syntaxhighlight lang="javascript">
// 身份验证中间件示例
const withAuth = (handler) => (req, res) => {
  const token = req.headers.authorization
  if (!token) return res.status(401).end()
  return handler(req, res)
}

export default withAuth((req, res) => {
  res.status(200).json({ secretData: 'Authenticated!' })
})

配置选项[编辑 | 编辑源代码]

通过导出config对象自定义行为：

export const config = {
  api: {
    bodyParser: false, // 禁用默认body解析
    externalResolver: true, // 声明使用外部解析器
  }
}

实际应用案例[编辑 | 编辑源代码]

场景：构建一个天气查询API

// pages/api/weather/[city].js
import axios from 'axios'

export default async function handler(req, res) {
  const { city } = req.query
  const API_KEY = process.env.WEATHER_API_KEY
  
  try {
    const response = await axios.get(
      `https://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=${city}`
    )
    res.status(200).json(response.data)
  } catch (error) {
    res.status(500).json({ error: 'Failed to fetch weather data' })
  }
}

性能优化[编辑 | 编辑源代码]

静态生成：适合不常变的数据，通过getStaticProps预渲染
动态渲染：实时数据使用getServerSideProps或直接API调用

数学表示[编辑 | 编辑源代码]

API响应时间模型（单位：毫秒）： $T_{t o t a l} = T_{n e t w o r k} + T_{p r o c e s s i n g} + \sum_{i = 1}^{n} (T_{d b_{i}})$

常见问题[编辑 | 编辑源代码]

CORS问题：默认同源策略，需手动配置CORS头
环境变量：使用process.env访问，需在next.config.js中配置
冷启动：Serverless函数首次调用可能有延迟

进阶技巧[编辑 | 编辑源代码]

1. 批量请求：使用Promise.all处理并行请求 2. 类型安全（TypeScript）：

   import type { NextApiRequest, NextApiResponse } from 'next'
   
   type ResponseData = {
     data?: string
     error?: string
   }
   
   export default function handler(
     req: NextApiRequest,
     res: NextApiResponse<ResponseData>
   ) { ... }

总结[编辑 | 编辑源代码]

Next.js API路由提供了一种轻量级后端解决方案，特点包括：

无额外服务器配置
自动路由映射
支持中间件模式
与前端代码共置
适合全栈JavaScript开发

通过合理设计，可构建从简单CRUD到复杂微服务网关的各种API应用。