Next.js 15 App目录路由API接口404错误问题求助

问题描述 #

使用Next.js 15 App目录路由系统实现API路由时，访问GET接口或发送POST请求持续返回404 Not Found错误。

文件结构 #

src/
  app/
    api/
      transform/
        route.js
    page.js

API路由代码（src/app/api/transform/route.js） #

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: "Hello from transform API" });
}

export async function POST(request) {
  try {
    // Your logic here
  } catch (error) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

export const runtime = 'nodejs'; // Using Node.js runtime

前端API调用代码（src/app/page.js） #

const handleTransform = async () => {
  if (!apiKey || !resume || !jobDescription) {
    alert('Please provide all required information');
    return;
  }

  try {
    const formData = new FormData();
    formData.append('resume', resume);
    formData.append('jobDescription', jobDescription);
    formData.append('apiKey', apiKey);

    const response = await fetch('/api/transform', {
      method: 'POST',
      body: formData,
    });

    const data = await response.json();
    if (!response.ok) throw new Error(data.message);

    setTransformedResume(data.transformedResume);
    setAtsScore(data.score);
  } catch (error) {
    console.error(error);
    alert('Transformation failed. Please try again.');
  }
};

环境信息 #

• Next.js版本：15
• Runtime：Node.js
• API文件位置：src/app/api/transform/route.js
• API调用位置：src/app/page.js

已尝试的解决步骤 #

• 验证文件路径正确（src/app/api/transform/route.js）
• 确认App目录路由已启用
• 显式设置Runtime为Node.js（export const runtime = 'nodejs'）

排查与修复方案 #

1. 重启开发服务器
   修改路由文件或配置后，热重载可能未生效，手动停止并重启npm run dev，确保路由被正确注册。

2. 验证路由访问路径
   确认浏览器/客户端访问的路径为http://localhost:3000/api/transform（端口以实际开发服务器为准），检查是否存在拼写错误、大小写问题或多余斜杠。

3. 检查路由文件规范

   • 确保路由文件名严格为route.js（或route.ts），其他命名（如routes.js）无法被Next.js识别为API路由。
   • 确认GET/POST函数为命名导出，且语法无错误（如未漏写async关键字）。

4. 确认src目录配置
   若项目使用src目录，检查next.config.js中是否存在禁用src目录的配置，默认Next.js会自动识别src/app作为App目录根路径，无需额外配置，若有自定义配置需确保路径正确。

5. 直接测试API接口
   在浏览器或Postman中直接访问http://localhost:3000/api/transform，若仍返回404，说明路由未被正确注册，重点排查文件路径、命名及服务器状态；若能正常返回，则问题出在前端调用逻辑（如路径拼写、请求方式错误）。

6. 完善POST请求处理逻辑
   当前POST函数缺少FormData解析逻辑，即使路由正常，也会返回空响应，需补充解析代码：

   export async function POST(request) {
     try {
       const formData = await request.formData();
       // 获取FormData中的参数
       const resume = formData.get('resume');
       const jobDescription = formData.get('jobDescription');
       const apiKey = formData.get('apiKey');
       
       // 执行你的业务逻辑
       const transformedResume = '处理后的简历内容';
       const score = 95;
   
       return NextResponse.json({ transformedResume, score });
     } catch (error) {
       return NextResponse.json({ error: error.message }, { status: 500 });
     }
   }
   

7. 测试默认Runtime配置
   尝试移除export const runtime = 'nodejs'配置，使用Next.js 15默认Runtime测试，看是否能解决404问题。

预期行为 #

• 访问/api/transform GET接口时，返回：

  { "message": "Hello from transform API" }
  

• 发送POST请求时，正常执行逻辑并返回包含transformedResume和score的JSON响应。

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