Catch-all dynamic route doesn't catch a path with undefined path parameter

Bug report

Describe the bug

Hello! I’m experiencing an issue with a dynamic catch-all route and empty path parameters. For example:

/pages/[...slug]/index.tsx

Is not catching the route: http://localhost:3000/empty//parameter

Instead, it is loading default 404 page.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Create a simple catch-all page:

// /pages/[...slug]/index.js
export default function () {
  return <div>{'Hello!'}</div>;
}

Then try to load URL with empty path parameter:

http://localhost:3000/empty//parameter

Expected behavior

It should load the catch-all page, not a 404.

System information

• OS: macOS
• Browser (if applies): Chrome
• Version of Next.js: 9.4.0
• Version of Node.js: 14.0.0

[tomdohnal]

This comes down to the way Next.js handles matching routes.

It uses the path-to-regexp library to create Regexes which are then matched to the routes. For the catchall route, '/:path(.*)' is passed as an argument to the pathToRegexp function.

And it behaves like this:

const regex = path.pathToRegexp("/:path*");

console.log(regex.test("/catch/all/route")); // true
console.log(regex.test("/catch//route")); // false

If you pass '/:path(.*)' instead, it can handle empty path parameters:

const regex = path.pathToRegexp("/:path(.*)");

console.log(regex.test("/catch/all/route")); // true
console.log(regex.test("/catch//route")); // true

Using '/:path*' (instead of '/:path(.*)') to match the catch-all routes is all over the Next.js codebase and I’m not sure if it’s intentional or not.

If somebody from the Next.js team could tell if it’s intentional to NOT match routes with empty parameters it’d be awesome 😃

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.