Next 13.4版本api文件夹去向及请求返回实现问题咨询

Next.js 13.4把App Router设为稳定默认方案，不再自动生成Pages Router模式下的api文件夹，现在处理API请求需要用Route Handlers，具体操作如下：

基本操作流程 #

1. 在app目录下创建api子目录，再根据需求在api下创建对应路由文件夹（比如app/api/hello）
2. 在路由文件夹内创建route.ts（或route.js）文件，这就是处理请求的核心文件

GET请求示例 #

在app/api/hello/route.ts中编写代码：

import { NextResponse } from 'next/server';

export async function GET() {
  // 编写GET请求逻辑，比如从数据库获取数据
  const responseData = {
    code: 200,
    message: 'GET请求处理成功',
    data: { content: '来自Next.js 13.4的响应' }
  };
  // 用NextResponse返回JSON格式结果，可自定义状态码
  return NextResponse.json(responseData, { status: 200 });
}

启动项目后访问http://localhost:3000/api/hello即可获取返回结果。

POST请求示例 #

在同一个app/api/hello/route.ts中添加POST方法处理逻辑：

import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  // 解析请求体（JSON格式）
  const requestBody = await request.json();
  
  // 编写POST请求逻辑，比如验证数据、写入数据库
  const responseData = {
    code: 201,
    message: 'POST请求处理成功',
    receivedContent: requestBody
  };
  
  return NextResponse.json(responseData, { status: 201 });
}

用POST工具（如Postman、curl）请求/api/hello并携带JSON请求体，就能收到对应响应。

动态路由请求示例 #

如果需要处理带参数的路由（比如/api/user/123），创建app/api/user/[id]/route.ts文件：

import { NextResponse } from 'next/server';

export async function GET(request: Request, { params }: { params: { id: string } }) {
  // 从params中获取动态参数id
  const userId = params.id;
  
  const responseData = {
    code: 200,
    message: `获取用户${userId}信息成功`,
    userId: userId
  };
  
  return NextResponse.json(responseData);
}

访问/api/user/123就能拿到对应id的响应结果。

关键注意事项 #

• 路由文件必须命名为route.ts/js，放在app/api/[路由路径]目录下
• 支持GET、POST、PUT、DELETE等所有HTTP方法，只需导出对应的异步函数即可
• 若需获取请求头、查询参数，可通过request.headers、new URL(request.url).searchParams实现

内容的提问来源于stack exchange，提问作者Captai-N