如何在Next.js的新app文件夹中配置API路由？

可以将原Pages Router的API迁移到App Router中，但需要遵循App Router的API路由规范，你的错误源于文件名和代码写法不符合要求，具体修正方法如下：

1. 正确的文件路径 #

API路由文件必须命名为route.js，放在对应路径下：
app/api/accounts/login/route.js

2. 正确的代码写法 #

App Router不再使用(req, res)的handler模式，而是基于Web标准的Request和Response对象，通过导出对应HTTP方法的函数来处理请求（比如登录常用的POST方法）：

// app/api/accounts/login/route.js
export async function POST(request) {
  // 解析请求体
  const loginData = await request.json();
  
  // 这里编写你的登录逻辑，比如验证账号密码
  console.log('登录请求数据:', loginData);
  
  // 返回JSON响应
  return new Response(JSON.stringify({ 
    success: true,
    message: '登录验证通过'
  }), {
    status: 200,
    headers: { 'Content-Type': 'application/json' }
  });
}

错误原因说明 #

• 文件名错误：page.js是App Router中用来渲染页面组件的文件，API路由必须用route.js
• 代码模式错误：App Router废弃了Pages Router的默认导出handler方式，改用按HTTP方法导出函数的模式，同时使用标准的Request/Response对象处理请求和响应

扩展：处理多HTTP方法 #

如果需要同时处理GET、POST等多种请求，只需导出对应方法的函数即可：

export async function GET(request) {
  return new Response('登录API的GET请求响应', { status: 200 });
}

export async function POST(request) {
  // 处理POST登录请求
}

内容的提问来源于stack exchange，提问作者NL3294