如何使用服务器组件和应用程序路由器在 Next.js v14 中构建 API？

Question

我是 Next.js 的新手。我刚刚完成本教程并有一个关于 API 的问题。

文档中的此页面似乎建议应在将使用 API 路由的每个页面的子文件夹/路由中定义 API 路由。

例如，假设我有一个页面/app/dashboard/page.tsx，我想调用第 3 方 API。我可以创建/app/dashboard/api/route.ts并定义一个 GET 请求：

export async function GET() {
  const res = await fetch('https://random-api.com/...')
  const data = await res.json()
 
  return Response.json({ data })
}

我不明白为什么这个逻辑会嵌套在路线内部而不是项目的顶层。有了上面的逻辑，你是不是必须在每个要使用它的页面中重新定义逻辑？

我很可能误解了该文档，如果有人可以帮助澄清，我将不胜感激。

定义 API 逻辑的最佳项目结构是什么，以便我可以在服务器组件内部全局使用该逻辑？另外，是否也可以在客户端组件中使用相同的 API 函数？

Answer 1

使用路由器应用程序时，API 可以位于您想要的任何目录中。在页面路由器中，它们需要位于内部/pages/api/<any structure you want from here>并且可以命名为其他名称route

看到您正在使用应用程序 Router，唯一的要求是调用该文件route.ts（或 js），如果您在同一文件夹中有 page.tsx（或 jsx），它可能无法工作。

从早期版本的 Next 开始，我通常会使用自己的 API /app/api/...，但那只是我自己。正如我所说，你可以把它放在你想要的任何地方。

请记住，文件夹已映射到 URL 路径，因此/app/dashboard/api/route.ts将有另一个 url/app/api/dashboard/route.ts