Next.js新项目app目录API路由调用404问题求助

问题背景 #

在新Next.js项目中调用API路由时遇到404错误：

• 初始API路由文件放在src/app/api/speed.js
• 页面组件src/app/page.tsx中调用fetch("api/speed")，但网络请求http://localhost:3000/api/speed始终返回404
• 当把API路由移到src/app/api/speed/route.js后，请求恢复正常，疑惑为何Pages Router的写法在当前项目不生效

初始出错代码 #

1. API路由文件 src/app/api/speed.js #

export default function handler (_req,res) {
  res.status(200).json({ message: "hey" })
}

2. 页面组件 src/app/page.tsx #

'use clients;
export default function Home() {
  function handleClick() {
    fetch("api/speed").then(res=>res.json.then(({message})=>alert(message))
  }
 
  return (
    <><main><div onClick={handleClick}>HEY</div></main></>
  )
}

修正后有效代码（src/app/api/speed/route.js） #

import {NextResponse} from "next/server";
export async function GET(req) {
  return NextResponse.json({message: "hey"})
}

核心要点解析 #

• App Router 与 Pages Router 的API路由规则完全不同：
  • Pages Router（旧架构）允许在pages/api/[filename].js中通过默认导出handler函数处理所有HTTP请求
  • App Router（新架构）要求API路由必须遵循**app/api/[路由名]/route.js**的目录结构，且必须导出对应HTTP方法的异步函数（如GET、POST），通过NextResponse返回响应，不能再用默认导出的handler模式
• 你的项目采用App Router（从src/app/page.tsx的目录结构可判断），但初始写法套用了Pages Router的规则，不符合App Router的路由规范，因此返回404
• 初始代码中的两处语法错误：
  • 客户端组件指令应为'use client';（多了一个s）
  • res.json是方法，需调用执行：res.json()（缺少括号）

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