Keys with special characters are not encoded, reading encoded keys result in incorrect state after sync operation

[lecbyjak]

Context

What's your version of nuqs?

    "next-usequerystate": "^1.17.4",

Next.js information (obtained by running next info):

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 23.5.0: Wed May  1 20:16:51 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T8103
    Binaries:
      Node: 18.19.1
      npm: 10.2.4
      Yarn: N/A
      pnpm: 8.15.9
    Relevant packages:
      next: 13.4.1
      eslint-config-next: 13.4.1
      react: 18.2.0
      react-dom: 18.2.0

Are you using:

• ❌ The app router
• ✅ The pages router
• ❌ The basePath option in your Next.js config
• ❌ The experimental windowHistorySupport flag in your Next.js config

Description

Having a special character (&) in key, causes url read issues.

Reproduction

When using following keyMap the keys in the URL are not encoded resulting in incorrect read/sync

const [traits, setTraits] = useQueryStates({
// this object is dynamic based on API response, but for testing purpose we use hardcoded value
['Duration & Location']: parseAsString
});

When using following keyMap with encoded keys, the URL is correctly encoded, but after sync operation 'useQueryStates' returns
traits as { 'Duration%20%26%20Location': null }. Using a debugger I saw that the query state object was { 'Duration+%26+Location': null }

const [traits, setTraits] = useQueryStates({
[encodeURIComponent('Duration & Location')]: parseAsString
});

I have also tried to use following keyMap but with the same result

const [traits, setTraits] = useQueryStates({
['Duration & Location'.replace(/&/g, '%26')]: parseAsString
});

[franky47]

Thanks for the report. It looks like the key should be encoded in the same way as the value here:
https://github.com/47ng/nuqs/blob/next/packages%2Fnuqs%2Fsrc%2Furl-encoding.ts#L7

I'll run some tests and come back to you.

[franky47]

I have published a fix in #600 via a snapshot release, could you give it a try and let me know if it solves your problem?

npm install [email protected]

[lecbyjak]

Awsome. Works!

Thanks for super quick response 💚

[github-actions]

🎉 This issue has been resolved in version 1.17.8 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀