如何将 api 路由放入 Next.js 的新应用程序文件夹中？

Question

我在以下位置有一个测试 API：pages\api\accounts\login.js。我正在学习新app文件夹，这仍然是 Next.js 中的一个实验性功能（截至今天）。

是否可以将我的登录脚本移至该app文件夹中？我尝试移动/重命名为app\api\accounts\login\pages.js，但是当我这样做时：

async function handler(req, res) {
  console.log(res);
}
export default handler;

我使用的网址是：http://localhost:3000/api/accounts/login。我得到：

服务器错误

错误：找不到页面的模块：/api/accounts/login

我还尝试将其移动到：app/api/accounts/login/page.js。但我得到了同样的错误。

Answer 1

从版本开始，我们在文件夹中13.2有 API路由处理程序app。它们的工作方式类似于页面，但应该调用段的文件route.js而不是page.js.

例如，假设您有以下文件结构和代码：

// app/api/route.js 

import { NextResponse } from "next/server";

// To handle a GET request to /api
export async function GET(request) {
  // Do whatever you want
  return NextResponse.json({ message: "Hello World" }, { status: 200 });
}

// To handle a POST request to /api
export async function POST(request) {
  // Do whatever you want
  return NextResponse.json({ message: "Hello World" }, { status: 200 });
}

// Same logic to add a `PATCH`, `DELETE`...

您可以/api通过任何 API 路由进行访问，例如使用fetch("/api"). 同时去/渲染page.js。

Answer 2

从上周开始，这种情况发生了变化。

新的应用程序文件夹需要在路径下有一个route.ts。

例如，如果您想要 app/api/accounts/login，您的文件路径应该是

应用程序/api/accounts/login/route.ts

route.ts 将位于您的登录文件夹内，并包含 api 端点的所有逻辑。例如

每个文件夹都是一个端点，并且需要一个route.ts。据我所知，这就是它的工作原理，但我仍在学习新的应用程序目录。