Next.js 14.2.3调用/api/tmp接口报404，求原因及客户端调用方案

核心原因：API路由目录位置错误 #

你用的是Next.js 14.2.3的App Router模式，但把API路由文件route.ts放在了src/app/pages/api/tmp/目录下——这是Pages Router的API路由路径规则，App Router的API路由必须放在app/api/目录下，否则Next.js无法识别这个API端点，直接导致404错误。

关于客户端组件的疑问 #

客户端组件完全可以调用API路由，这不是导致404的原因。你代码里的fetch("/api/tmp")写法本身没问题，只要API路由位置正确就能正常请求。

具体修复步骤 #

1. 调整API路由目录结构
   把src/app/pages/api/tmp/route.ts移动到src/app/api/tmp/route.ts，最终项目结构应为：

   src
    |__app
        |__api
        |    |__tmp
        |        |__route.ts
        |__components
        |      |__chat.tsx
        |__hooks
        |__pages
        |__shared
        |__styles
        |__types
        |__layout.tsx
        |__page.tsx
   

2. 修复客户端组件的异步调用问题
   你当前chat.tsx里直接在组件顶层写await fetch是错误的，客户端组件顶层不能直接执行异步代码，需要把请求放在useEffect或者独立异步函数中调用，示例代码如下：

   "use client";
   
   import { useEffect, useState } from 'react';
   
   export default function Chat() {
     const [message, setMessage] = useState('');
   
     useEffect(() => {
       const fetchTmpData = async () => {
         const response = await fetch("/api/tmp", { method: "GET" });
         if (response.ok) {
           const data = await response.json();
           setMessage(data.message);
         }
       };
   
       fetchTmpData();
     }, []);
   
     return <div>{message}</div>;
   }
   

验证修复 #

重启Next.js开发服务器，访问客户端组件所在页面，此时/api/tmp应该能正常返回{ "message": "Hello World" }，终端也不会再出现404日志。

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