Next.js App Router中API路由迁移后出现路由未找到问题求助

核心原因：API路由文件名不符合规范 #

Next.js App Router 要求API路由文件必须命名为route.js（或route.ts），自定义文件名（比如你用的chat.js）不会被框架识别为API路由，这就是你的文件从未被调用、返回404的直接原因。从你提供的项目结构截图来看，当前文件路径是app/api/chat/chat.js，不符合路由规则。

第一步：修正文件名 #

将app/api/chat/chat.js重命名为app/api/chat/route.js，Next.js会自动识别该文件为/api/chat路径的API处理逻辑。

第二步：适配App Router的API写法 #

你当前的代码是Pages Router的handler格式，App Router的API路由写法不同，需要调整为如下结构：

import axios from 'axios';

// 对应POST请求，若需要处理GET等其他方法，需单独导出GET/DELETE等函数
export async function POST(request) {
  // App Router中通过request.json()获取请求体
  const { message } = await request.json();

  try {
    // 补充完整目标API地址和请求参数
    const response = await axios.post('你的目标API地址', { message });
    // 假设返回数据中包含需要的reply字段
    const reply = response.data;
    return new Response(JSON.stringify(reply), { status: 200 });
  } catch (error) {
    console.error(error);
    return new Response(JSON.stringify({ error: "处理请求时发生错误" }), { status: 500 });
  }
}

额外检查项 #

• 确认已安装axios：执行npm install axios完成依赖安装
• 前端调用API时，请求路径应为/api/chat，无需包含文件名
• 检查app/api/chat目录下是否存在其他可能干扰路由识别的文件

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