Next.js 13中Next-auth中间件按角色授权的配置异常问题

问题核心 #

在Next.js 13中使用Next-auth中间件实现路由权限控制时，将动态生成的路由数组（比如用concat拼接的routes）赋值给config.matcher会导致应用崩溃，但直接写字面量数组（如['/profile']）则正常运行。同时需要实现：

• 未认证用户无法访问/profile等私有路由
• 仅admin角色可访问/dashboard路由

崩溃原因 #

Next.js的中间件配置（包括matcher规则）是构建阶段静态解析的，不支持运行时动态生成的数组。你代码中用privateRoutes.concat(adminRoutes)生成的routes属于运行时计算的值，构建时Next.js无法正确解析这个matcher规则，进而引发崩溃。

解决方案 #

使用静态可解析的数组定义matcher，避免运行时数组方法，同时保留角色校验逻辑：

修改后的完整代码：

import { NextResponse } from 'next/server'
import { withAuth } from 'next-auth/middleware'

// 静态定义路由分组
const adminRoutes = ['/dashboard']
const privateRoutes = ['/profile']

export default withAuth(function middleware(req) {
    // 校验admin路由的角色权限
    if (
        adminRoutes.includes(req.nextUrl.pathname) &&
        req.nextauth.token?.role !== 'admin'
    ) {
        return NextResponse.redirect(new URL('/', req.url))
    }
})

// 使用静态可解析的数组赋值给matcher
export const config = {
    // 方式1：直接写合并后的字面量数组
    matcher: ['/profile', '/dashboard']
    // 方式2：用静态展开语法（构建时可被解析）
    // matcher: [...privateRoutes, ...adminRoutes]
}

关键说明 #

• [...privateRoutes, ...adminRoutes]属于静态展开语法，构建阶段Next.js能直接解析出最终的路由数组；而concat是运行时方法，无法被静态解析
• 如果有大量路由，可将所有需要匹配的路由统一放在一个静态常量数组中，直接赋值给matcher即可，不要使用push、concat等运行时数组操作

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