Next.js项目调用OpenAI API出现POST 404错误求助

1. 修正API路由文件名 #

App Router规范下，API路由文件必须命名为route.ts，而非route.tsx。把src/app/api/generate/route.tsx重命名为src/app/api/generate/route.ts——API路由是纯服务端逻辑，不需要JSX编译支持。

2. 确认目录结构合规 #

你的API路由目录必须严格遵循以下层级：

src/
└── app/
    └── api/
        └── generate/
            └── route.ts

检查api、generate等目录名的拼写和大小写，Next.js路由对大小写敏感，任何拼写错误都会导致404。

3. 验证API路由的导出格式 #

确保route.ts中正确导出POST处理函数（匹配前端的POST请求），示例代码如下：

// src/app/api/generate/route.ts
export async function POST(request: Request) {
  try {
    const body = await request.json();
    // 这里编写你的OpenAI调用逻辑
    return new Response(JSON.stringify({ recommendation: "你的电影推荐内容" }), {
      headers: { "Content-Type": "application/json" },
    });
  } catch (error) {
    return new Response(JSON.stringify({ error: "请求处理失败" }), { status: 500 });
  }
}

注意：必须使用命名导出（export async function POST），不能用默认导出；函数名必须是大写的POST，对应请求方法。

4. 检查前端fetch请求配置 #

确保前端fetch请求使用正确的路径和方法，示例代码：

// src/app/page.tsx
async function handleGenerate() {
  try {
    const response = await fetch("/api/generate", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ userInput: "我想看科幻片" }), // 根据业务需求传递参数
    });

    if (!response.ok) throw new Error("请求失败");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

• 路径不要加后缀（比如不要写成/api/generate/route），Next.js会自动映射到route.ts文件。
• 必须显式指定method: "POST"，fetch默认使用GET请求，若API路由仅处理POST，GET请求会返回404。

5. 重启开发服务器 #

修改API路由的文件结构或文件名后，必须重启Next.js开发服务器（停止当前npm run dev进程，重新启动），否则新的路由配置不会生效。

6. 排查其他潜在问题 #

• 检查next.config.js中是否有自定义rewrites或redirects规则，这些规则可能干扰API路由的正常映射。
• 确认项目使用的是App Router而非Pages Router，Pages Router的API路由结构为pages/api/generate.ts，若使用Pages Router需调整目录结构。

内容的提问来源于stack exchange，提问作者kevin sierra castro