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

[kweiberth]

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 :)

[Timer]

It sounds like Next.js should disallow multi-slash and auto-redirect.

[kweiberth]

@tomdohnal thanks for looking into this.

@Timer can you describe more what you mean by this? I'm unsure what you mean by multi-slash and auto-redirect, and also unsure if you want to disallow both of them, or rather disallow multi-slash but instead auto-redirect

[Timer]

To clarify what I meant, Next.js should intercept any request with double forward slashes and normalize it to one with a redirect.

[kweiberth]

Oh okay, cool, I think that could make sense. Do you think it's necessary to normalize and redirect? Would it be okay to leave it as an undefined path parameter, especially if we're using [...slug] catch-all? It might be valuable for the app to know if a certain parameter was undefined (as opposed to changing the number of parameters in the scenario of normalizing)

[kweiberth]

Hello team 👋 It looks like you are going to be normalizing double slashes to a single slash. Will there be a way to opt out of this? I would like to be able to conserve the data of the empty param. So for my original example, with page:

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

and URL:

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

I'd like to have query.slug to be

['empty', undefined, 'parameter']

I have legacy link structure that I need to be able to handle with catch-all route. My legacy link structure looks like:

https://song.link/https://open.spotify.com/track/69o00fGvsei250jH7bF781

Do you know how I can handle this URL?

[kweiberth]

Ah, I think I figured it out. I can define a rewrite:

{
    source: `/(https?\\:)/(.*)*`,
    destination: '/api/redirect',
},

Then in the API route I can grab req.url, which would be /https://open.spotify.com/track/69o00fGvsei250jH7bF781 in my example above, and then I can parse it and redirect to the correct canonical URL.

Hopefully the work in #15171 won't conflict with this solution, but I don't think it will bc my source definition only checks for that first rewrite. If Next.js removes the extra double slash before this, I'll just have to modify my logic in my API route when handling the redirect

[dalfriedrice]

@Timer @kweiberth
Can someone give any insight to my issue
Its like, I am using [...catch_all_urls] routing to consume my routes

So, the issue is,
When I am entering a url such as promo/cc///cd///dcscc (url with multiple slashes) 404 page gets rendered by nextjs, but it don't reads the runtime variable process.env.ECS_Cluster in next.config.js but if I give a proper url like promo/cc/dscsdcs then in next.config.js it is properly reading runtime variable process.env.ECS_Cluster.

Can one of you or someone from next team give an explanation around this.

[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.