Next.js旧API系统与App Router API系统差异及Response使用原因

一、文件结构差异 #

• 传统Pages Router API：文件放在 pages/api/ 目录下，比如 pages/api/code.js
• App Router API：文件必须命名为 route.js，放在 app/api/[路由名]/ 目录下，比如 app/api/code/route.js

二、代码写法差异 #

Pages Router 示例代码 #

export const handler = async (req, res) => {
  res.status(200).json({ message: "successful" });
}

需要统一导出一个handler函数，通过判断req.method来处理不同HTTP请求（GET/POST/PUT等）。

App Router 示例代码 #

export const POST = async (req) => {
  return new Response(JSON.stringify({
    message: "successful"
  }), { 
    status: 201 
  });
}

直接导出对应HTTP方法的函数（如POST/GET/PUT），每个方法对应单独的处理逻辑，无需手动判断请求类型。

三、为什么App Router不用res对象，必须返回Response实例？ #

核心原因是两者依赖的底层API标准不同：

• Pages Router的API基于Node.js原生HTTP模块设计，req和res分别对应Node.js的IncomingMessage和ServerResponse对象，所以能用res.status().json()这类Node.js专属方法返回响应。
• App Router采用Web标准的Request/Response API，这是浏览器、Edge运行时（比如Vercel Edge Functions、Cloudflare Workers）通用的标准接口，不依赖Node.js环境。因此它不再提供Node.js风格的res对象，而是要求返回符合Web标准的Response实例，既能让API路由在更多环境下无缝运行，也能和前端Fetch API逻辑保持一致，降低跨端开发的认知成本。

内容的提问来源于stack exchange，提问作者Md Shafiul Azam Hany