使用Prisma+Next.js时POST请求传入数据但req.body为null的问题

问题根源 #

你的API路由代码存在两个关键错误，导致无法正确获取请求体：

• POST函数的请求参数类型错误：将NextResponse（响应对象类型）当作请求参数类型，实际应该使用NextRequest。
• 错误直接访问req.body：在Next.js App Router的API路由中，请求对象遵循Web标准，没有直接暴露body属性，必须通过req.json()方法异步解析JSON请求体。

修正后的API路由代码 #

import { NextRequest, NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export async function GET() {
  const allCenters = await prisma.centers.findMany();
  return NextResponse.json(allCenters);
}

export async function POST(req: NextRequest) {
  try {
    // 异步解析JSON格式的请求体
    const { name, username, password, address } = await req.json();
    await prisma.centers.create({
      data: {
        name: String(name),
        username: String(username),
        password: String(password),
        address: String(address),
      },
    });
    return NextResponse.json("done");
  } catch (error) {
    console.error(error);
    return NextResponse.json("error");
  }
}

前端代码注意事项 #

确保newCenter是可被JSON序列化的普通对象，axios已正确设置Content-Type: application/json，当前前端代码的写法是正确的，无需额外调整。

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