Hard reload issue

[imangm]

Hi,

I tried this package to modify query string without reloading the page or re-rendering the components but it seems whenever I update the querystring using useQueryState set function, the page reloads.

I'm using Next.js 13.5.6 (pages router) and I tried the example code as below:

import { useQueryState } from 'nuqs'
export const MyComp = () => {

   const [currentTab, setCurrentTab] = useQueryState('tab')
   useEffect(() => {
      console.log('page reloaded')
   }, [])

   return (
      <>
        <h1>Hello, {currentTab || 'anonymous visitor'}!</h1>
        <input value={currentTab || ''} onChange={(e) => setCurrentTab(e.target.value)} className="border p-2" />
        <button onClick={() => setCurrentTab(null)}>Clear</button>
      </>
   )
}

It's like when I type a letter, it refreshes the page and jumps out of the input box. Also the page reloaded is logged in the console.

Any ideas how can I make it work?

Thank you

[franky47]

If by reload you mean re-render, this is intended: Next.js will render the whole page when something changes in the URL.

This should not however unmount the page and/or lose focus out of input fields, maybe there is something wrong somewhere else?

In any case, I cannot reproduce your issue:

527.mp4

[imangm]

Thank you. I'm just leaving this here in case someone else had this problem. My problem was that I was loading components dynamically in Next.js with a random key. When I changed it to load it with a specific key that was not randomly changed during the page load/changes, it was fixed. The problem was not with nuqs nor next.js, it was the structure of my code.