Encoded slashes not working as expected in production in a catch-all route

[thedaviddelta]

What version of Next.js are you using?

10.0.2

What version of Node.js are you using?

14.16.1

What browser are you using?

Firefox & Brave

What operating system are you using?

Ubuntu Linux

How are you deploying your application?

Vercel

Describe the Bug

My application is using a catch-all route which tests that the slug length is 3 or less and returns notFound if other. The last slug part has an arbitrary content, including another slashes, but it's encoded using encodeURIComponent so it doesn't get to conflict with the catch-all filter.
Locally, everything works correctly, but in production (in Vercel) breaks when using slashes, as reported in thedaviddelta/lingva-translate#18. I've tested this issue reports and it's not only in links but in everything that contains a slash i.e. https://lingva.ml/en/es/like%20%2F%20dislike, even though locally it works great (fell free to clone that repo to test it).

Expected Behavior

To don't break nor send 404 when using encoded slashes on filtered catch-all routes, as works locally.

To Reproduce

Go to https://lingva.ml and write any translation that contains a slash.

[haishanh]

I encountered exact the same issue. This should be a Vercel issue not a Nextjs one. I guess Vercel somehow received the decodeURIComponent decoded value and determines route based on this value, / will used as URL path separator then.

My workaround is encodeURIComponent the url and then feed it to a base64url encode function. And do the reverse step in getServerSideProps. I'm using the base64url encode and decode function from Deno std, just in case someone need it too.

[thedaviddelta]

Thank you for your reply, Haishan.

That's a wonderful workaround, but I don't like it for Lingva because I'm interested in providing a queriable URL for various purposes. The only way I would apply that is to conditionally encode/decode to base64 if it contains a slash. I will consider it.

But anyway thanks for the idea, that may help others with the same issue.

And if you say it's a Vercel bug (which is very possible) I hope some Vercel member sees this issue and tries to fix it.

Regards, David.

[ijjk]

Hi, this should be fixed in v11.0.2-canary.6 of Next.js, please upgrade and give it a try!

[thedaviddelta]

Sorry for the late reply @ijjk.

Thanks for your help. I've just tested it out and it seems to work perfectly.
Here's my previous example and this is the same URL working on the updated preview branch.
I've also tested the example from the guy that opened the issue in my repo as well as its current behaviour.

I think it's ready to merge. Thanks again.

Regards, David.

[thedaviddelta]

Hello again.

I'm sorry to reopen the issue, but this bug has reappeared, this time on API routes.
Another guy opened a new issue in my project (thedaviddelta/lingva-translate#68) with the same solved issue we had on the catch-all route, but this time on the API side.
This is the example he shows, which is working correctly locally, and this is the same example working on the front-end too.

Thanks again.
Regards, David.

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