Next.js路由处理器中Params未定义问题排查求助

核心问题：API路由函数参数格式错误 #

Next.js App Router（新API路由）的HTTP方法函数（如POST）不是接收包含req/res的对象作为参数，而是直接将NextRequest作为第一个参数传入。你定义的params类型完全错误，导致解构出来的req为undefined。

修正后的API路由代码 #

import { NextRequest, NextResponse } from "next/server";
import prisma from "@/lib/prisma";

// 直接接收request作为第一个参数
export const POST = async (req: NextRequest) => {
  try {
    // 解析请求体中的JSON数据
    const meetUpData = await req.json();
    
    const result = await prisma.meetUp.create({
      data: {
        title: meetUpData.title,
        description: meetUpData.description,
      },
    });

    return NextResponse.json(result, { status: 201 });
  } catch (error) {
    return NextResponse.json({ error: "创建失败" }, { status: 500 });
  }
};

前端代码的小优化 #

你的提交按钮上多余绑定了onChange={changeValue}，这会导致不必要的状态更新，应该移除：

// 修正后的submit按钮
<input type="submit" value="Create" />

关键说明 #

• App Router的API路由函数参数规则：GET/POST等方法函数直接接收NextRequest实例，不需要解构对象。
• 获取请求体：通过await req.json()解析JSON格式的请求体数据，这是App Router中获取POST数据的正确方式。
• 错误处理：添加try/catch捕获数据库操作或请求解析的错误，返回合适的HTTP状态码。

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