URL query params are not detected when navigating with the Next Link component

[muezz]

Context

What's your version of next-usequerystate?

"next-usequerystate": "^1.13.0"

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

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:27:24 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T6000
    Binaries:
      Node: 20.8.1
      npm: 10.1.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.12
      eslint-config-next: 13.4.12
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.3
    Next.js Config:
      output: N/A

Are you using:

• ✅ The app router

Description

When I navigate using the Next Link component (and there are query/search params in the href), the useQueryState does not detect the param.

I have verified by using the useSearchParams hook from Nextjs.

Reproduction

Please refer to this code sandbox.

Example: Steps to reproduce the behavior:

1. Open the Code Sandbox
2. Go to all pages by clicking on the top bar. All page names explain their purpose.
3. Notice how search params are not found when using this package.

[franky47]

Thanks a lot for the reproduction, I was able to get the same issue on the end-to-end test bench, so I now have a lot of failing tests to fix!

See #417 for progress.

[o-az]

@franky47 I'm curious if this issue is related to this:

const [search, setSearch] = useQueryState('query')

When I manually set the url to ?query=abc and log query I get null. Is this expected behavior?

[franky47]

@o-az what do you mean by "manually" ?

As an update on this issue, Next.js 14.0.3 broke a lot of scripts patching the history APIs (including this library). Turning on the experimental windowHistorySupport flag helps resolve the issue, and a general fix is coming in vercel/next.js#58861, which should be available in the next few canaries, and should make its way to Next.js 14.0.4.

[o-az]

@franky47 I edit the url in my browser from example.com to example.com?query=abc

[franky47]

@o-az Thanks for clarifying. Feel free to open another issue with your exact setup, this will help me understand your issue better and how to address it.

[frontendparham]

I have the same issue, how can I fix it?
"next": "^14.0.3"
"next-usequerystate": "^1.13.0"

[franky47]

The Next.js team just released [email protected], can you guys try it? It should solve the underlying issue.

[frontendparham]

I updated from "next": "^14.0.3" to "next": "^14.0.4-canary.37" and it fixes the issue.

[muezz]

@franky47 Is there a plan to fix this? I see the PR has not gone through which might mean that you are a bit busy. I am using this in production so thats why its a bit urgent for me.

[franky47]

Until Next.js 14.0.4 is stable, I don't have a way to fix it internally, the ball is in the Next.js camp. The PR only adds tests to track their progress.

Can you try and use 14.0.4-canary.37?

[franky47]

Next.js 14.0.4 has just been released, and contains the fix for shallow routing which caused this issue.

Solutions are to either update to 14.0.4, or if you're stuck on 14.0.3, use the windowHistorySupport experimental flag.

[github-actions]

🎉 This issue has been resolved in version 1.13.1-beta.1 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 1.13.1 🎉

The release is available on:

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

Your semantic-release bot 📦🚀