Next.js 14 App Router中API路由返回405错误求助

1. 核心错误：App Router API路由写法混淆 #

你的route.ts误用了Pages Router的API编写规范（export default），但App Router要求直接导出对应HTTP方法的独立函数，这种写法不匹配会导致Next.js无法识别你的GET请求处理逻辑，从而返回405错误。

修正后的app/api/map/route.ts代码 #

import { NextResponse } from "next/server";

// 直接导出GET方法，无需export default
export async function GET() {
    try {
        return NextResponse.json({ message: "Hello World" }, { status: 200 });
    } catch (error) {
        console.error(error);
        return NextResponse.json({ error: String(error) }, { status: 500 });
    }
}

补充：App Router的API路由使用Web标准Request对象，而非Pages Router的NextApiRequest，若需获取请求参数，可修改函数参数为async function GET(request: Request)。

2. 辅助检查：Clerk中间件拦截问题 #

你的Clerk中间件仅将根路径"/"设为公开路由，而API路由/api/map会被中间件拦截（因matcher规则包含/api(.*)）。若该API需公开访问，需将其添加到publicRoutes列表：

import { authMiddleware } from "@clerk/nextjs";
 
export default authMiddleware({
  publicRoutes: ["/", "/api/map"] // 新增API路由到公开白名单
});
 
export const config = {
  matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};

3. 验证步骤 #

• 重启Next.js开发服务器（修改路由文件后重启可确保配置生效）
• 重新调用/api/map接口，确认返回200状态码及预期JSON响应

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