URL's search params get encoded on page load.

[wkd-kapsule]

Link to the code that reproduces this issue

https://github.com/wkd-kapsule/next-router-demo

To Reproduce

1. Go to the production site.
2. Use a special character in the URL's search params, such as /. Whether by directly typing it or clicking the button on the page.
3. Watch the URL being encoded before your eyes as the page loads.

Current vs. Expected behavior

Current behavior:

Directly typing a url or using useRouter will encode the URL's search params after page loading.

Expected behavior:

I'd like to be able to use characters such as / or $ in a URL's search params.

Context:

I use URL seach params to store some state in my app. The thing is that it's a path, thus containing /. In dev mode, everything is fine but somehow in production, / gets encoded into %2F once the page has loaded. It does it whether I directly type the url and press Enter or click on button with useRouter().push.

I've reproduced this in a minimal repo but for some reason it works fine when using useRouter().push. The URL gets encoded only when you manually type it and press Enter. There is basically no difference in the way I use useRouter().push() in this repo and in my app, I can't grasp why both behaves differently.

NOTE: I know that I can just decode it to get the original character but my issue is more visual than technical. Having encoded characters could discourage the users of my app to use the URL to navigate. Whereas this is exactly why I put that path in the URL, so the user can directly go where they need, without having to use the interface.

Here's the demo

Encoded.url.mp4

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 16272
  Available CPU cores: 8
Binaries:
  Node: 20.13.1
  npm: 10.8.1
  Yarn: N/A
  pnpm: 8.15.5
Relevant Packages:
  next: 15.0.4-canary.19 // There is a newer canary version (15.0.4-canary.20) available, please upgrade!
  eslint-config-next: 15.0.3
  react: 19.0.0-rc-69d4b800-20241021
  react-dom: 19.0.0-rc-69d4b800-20241021
  typescript: 5.6.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Navigation

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

I couldn't pin which Next.js versions first caused the issue because it actually occured a while ago. I didn't report it at the time as being constantly on the latest canary version, I just imagined it would eventually get solved. Now that's been several months already so I thought I better report it.

Nonetheless, I can tell you that I'm using Google Chrome and that everything works as expected in Microsoft Edge.