How to update the <title> html tag when nuqs state changes?

[Sparticuz]

I've got nuqs working great to change the state of my data in my form, but now I want some of that state to be displayed in the <title> header tag. I'm using nextjs, so I'm using generateMetadata() on my page.tsx file. It will be fine on the inital state, but fails to update based on the state. Does anyone have any suggestions?

[franky47]

Try setting shallow: false, as generateMetadata is a server-side called function, so you need to do a round-trip to the server. Note that this is kind of dumb (but I don't make the Next.js rules), unless you actually need those search params on the server for SSR.

If you want to update it client-side (so that it shows nicely in the browser), you could do it this way:

// Assuming for the example that we want `?title=foo` to show a title of "foo"
const [title] = useQueryState('title')

useEffect(() => {
  document.title = title
}, [title])

[Sparticuz]

Quick reply! I was just answering my own question and I did find that useEffect in my client component is the correct answer.