我正在使用 Next.js 14.2.3 并尝试从
/api/tmp
组件获取 chat.tsx
API 路由,但即使我使用 route.ts
,也会抛出错误 404。为什么?
编辑:是因为
chat.tsx
是客户端组件吗?如果是,如何在客户端组件中获取 API 路由?
chat.tsx
:
"use client";
export default function Chat() {
/.../
const test = await fetch("/api/tmp", {
method: "GET",
});
/.../
}
route.ts
:
import { NextResponse } from "next/server";
export async function GET(request: any) {
return NextResponse.json({ message: "Hello World" }, { status: 200 });
}
结构:
src
|__app
|__components
| |__chat.tsx
|__hooks
|__pages
| |__api
| |__tmp
| |__route.ts
|__shared
|__styles
|__types
|__layout.tsx
|__page.tsx
终端:
GET /api/tmp 404 in 61ms
问题:
即使我使用route.ts,获取 Next.js 14 API 路由也会抛出 404 错误
原因:
网址不正确
解决方案:
/pages/api/tmp
/api/tmp
导致 NextJS 在 app/api/tmp
下面查找,这就是为什么它给你 404/api/tmp
,则只需将 api 文件夹保留在应用程序下(app/api
)即可。了解更多:
路由处理程序:https://nextjs.org/docs/app/building-your-application/routing/route-handlers
创建路线:https://nextjs.org/docs/app/building-your-application/routing/defining-routes#creating-routes
如果您有任何疑问,请发表评论(如果有必要我会更新答案)