我无法在新的nextjs项目中调用路由API（404）。
我的路由API在src/app/api/speed.js
在我的页面src/app/page.tsx中，我这样做：

fetch("api/speed").then(res=>res.json).then(data=>alert(data.message))

但是在网络devtools选项卡中，我总是在GET http：//localhost：3000/api/speed上得到404
src/app/API/speed.js：

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

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><>
  )
}

注意，如果我将API路由移动到：src/app/api/speed/route.js，但文档中明确给出了以下示例：pages/api/hello.js，所以我不明白为什么它不工作。
注2：如果API的话，我还得修改代码。官方文档给出了一个非工作示例（可能已弃用）。新代码：

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

我错过了什么？