为何Next.js App Router的API调用失效，Pages Router却正常？如何修复？

App Router和Pages Router的API路由实现机制完全不同，你需要对第一个应用做以下两处修改：

1. 调整文件结构 #

将原有的 src/app/api/hello.js 调整为如下结构：

.
└── src /
    └── app/
        └── api/
            └── hello/
                └── route.js

即创建hello子目录，把原hello.js的内容迁移到该目录下的route.js文件中。

2. 修改API处理代码 #

将route.js中的代码替换为App Router要求的Route Handler写法：

export async function GET() {
  return Response.json({ text: 'Hello' });
}

如果需要处理请求参数、请求体等，可接收request参数扩展逻辑：

export async function GET(request) {
  // 示例：获取URL查询参数
  const searchParams = request.nextUrl.searchParams;
  const name = searchParams.get('name');
  
  return Response.json({ text: `Hello ${name || 'there'}` });
}

原因说明 #

Pages Router的API路由通过导出统一的handler函数处理所有请求方法，而App Router采用更明确的规则：必须通过导出与HTTP方法对应的函数（如GET、POST）处理特定请求，同时API路由文件必须放在对应路径的子目录下的route.js中，这是App Router文件系统路由的强制要求。

修改完成后重启npm run dev，访问http://localhost:3000/api/hello即可正常获取响应。

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