How to ignore few routes when using next js middleware in matcher

Question

I am using next js in my project and trying to integrate middleware.js in my project, based on user roles mentioned in static.js that path only accessable, after login it's working fine but I am facing issue in login or logout URL. I want to skip or ignore these routes like my base path url path http://localhost:3000/abc/ and http://localhost:3000/abc/?logout=1

static.js set roles variable

    const userRoles  = {
    "UA-2" : ["/","/abc/", "/abc/logout", "/dashboard/accounthub/", "/professional/xs/application/summary/"],
}

middleware.js

import { NextResponse } from "next/server";
import { userRoles } from "./data/constants/static";

export const config = {
    matcher: [
      '/((?!api|_next/static|images|favicon.ico).*)',
    ],
}

export function middleware(req){
    const { pathname } = req.nextUrl;
    if (req.cookies.get('role')?.value) {
        let statusUser = userRoles[req.cookies.get('role')?.value].includes(pathname)
        if (!statusUser) { 
            return NextResponse.redirect(new URL("/talon/dashboard/accounthub/", req.url))
        }
    } else {
        return NextResponse.redirect(new URL("/", req.url))
    }
}

http://localhost:3000/abc/ is my base path, it's redirect to login page. Please suggest me how to fix this issue. Thanks in advance.

Answer 1

I had a similar issue and there are two ways you can do it.

1. You can add the route to the config matcher. Here is an docs example how to use it to match paths to ignore

Here is what it would look like, notice you just add abc to the matcher:

    export const config = {
matcher: [
  '/((?!abc|api|_next/static|images|favicon.ico).*)',
],}

2. You can match it in the middleware directly at the beginning, where you basically say, if it start with the path, proceed:

         if (request.nextUrl.pathname.startsWith('/abc')) return NextResponse.next()