0

I've got a multilingual JSS / Next.JS site. I am integrating Vercel Middleware and looking to exclude certain paths from the middleware without invoking middleware in the process of checking. As a refresher, here are the Vercel docs on how this can be done:

https://vercel.com/docs/functions/edge-middleware/middleware-api#config-object

In general, I'm seeing some unexpected behavior; primarily being that under some conditions, middleware does not run on the homepage even when I would expect it to, and this only seems to happen on my JSS site and not on a vanilla Next.JS site.

Scenario 1 ✅

My middleware is:

async function middleware(req) {
  console.log('Middleware processing:', req.nextUrl.pathname);
}

When I load the home page I see this in my console:

Middleware processing: /
Middleware processing: /images/logo.svg
Middleware processing: /_next/static/chunks/webpack.js
Middleware processing: /_next/static/chunks/react-refresh.js
Middleware processing: /_next/static/chunks/main.js
Middleware processing: /_next/static/chunks/pages/_app.js
Middleware processing: /_next/static/development/_ssgManifest.js
Middleware processing: /_next/static/development/_buildManifest.js
Middleware processing: /_next/static/chunks/pages/%5B%5B...path%5D%5D.js
Middleware processing: /_next/static/development/_devMiddlewareManifest.json
Middleware processing: /images/icon.svg
Middleware processing: /manifest.webmanifest
Middleware processing: /favicon.ico

Scenario 2 ✅

Then I add an empty config above the middleware function:

export const config = {
  matcher: [

  ]
};

async function middleware(req) {
  console.log('Middleware processing:', req.nextUrl.pathname);
}

I refresh the home page. I see no console logs. This seems to be expected, given that the matcher array is empty; so the middleware shouldn't run for any path.

Scenario 3 🤨

I add a negative lookahead regex pattern to the config to match any path that does not start with any of the listed patterns.

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

I refresh the home page. I see nothing in the logs, meaning that the middleware didn't run even for the homepage path /. This is somewhat unexpected. The regex is supposed to allow the middleware to run on paths that don't match the given negative lookaheads. It should have matched the root /.

On a vanilla Next.JS site, the middleware DOES run on the homepage, given this configuration.

Scenario 4 🤨🤨

I explicitly add the home page path to the config array:

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

I refresh the homepage. I see:

Middleware processing: /

So, in my case, I need to explicitly add the home page path to have middleware run on the homepage when a negative lookahead is present. Where it gets interesting is that, going back to Scenario 3, this is not necessary on a vanilla Next.JS site.

Does anyone have a good explanation for this?

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.