NextJS App Router动态路由绑定HTTP方法后无法正常工作

核心问题：路由文件结构不符合规则 #

你当前的文件路径/app/api/password/reset/confirm/[userId]/[idToken].ts不满足Next.js App Router的API路由要求。在App Router中，每个路由段（包括动态路由段）都必须是文件夹，请求处理代码必须放在名为route.ts的文件内。

目标路径/api/password/reset/confirm/[userId]/[idToken]对应的正确文件结构应为：

app/
└── api/
    └── password/
        └── reset/
            └── confirm/
                └── [userId]/
                    └── [idToken]/
                        └── route.ts  // 在此文件中编写GET处理逻辑

修正后的代码（route.ts） #

注意：context.params中的动态参数默认是字符串类型，直接与数字比较会导致判断失效，需要先转换类型：

import { NextRequest, NextResponse } from 'next/server';

export const GET = async (request: NextRequest, context: { params: { userId: string; idToken: string } }) => {
  const { userId, idToken } = context.params;

  const validUserId = 1;
  const validIdToken = "c8jzmm-8e51a9981443975cf764d26ddb20093a";

  // 将字符串类型的userId转为数字后再做比较
  if (parseInt(userId) === validUserId && idToken === validIdToken) {
    return NextResponse.json({ message: '密码重置链接有效', userId, idToken });
  } else {
    return NextResponse.json({ message: '无效的密码重置链接' }, { status: 400 });
  }
};

额外排查点 #

• 确认Next.js版本为13.4及以上（App Router稳定版的最低要求）
• 重启开发服务器，避免缓存导致路由识别异常
• 检查文件名拼写（如route.ts是否写成大小写错误的Route.ts，系统对文件名大小写敏感）

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