Middleware in a [dynamic] route subdirectory runs against parent urls

[timfee]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.4.0: Mon Feb 21 20:35:58 PST 2022; root:xnu-8020.101.4~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.14.2
      npm: 8.5.0
      Yarn: 1.22.18
      pnpm: N/A
    Relevant packages:
      next: 12.1.0
      react: 17.0.2
      react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

With a page structure like:

// pages/index.js
// pages/[customer]/_middleware.js
// pages/[customer]/dashboard.js

And a pages/[customer]/_middleware file containing:

export function middleware(req: NextRequest) {
  console.log(req.url)
}

I would expect _middleware to only apply to pages that resolve within that subdirectory, however it gets applied to every request:

wait  - compiling /[team]/_middleware...
event - compiled client and server successfully in 114 ms (765 modules)
http://localhost:3000/api/auth/session
http://localhost:3000/api/session
wait  - compiling /api/auth/[...nextauth]...
wait  - compiling /api/session...
event - compiled client and server successfully in 86 ms (779 modules)
http://localhost:3000/customer/1/dashboard
http://localhost:3000/_next/static/chunks/main.js?ts=1648344461416
http://localhost:3000/_next/static/chunks/webpack.js?ts=1648344461416
http://localhost:3000/_next/static/chunks/react-refresh.js?ts=1648344461416
http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1648344461416
http://localhost:3000/_next/static/development/_buildManifest.js?ts=1648344461416
http://localhost:3000/_next/static/development/_ssgManifest.js?ts=1648344461416
http://localhost:3000/_next/static/chunks/pages/_error.js?ts=1648344461416
http://localhost:3000/_next/static/development/_middlewareManifest.js?ts=1648344461416
http://localhost:3000/api/session
http://localhost:3000/api/auth/session
http://localhost:3000/favicon.ico

Expected Behavior

I would expect the middleware not to be invoked on an unmatched route.

To Reproduce

See above description with a trivial example.

[balazsorban44]

This has recently been fixed in #32601. Please give canary a try!

[bryanltobing]

Hi, I believe this has been fixed. but with that case adding _middleware.ts in dynamic routes. when I try to deploy to vercel. i got 404 not found instead. I created the issue here #35893

[balazsorban44]

The fix has been reverted as it seemed to break in certain cases. I'm reopening because this needs further investigation.

[javivelasco]

Hi there! Precisely because of this kind of issues we have changed the way you define middleware. Before we were allowing it to define it aside with pages which created the mental model that a middleware would trigger when a page renders but making it work like that is very tricky.

Instead now you can define a single middleware and decide the matcher that you will use to trigger it. You can also define multiple patterns and branch in the middleware execution. This makes the model much simpler and familiar as you define matchers in the same way you do for configuration headers, rewrites and redirects.

Therefore I'm closing this issue!
Thanks for reporting :)

[timfee]

Thanks, @javivelasco :)

For future readers, here's the details: https://nextjs.org/docs/messages/middleware-upgrade-guide#no-nested-middleware

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.