Next.js中间件matcher使用常量动态生成路由数组失效问题咨询

Hi，我碰到过类似的问题，其实核心原因和Next.js中间件的config.matcher工作机制有关，咱们一步步拆解：

为什么动态生成的matcher数组会失效？ #

Next.js的中间件配置（包括matcher）是构建阶段静态分析的——也就是说，Next.js在编译你的应用时，需要直接读取到matcher的具体值，而不是等到运行时再通过函数计算出来。

你的getProtectedRoutes函数虽然在运行时能正确生成路由数组，但构建工具（比如Turbo或者Webpack）没办法在编译阶段执行这个函数并解析出最终的路由列表。这就导致两种问题：

• 要么matcher最终是空数组或者不符合预期的内容，中间件根本不会触发在你想要保护的路由上；
• 要么如果你的中间件逻辑里有重定向规则，因为matcher没正确匹配，会导致无限重定向（比如所有路由都被中间件处理，反复跳转到登录页），出现ERR_TOO_MANY_REDIRECTS。

而硬编码的数组是静态字面量，构建工具能直接识别，所以就能正常工作。

解决方法 #

这里有几个可行的方案，你可以根据自己的场景选择：

1. 提前静态生成路由数组（最推荐） #

把需要的matcher路由数组直接在constants.ts里静态计算好，而不是在middleware里动态生成：

// constants.ts
export const NAV_LINKS = {
  navMain: [
    {
      title: "Getting Started",
      items: [
        { title: "dashboard", url: "/dashboard" },
        { title: "Users", url: "/users" },
      ],
    },
  ],
};

// 静态生成带通配符的保护路由
export const PROTECTED_ROUTES = NAV_LINKS.navMain.flatMap(section => 
  section.items.map(item => `${item.url}/:path*`)
);

// 组合最终的matcher数组
export const MATCHER_ROUTES = [...PROTECTED_ROUTES, "/login"];

然后在middleware.ts里直接引用：

// middleware.ts
import { MATCHER_ROUTES } from "./constants";

export const config = {
  matcher: MATCHER_ROUTES,
};

// 你的中间件逻辑...

这样因为MATCHER_ROUTES是在模块加载时就计算好的静态常量，构建工具能正确解析它的内容。

2. 检查中间件的重定向逻辑 #

如果还是出现重定向循环，要确保你的中间件逻辑里有明确的边界：

• 已登录用户访问/login时，要跳转到首页/仪表盘；
• 未登录用户访问保护路由时才跳转到/login，不要让/login本身被保护逻辑触发重定向。

比如示例逻辑：

export function middleware(request: NextRequest) {
  const isLoggedIn = // 你的登录状态检查逻辑，比如从cookie/headers获取
  const path = request.nextUrl.pathname;

  // 未登录且访问保护路由 → 跳登录
  const isProtectedRoute = PROTECTED_ROUTES.some(route => 
    path.match(new RegExp(`^${route.replace(":path*", ".*")}`))
  );
  if (!isLoggedIn && isProtectedRoute) {
    return NextResponse.redirect(new URL("/login", request.url));
  }

  // 已登录且访问登录页 → 跳仪表盘
  if (isLoggedIn && path === "/login") {
    return NextResponse.redirect(new URL("/dashboard", request.url));
  }

  return NextResponse.next();
}

3. 使用枚举定义路由（可选） #

如果你的路由数量不多，也可以把路由定义成枚举，再组合成matcher数组，这样也是静态可解析的：

// constants.ts
export enum ROUTES {
  DASHBOARD = "/dashboard",
  USERS = "/users",
  LOGIN = "/login",
}

export const MATCHER_ROUTES = [
  `${ROUTES.DASHBOARD}/:path*`,
  `${ROUTES.USERS}/:path*`,
  ROUTES.LOGIN,
];

总结 #

核心就是记住：Next.js中间件的config.matcher必须是静态可求值的，不能依赖运行时的函数计算。只要把路由数组提前静态生成好，问题就能解决啦。

内容来源于stack exchange