Next.js 14（含src目录）页面与API路由目录结构咨询

一、页面目录结构（App Router模式） #

你当前使用的是App Router（基于src/app/page.tsx），所有页面需直接在app目录下按路由层级组织，不需要额外嵌套pages目录：

• 根页面：src/app/page.tsx（对应域名根路径/）
• 二级页面（如staff页面）：src/app/staff/page.tsx（对应路径/staff）
• 嵌套页面（如staff下的详情页）：src/app/staff/detail/page.tsx（对应路径/staff/detail）
• 公共布局：每个路由目录下可添加layout.tsx，用于该层级的统一布局渲染

二、API路由结构规划（App Router模式） #

App Router的API路由需放在app目录下的api子目录中，每个API端点对应一个route.ts文件（注意是.ts后缀，而非.tsx），且需使用NextResponse替代Pages Router的res.send：

• 根API端点：src/app/api/route.ts（对应路径/api）
• 二级API端点（如staff相关接口）：src/app/api/staff/route.ts（对应路径/api/staff）
• 动态参数API端点：src/app/api/staff/[id]/route.ts（对应路径/api/staff/123这类带动态参数的请求）

正确API路由示例（以src/app/api/staff/route.ts为例） #

import { NextResponse } from 'next/server';

export async function GET() {
  // 处理GET请求逻辑
  return NextResponse.json({ message: '获取员工数据成功' }, { status: 200 });
}

export async function POST(request: Request) {
  const requestBody = await request.json();
  // 处理POST请求逻辑
  return NextResponse.json({ data: requestBody }, { status: 201 });
}

三、你之前的错误原因 #

1. 目录结构混淆：App Router与Pages Router是独立的路由系统，不能将Pages Router的pages目录嵌套进App Router的app目录，这会导致Next.js路由解析混乱。
2. API写法错误：App Router的API路由不使用Pages Router的req/res对象，而是通过Request接收请求、NextResponse返回响应，因此res.send会提示“不是函数”。

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