Next.js API路由如何处理？两种写法的区别与正确性解析

一、两种写法都正确 #

这两种写法分别对应Next.js的两套官方路由系统，没有对错之分：

• 第一种是Pages Router（Next.js 12及更早版本的默认路由）的API写法
• 第二种是App Router（Next.js 13+推出的新路由系统）的API写法

二、核心区别对比 #

1. 目录结构要求 #

• Pages Router：API文件直接放在/pages/api/目录下，文件名或文件夹+index.js对应接口路径。比如/pages/api/order.js就对应/api/order接口
• App Router：API文件必须命名为route.js，放在/app/api/[路径]/目录下。比如/app/api/order/route.js对应/api/order接口

2. 请求处理逻辑 #

• Pages Router：用单个默认导出的handler函数统一处理所有请求，通过判断req.method区分GET/POST等方法，同步异步函数都支持
  示例代码：

  export default function handler(req, res) {
    if (req.method === 'POST') {
      // 处理POST请求
      res.status(200).json({ msg: 'POST 请求处理完成' })
    } else {
      // 处理其他不支持的方法
      res.status(405).json({ msg: '不支持该请求方法' })
    }
  }
  

• App Router：通过导出对应请求方法的独立异步函数（如GET/POST/PUT），每个函数只处理一种请求方法，返回NextResponse对象
  示例代码：

  import { NextResponse } from 'next/server'
  
  export async function GET() {
    const res = await fetch('https://example.com/data')
    const data = await res.json()
    return NextResponse.json({ data })
  }
  
  export async function POST(request) {
    const body = await request.json()
    return NextResponse.json({ received: body })
  }
  

3. 请求响应对象差异 #

• Pages Router：用Node.js原生风格的req和res对象，比如用res.status()设置状态码，res.json()返回JSON响应
• App Router：用Web标准的Request对象（传入方法函数），返回基于Web标准Response的NextResponse，比如获取请求体用request.json()，返回响应直接用NextResponse.json()

4. 支持的特性 #

• Pages Router：支持API中间件（需在/pages/api/_middleware.js定义），但对React Server Components、流式响应等Next.js 13+新特性支持有限
• App Router：天生支持React Server Components、流式响应、Edge Runtime等最新特性，API路由默认运行在服务端组件环境，可直接调用数据库等服务端代码

5. 适用场景 #

• Pages Router：适合Next.js 12及更早版本的老项目，或者习惯传统Node.js API写法的开发者
• App Router：适合Next.js 13+的新项目，想要用更清晰的请求方法分离、体验最新框架特性的开发者

内容的提问来源于stack exchange，提问作者Omilight