Change url on a page that has encoded query parametr causes page reload and internal error

[HamAndRock]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #22 SMP Tue Jan 10 18:39:00 UTC 2023
    Binaries:
      Node: 18.14.2
      npm: 9.5.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.4.3
      eslint-config-next: 13.4.1
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/awesome-ishizaka-smm5t

To Reproduce

Go directly to https://smm5t5-3000.csb.app/?test=%C5%99e%C5%99icha%2022 and click on the CTA.

This will cause:

Failed to fetch RSC payload. Falling back to browser navigation. TypeError: Failed to execute 'fetch' on 'Window': Failed to read the 'headers' property from 'RequestInit': String contains non ISO-8859-1 code point.

This is caused because the query string contains non valid chars for headers, however in my code as you can see I am encoding that, so this should not be happening.

 const onClick = () => {
    const query = "řeřicha 22";
    router.push(`/?test=${encodeURIComponent(query)}`);
  };

If you land just on https://smm5t5-3000.csb.app/ and hit the CTA it works just fine.

Describe the Bug

When landing on a URL with already encoded query string and then navigation to diffrent query with again non valid query string that needs decoding, it seems to throw an error.

Expected Behavior

Page should not completly reload and should accept my encodeUriComponent call.

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

self, codespaces

[HamAndRock]

I was able to fix this behaviour by patching the header value internally in next with a normalize() call to strip non valid chars

[HamAndRock]

@timneutkens Hey, again sorry to bother you but this is breaking our production app right now without using patched next.js version. I assume more people using non-english characters in urls are having same issues and this is a big deal breaker for using the app directory.

[timneutkens]

Please don't ping me on every issue you're running into. We have hundreds of issues to get back to (see screenshot) with 50+ per day being added, not even including GitHub Discussions.

[HamAndRock]

Hey sorry about that, I ran into this because we build non-english website and this was a blocker for us and it's not something we can solve with workaround since this is Next internal issue. I will limit my pings, sorry about that I understand you have a lot on your plate. Have a great rest of your day.

[HamAndRock]

I assume this fixes the issue: https://github.com/vercel/next.js/pull/51017, will verify later with canary

[timneutkens]

Going to close this issue per the comment above 👍 If it's not solved let me know! Couldn't verify as the sandbox is gone.

[HamAndRock]

I am out of office, but we updated nextjs recently after this went out and the patch was no longer necessary. As far as I am aware. Thank you and the team for all the work!

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.