Next.js 13自定义应用后Middleware未触发问题求助

我正在学习Next.js 13，跟着官方文档自定义应用，但始终无法触发Middleware，怀疑操作有误。附上middleware.ts代码及项目结构信息，求帮忙排查问题并给出修正建议。

项目结构 #

项目采用src目录结构，middleware.ts文件位于src/app/目录下。

middleware.ts代码 #

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { AUTHORIZATION_TOKEN, COOKIE_TOKEN } from "@libs/constants";
import { verify } from "@libs/token";

export const config = {
  matcher: ["/admin/:path*", "/signin", "/api/:path*"],
};

export async function middleware(request: NextRequest) {
  const url = request.nextUrl.clone();
  const regex = new RegExp('\/api\/(category|product|cart|coupon|auth)\/(create|update|delete)', 'i')

  let matcher: any = regex.exec(url.pathname);
  let token: any;
  let isValidToken: any;

  if (matcher && matcher[0]) {
    token = request.headers.get(AUTHORIZATION_TOKEN);
    isValidToken = await verify(token);
  } else {
    token = request.cookies.get(COOKIE_TOKEN)?.value;
    if (token) {
      isValidToken = await verify(JSON.parse(token));
    }

    if (url.pathname.startsWith("/admin")) {
      if (isValidToken) {
        return NextResponse.next();
      } else {
        url.pathname = "/signin";
        return NextResponse.redirect(url);
      }
    }
  
    if (url.pathname.startsWith("/signin") && isValidToken) {
      url.pathname = "/admin";
      return NextResponse.redirect(url);
    }
  }

  return NextResponse.next();
}

排查方向与修正建议 #

• 调整文件位置：Next.js 13（App Router）要求middleware.ts必须放在项目根目录或src目录根（与app/文件夹同级），不能放在src/app/子目录下。当前文件位置错误，导致框架无法识别Middleware，需立即移动文件位置。

• 验证Matcher规则覆盖范围：确认你访问的路径是否完全匹配config.matcher中的规则，比如访问/admin/dashboard是否符合/admin/:path*，API请求路径是否包含在/api/:path*内；同时检查内部正则表达式是否准确匹配目标接口。

• 添加异常捕获：verify是异步函数，若执行过程中抛出异常会导致Middleware静默失败。建议在调用verify时添加try-catch捕获错误：

// 示例：替换原verify调用部分
if (matcher && matcher[0]) {
  token = request.headers.get(AUTHORIZATION_TOKEN);
  try {
    isValidToken = await verify(token);
  } catch (err) {
    console.error('Token验证错误:', err);
    isValidToken = false;
  }
} else {
  token = request.cookies.get(COOKIE_TOKEN)?.value;
  if (token) {
    try {
      isValidToken = await verify(JSON.parse(token));
    } catch (err) {
      console.error('Cookie Token验证错误:', err);
      isValidToken = false;
    }
  }
  // ...后续逻辑
}

• 重启开发服务器：Next.js开发服务器可能缓存旧代码，修改Middleware后需重启npm run dev，确保最新代码生效。

• 检查版本兼容性：确认使用的Next.js 13版本为稳定版，部分早期版本可能存在App Router与Middleware的兼容问题，建议升级至最新稳定版。

内容的提问来源于stack exchange，提问作者Em Ha Tuan