Catch-all routes do not support middleware

What version of Next.js are you using?

12.0.7

What version of Node.js are you using?

16.10.0

What browser are you using?

Doesn’t matter

What operating system are you using?

macOS

How are you deploying your application?

next start, next dev

Describe the Bug

My application has a catch-all route.

/pages
└─catch_all
   └─[...slug]
      └─index.js

It works as expected: all requests to /catch_all/**/* is handled by this route.

But when I try to add _middleware to directory with catch-all route like this:

/pages
└─catch_all
   └─[...slug]
      ├─_middleware.js
      └─index.js

In dev mode application freezes with this error, when route is requested:

wait  - compiling /catch_all/[...slug]/_middleware...
error - HookWebpackError: Catch-all must be the last part of the URL.
error - unhandledRejection: HookWebpackError: Catch-all must be the last part of the URL.

On next build application build crashes with this error:

> Build error occurred
Error: Catch-all must be the last part of the URL.
    at UrlNode._insert (/Users/aozhigin/Documents/education/catch-all-routes-app/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:56:19)
    at UrlNode._insert (/Users/aozhigin/Documents/education/catch-all-routes-app/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:138:40)
    at UrlNode._insert (/Users/aozhigin/Documents/education/catch-all-routes-app/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:138:40)
    at UrlNode.insert (/Users/aozhigin/Documents/education/catch-all-routes-app/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:8:14)
    at /Users/aozhigin/Documents/education/catch-all-routes-app/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:161:46
    at Array.forEach (<anonymous>)
    at Object.getSortedRoutes (/Users/aozhigin/Documents/education/catch-all-routes-app/node_modules/next/dist/shared/lib/router/utils/sorted-routes.js:161:21)
    at /Users/aozhigin/Documents/education/catch-all-routes-app/node_modules/next/dist/build/index.js:247:44
    at Span.traceFn (/Users/aozhigin/Documents/education/catch-all-routes-app/node_modules/next/dist/trace/trace.js:67:20)
    at /Users/aozhigin/Documents/education/catch-all-routes-app/node_modules/next/dist/build/index.js:239:85

Expected Behavior

Added _middleware runs for nested catch-all routes.

For example, in submitted repo, when requesting route /catch_all/s/l/u/g/s/l/u/g/slug/, I expect to see this message in console:

In middleware for catch_all subroute slug. Pathname /catch_all/s/l/u/g/s/l/u/g/slug/

I don’t see this bug when adding middleware for dynamic route with single slug (e.g. /pages/dynamic_route/[slug]/_middleware.js), so it’s only logical that this should work for catch-all routes.

To Reproduce

You can reproduce this bug in this repo https://github.com/showmeyourhits/nextjs-catch-all-middleware.

• Clone the repo

git clone [e-mail]:showmeyourhits/nextjs-catch-all-middleware.git

• Install deps

npm install

• switch to branch with added middleware

git checkout added_catch_all_middleware

Dev mode error

• start app in dev mode

npm run dev

• go to

http://localhost:3000

• click on Go to catch-all subroute. Application freezes. Other navigation attempts (click on other links/page refresh) will produce the error in console.

Build error

• build the app

npm run build

[balazsorban44]

This will likely be fixed by https://github.com/vercel/next.js/pull/32601

[Schniz]

I believe this is not the case anymore now that we have a single root middleware 🙏