Is it possible to use <Link> instead of a function to update the url?

[LarsFlieger]

Hey everyone,
I was wondering if it is possible to change the state via a <Link> component instead of a <button>, since links have some advanced (new tab, SEO) compared to buttons.

I'm wondering if I can do something like this:

export default () => {
  const [name, setName] = useQueryState('name')

  return (
    <>
      <h1>{name}</h1>
      <Link to="?name='Lars'">}>Set name to Lars.</Link> // <-- SOMETHING LIKE THIS? 
    </>
  )
}

[franky47]

Yes, also you can use the serializer helper to render query strings from state values the same way the hook would, and feed that to a <Link> component (or an imperative router call).

[LarsFlieger]

Thanks for your super fast answer :D Do you have an example of it? Is it correct to use useQueryState to get the state?

Does it look like this:

"use client";
import Link from "next/link";
import { createSerializer, parseAsString, useQueryState } from "nuqs";

const searchParams = {
  name: parseAsString,
};

const serialize = createSerializer(searchParams);

export const ColorPicker = () => {
  const [name] = useQueryState("name");

  return (
    <>
      <p>{name}</p>
      <Link href={serialize({ name: "Lars" })}>Set name to Lars.</Link>
    </>
  );
};

[franky47]

Yes that would work.

Another tip, if you want to avoid repeating key names and parser config, you can use the same searchParams declaration object for both the serializer and the useQueryStates hook:

"use client";
import Link from "next/link";
import { createSerializer, parseAsString, useQueryStates } from "nuqs";

const searchParams = {
  name: parseAsString,
};

const serialize = createSerializer(searchParams);

export const ColorPicker = () => {
  const [{name}] = useQueryStates(searchParams);

  return (
    <>
      <p>{name}</p>
      <Link href={serialize({ name: "Lars" })}>Set name to Lars.</Link>
    </>
  );
};

[LarsFlieger]

Thanks for your answer. Very nice made! I like your package a lot!

[ivan-kleshnin]

Hey @franky47 There's some mismatch between docs claiming createSerializer is exported from "nuqs/server" and reality where it's exported from "nuqs". Also v2 does not export this helper at all but README is not uddated. Please elaborate what should we use in v2 and update docs if possible 🙏

[franky47]

createSerializer is exported in all three exports:

• import { createSerializer } from 'nuqs'
• import { createSerializer } from 'nuqs/server'
• import { createSerializer } from 'nuqs/parsers' (deprecated, same as nuqs/server)

This should allow you to use the helper in whatever realm you're in: a client component that uses the hooks or a server-only file.

As for v2, the only difference will be that the old nuqs/parsers export will be removed, and replaced with nuqs/server. If you are referring to the published 2.0.0-beta.1, it is indeed out of date with the v2/release branch, and I should publish an updated beta version.