API路由已存在但POST请求返回404的技术求助

你的404错误核心原因是Next.js API路由的文件结构不符合框架要求，同时代码里还有几处细节问题，下面逐一解决：

1. 调整API路由的文件结构 #

Next.js的API路由规则（App Router模式）：

• 必须在项目根目录的app/api文件夹下创建子文件夹，比如app/api/createInterpretations
• 该子文件夹下的API处理文件必须命名为route.ts（不能用自定义的createInterpretations.tsx）

如果是Pages Router模式，则需要把API文件放在pages/api目录下，文件名直接用createInterpretations.ts即可。

2. 修正API路由代码 #

原API代码存在两个问题：非POST请求未返回响应、创建数据后无结果返回，修改后的代码如下（App Router版本）：

import { prisma } from "@/lib/prisma";

export async function POST(req: Request) {
  // 只允许POST方法
  if (req.method !== "POST") {
    return new Response(JSON.stringify({ error: "仅支持POST请求" }), { status: 405 });
  }

  try {
    const formData = await req.json();
    const newInterpretation = await prisma.interpretations.create({
      data: formData,
    });
    // 返回创建成功的数据，状态码201表示资源创建完成
    return new Response(JSON.stringify(newInterpretation), { status: 201 });
  } catch (error) {
    // 捕获错误并返回
    return new Response(JSON.stringify({ error: "创建记录失败" }), { status: 500 });
  }
}

3. 修复前端fetch请求 #

原请求只传递了chapterVal，未包含表单的所有字段，且缺少Content-Type请求头，调整handleSubmit函数：

const handleSubmit = async (event) => {
  event.preventDefault();
  try {
    const response = await fetch("/api/createInterpretations", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        chapter: chapterVal,
        verse: verseVal,
        content: contentVal,
      }),
    });

    if (!response.ok) {
      const errorMsg = await response.text();
      throw new Error(errorMsg);
    }

    const result = await response.json();
    console.log("记录创建成功:", result);
    // 重置表单输入
    setChapter("");
    setVerse("");
    setContent("");
  } catch (err) {
    console.error("提交失败:", err);
  }
};

4. 额外注意事项 #

• 确保@/lib/prisma中的Prisma Client已正确初始化，能正常连接到PostgreSQL数据库
• 修改文件结构后，重启Next.js开发服务器，确保框架能识别新的API路由

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