Issue after updating to 10.0.5

[eliorivero]

Hi, I have a URL that in one of the URL segments, has two colons as part of an id that is received from an incoming link. It looks like this:
/some/1234:abc:def/thing
After updating from 10.0.1 to 10.0.5, the colons started being encoded when issuing push.replace().

The issue comes from one of the core changes in the release:
Ensure path encoding is handled consistently for prerendered pages: #19135

Specifically, this one:
https://github.com/vercel/next.js/pull/19135/files#diff-29e1b9bc8e17f47fa46cad2f0e0e54d5bbb268adee26051c21d929902a2a5c8cR164-R172

The URLs are now encoded as
/some/1234%3Aabc%3Adef/thing
which is not something I desired to do.

Is there a workaround or option to avoid this?

[eliorivero]

Hi @ijjk since you made the change, maybe you know how this could be solved? Maybe inside a slash-delimited segment, split again by colon?

[eliorivero]

Thanks for the response. When router.push() is called, the URL in the browser's address bar changes to one with the colons encoded.

Before this update, after calling router.push() the URL in the address bar was something like
https://example.tld/some/1234:abc:def/thing
which is what I expected.

However, in 10.0.5, it's
https://example.tld/some/1234%3Aabc%3Adef/thing

[ijjk]

The value shouldn't be modified if you are just using href with a dynamic route e.g. /pages/some/[id]/thing.js and <Link href='/some/1234:abc:def/thing'> or router.push('/some/1234:abc:def/thing') although if you use dynamic route interpolation the values will be encoded when interpolating.

Note: the URL paths should be encoded and if an invalid character (fails to decode with decodeURIComponent) is in the URL like %something% it will be considered a bad request.

[eliorivero]

Thanks a lot for the response, that seems to be the issue. I was just making a small test case to better show this.

with a repo https://github.com/eliorivero/next-route-test/tree/main/pages

I am indeed using router.push() with string interpolation. I need it, because I've multiple paths to use so it would be very cumbersome to interpolate them manually in order to use router.push() without its internal interpolation.

Doesn't this feel buggy and/or counterintuitive? If you look at the screen recording above, when you reach a page using Link, it works, and not when using router.push() with route interpolation, although it works if the router.push() uses the direct path as you pointed above.

If this is the way it's meant to be, maybe there could be an option to disable encoding?

Thanks a lot again!

[ijjk]

Hmm it's not really buggy and is described in the documentation that this is the expected behavior. When using the string variant of href you are required to handle encoding yourself but when using the URL object variant the encoding is handled for you which is shown in the documentation here https://nextjs.org/docs/routing/introduction#linking-to-dynamic-paths

Can you explain the specific problem with the URL being properly encoded more? The decoded value is provided under params/query so you shouldn't need to add any manual handling to decode the value and as mentioned above if an improperly encoded value is provided in the URL it will result in a bad request (400 response) so the encoding during interpolation helps prevent this.

[eliorivero]

Thanks for all the further info. The issue is that the URL is changed in the address bar. I initially noticed this issue due to a failed Cypress test that checked the URL and expected to find the : instead of %3A. Right now my tests are failing because of this change in 10.0.5, and they were passing with 10.0.1.