即使我使用route.ts，获取 Next.js 14 API 路由也会抛出 404 错误

Question

我正在使用 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

Answer 1

问题：

即使我使用route.ts，获取 Next.js 14 API 路由也会抛出 404 错误

原因：

网址不正确

解决方案：

• NextJS 是基于文件系统的路由器，其中文件夹用于定义路由
• NextJS 使用文件夹名称作为 URL，因此，将 URL 更改为

  /pages/api/tmp

• /api/tmp

  导致 NextJS 在

  app/api/tmp

  下面查找，这就是为什么它给你 404
• 如果您希望 URL 为

  /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

如果您有任何疑问，请发表评论（如果有必要我会更新答案）