How to exclude home page (index.js) in nextJS middleware matcher?

[isas5675]

Summary

I have a middleware file in nextJS. I don't want the middleware to run on these 4 different paths (pages):

• home page
• about page
• contact page
• sales page

The middleware should run on every other path.

According to nextJS official docs, we can exclude a path like in the code below.

But how to mention home page as a path to exclude? The path is "/". But it is not accepting if I place this in the matcher.

The other 3 paths (about, contact, sales) are properly being excluded by the middleware.

Any idea on how to achieve this?

Additional information

// middleware.js

export async function middleware(req) {
  // SOME MIDDLEWARE LOGIC GOES HERE...
}

// HOW TO MENTION HOME PAGE IN THE FOLLOWING MATCHER TO EXCLUDE IT?
export const config = {
  matcher: ['/((?!about|contact|sales).*)'],
};

Example

No response

[alejandrodizor]

Hey @isas5675 !

Try only with $:

export { default } from "next-auth/middleware";

export const config = {
  matcher: ["/((?!register|api|login|$).*)"],
};

I hope it helps you, greetings.

[isas5675]

@alejandrodizor Thanks for your response.

It is not working even with $, as suggested by you. Any other ideas?

[ofuochi]

It works for me as shown below

export { default } from 'next-auth/middleware';

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

[sKopheK]

I'd swear it had tried it this way but did not work, but just trying out again now it works for some reason :D thanks @alejandrodizor

[jorgegarba]

Works fine for me, don't forget adding those directories that contains your assets, in this example I'm using img folder to store my assets and it would not be able to show images so I had to add the |img| path to the matcher RegEx

[icyJoseph]

Try this, "/((?!about|contact|sales).{1,})".

Example:

const { pathToRegexp } = require("path-to-regexp");

const paths = [
  "/",
  "/about",
  "/contact",
  "/sales",
  "/wrong",
  "/wrong/welcome",
  "/primary/bar",
  "/secondary/foo",
  "/favicon.ico",
  "/_next/something",
  "/a",
];

const matcher = pathToRegexp("/((?!about|contact|sales).{1,})");

paths.forEach((path) => {
  console.log({ path, test: matcher.test(path) });
});

It outputs:

{ path: '/', test: false }
{ path: '/about', test: false }
{ path: '/contact', test: false }
{ path: '/sales', test: false }
{ path: '/wrong', test: true }
{ path: '/wrong/welcome', test: true }
{ path: '/primary/bar', test: true }
{ path: '/secondary/foo', test: true }
{ path: '/favicon.ico', test: true }
{ path: '/_next/something', test: true }
{ path: '/a', test: true }

[reedom]

In real world, it shall work enough.

Even though, yet better to know:

const paths = [
  '/about',
  '/about/us`
  '/about_us',
];

const matcher = pathToRegexp('/((?!about).{1,})');

paths.forEach((path) => {
  console.log({ path, test: matcher.test(path) });
});

{ path: '/about', test: false }
{ path: '/about/us', test: false }
{ path: '/about_us', test: false } # is this what you want?

To gain more strict value, you want to specify $ and/or /.

    const matcher = pathToRegexp('/((?!about$|about/).{1,})');

{ path: '/about', test: false }
{ path: '/about/us', test: false }
{ path: '/about_us', test: true }