Next.js 13+ 的 App Router 不再支持 page.tsx 形式的 API，必须使用专用的 route.ts（或 route.js）文件定义 API 处理器，且需遵循严格的文件结构规则。
next.js 13+ 的 app router 不再支持 `page.tsx` 形式的 api，必须使用专用的 `route.ts`（或 `route.js`）文件定义 api 处理器，且需遵循严格的文件结构规则。
在 Next.js 13 引入 App Router 后，API 路由的实现方式发生了根本性变化：不再将 API 视为页面（Page），而是作为独立的路由处理器（Route Handler）存在。这意味着你不能在 app/api/user/page.tsx 中定义 API —— 这种写法会被 Next.js 当作一个普通页面组件渲染，返回 HTML，而非 JSON 响应，自然无法被前端正确调用。
✅ 正确做法是：在 app 目录下为 API 创建专用的 route.ts 文件，路径格式为：
app/ ├── api/ │ └── user/ │ └── route.ts ← ✅ 正确：API 路由处理器
该 route.ts 文件需默认导出一个或多个 HTTP 方法处理函数（如 GET、POST、PUT 等），每个函数接收 Request 对象并返回 Response 实例：
// app/api/user/route.ts
export async function GET(request: Request) {
// 可从 URL 搜索参数中解析数据
const { searchParams } = new URL(request.url);
const id = searchParams.get('id');
// 模拟返回用户数据
const user = id ? { id, name: `User ${id}` } : { id: '1', name: 'John Doe' };
return Response.json(user, { status: 200 });
}
export async function POST(request: Request) {
const body = await request.json();
// 处理创建用户逻辑...
return Response.json({ success: true, data: body }, { status: 201 });
}⚠️ 关键注意事项：
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 禁止共存冲突：同一路由段（segment）下不可同时存在 page.tsx 和 route.ts。例如 app/api/user/page.tsx 与 app/api/user/route.ts 不能并存，否则构建报错。
- 路径即路由：app/api/user/route.ts 对应的访问路径是 /api/user（自动映射，无需额外配置）。
- 仅限 route.ts/route.js：不支持 page.tsx、layout.tsx 或 loading.tsx 承载 API 逻辑。
- 服务端专属：Route Handlers 始终运行在服务端（Edge 或 Node.js 环境），可安全访问环境变量、数据库等后端资源。
在页面中调用该 API（如 app/user/page.tsx）时，可使用标准 fetch（服务端组件中建议使用 await fetch(...)，客户端组件中用 useEffect + useState）：
// app/user/page.tsx
export default async function UserPage() {
const res = await fetch('http://localhost:3000/api/user');
const user = await res.json();
return (
<div>
<h1>User Profile</h1>
<p>ID: {user.id}</p>
<p>Name: {user.name}</p>
</div>
);
}? 提示：开发阶段可通过 console.log 或 console.error 在 route.ts 中调试；生产环境请确保错误被妥善捕获并返回合适的状态码（如 500），避免暴露敏感信息。
总结：App Router 中的 API 必须通过 route.ts 实现，结构清晰、语义明确、与页面完全解耦。掌握这一范式，是构建现代化 Next.js 全栈应用的基础能力。
