在 Next.js 中间件匹配所有路由时出现“未捕获语法错误：意外记号 '<'”。

Question

我正在尝试根据角色将用户重定向到特定页面，使用以下代码在middleware.ts文件中：

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { getToken } from 'next-auth/jwt'

export async function middleware(request: NextRequest) {
    const token = await getToken({
        req: request,
        secret: process.env.JWT_SECRET
    }) as any
    if (token !== null && token.user.role === "admin") {
        if (request.nextUrl.pathname.startsWith('/admin')) {
            return NextResponse.next()
        }
        else {
            return NextResponse.redirect(new URL('/admin', request.url))
        }
    }
}
/* export const config = {
    matcher: [
     //   "/login",
     //  "/register",
     //  "/",
     //   "/admin"
    ],
} */

从文档中我所理解的是它将运行所有路由，但我收到了以下错误信息：

Uncaught SyntaxError: Unexpected token '<

然而，如果我将匹配器包含在中间件文件中，它将按预期工作：

export const config = {
    matcher: [
       "/login",
       "/register",
       "/",
       "/admin"
    ],
}

这个错误有解决方法吗？还是只需将所有页面添加到匹配器数组中？

- Mohammad

Answer 1

当他们说没有matcher的middleware对每个请求都运行时，这包括获取所有内容的请求，包括favicon、JavaScript文件、CSS文件……正如您可以在doc中阅读到的。

在您的if语句中，您正在说，任何不以'/admin"开头的内容都应该被重定向到'/admin"。因此，当浏览器请求那些JavaScript文件时，您正在将它重定向，导致发送HTML文件。这就是问题所在。

使用匹配器，您不会阻止浏览器访问构建页面所需的文件，并仅将中间件作用域限制在这些路径上：

export const config = {
  matcher: ["/login", "/register", "/", "/admin"],
};

- Youssouf Oumar

---

谢谢，我现在明白错误的原因了，将'/((?!api|_next/static|_next/image|favicon.ico).*)'添加到匹配器中就像文档中一样修复了它。 - Mohammad