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

问题描述 投票:0回答:1

我正在使用 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
reactjs typescript next.js next.js14
1个回答
0
投票

问题:

即使我使用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
    )即可。

了解更多:

如果您有任何疑问,请发表评论(如果有必要我会更新答案)

© www.soinside.com 2019 - 2024. All rights reserved.