NextJS 13.4 App Router中实现简单POST请求的正确方式

在Next.js 13.4引入的App Router中，API路由的实现已经切换为Route Handler，完全替代了旧pages/api体系下的NextAPIRequest/NextAPIResponse写法。下面是POST请求的具体实现步骤和示例：

1. 基础Route Handler结构 #

在app目录下创建对应的API路径，比如要实现/api/users的POST接口，就新建app/api/users/route.ts文件，然后导出POST异步函数：

import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  // 处理POST请求逻辑
  return NextResponse.json({ message: '请求处理成功' });
}

2. 获取请求体数据 #

根据请求的内容类型，用不同方法解析：

• JSON格式请求：使用request.json()解析

export async function POST(request: Request) {
  try {
    const userData = await request.json();
    // 这里可执行数据校验、写入数据库等操作
    return NextResponse.json({ id: 'user_123', ...userData }, { status: 201 });
  } catch (error) {
    return NextResponse.json({ error: '无效的JSON格式数据' }, { status: 400 });
  }
}

• 表单数据（Form Data）：使用request.formData()解析

export async function POST(request: Request) {
  const formData = await request.formData();
  const username = formData.get('username') as string;
  const avatar = formData.get('avatar') as File;

  // 处理表单数据逻辑，比如上传文件
  return NextResponse.json({ username, avatarFileName: avatar.name });
}

3. 获取URL路径参数 #

如果接口包含动态参数（比如/api/users/[id]），可以在函数参数中解构params：

1. 先创建路径app/api/users/[id]/route.ts
2. 在POST函数中获取参数：

export async function POST(request: Request, { params }: { params: { id: string } }) {
  const userId = params.id;
  const updateData = await request.json();

  // 根据userId执行资源更新逻辑
  return NextResponse.json({ message: `用户${userId}信息已更新`, data: updateData });
}

4. 错误处理 #

使用NextResponse直接返回错误状态码和信息，替代旧的res.status().json()写法：

export async function POST(request: Request) {
  const data = await request.json();
  
  if (!data.username) {
    return NextResponse.json({ error: '用户名不能为空' }, { status: 400 });
  }

  // 正常业务逻辑
  return NextResponse.json({ success: true }, { status: 201 });
}

其他请求方法的差异 #

PUT、GET、DELETE的实现逻辑和POST一致，仅需导出对应函数即可：

• GET：导出async function GET()，可通过request.nextUrl.searchParams获取URL查询参数
• PUT：导出async function PUT()，通常结合路径参数+请求体实现资源更新
• DELETE：导出async function DELETE()，一般通过路径参数指定待删除资源

内容的提问来源于stack exchange，提问作者Octo Palm Tree