How to add pathname?

[SOMONSOUM]

How can I add pathname along with searchParams with nuqs?

Example I want to add pathname: page with searchParams year=2024&type=export then click on a button to push to page(pathname).
url: https://example.com/page?year=2024&type=export

[franky47]

The useQueryState(s) hooks will only update the search params on the current page, but you can render a URL from state values using createSerializer, and feed it to the router.

Your example would look like this:

import { createSerializer, parseAsInteger, parseAsStringLiteral } from 'nuqs'

// Example of search params description, which can be reused in `useQueryStates`:
const searchParamsParsers = {
  year: parseAsInteger,
  type: parseAsStringLiteral(['export', ...] as const)
}

const serialize = createSerializer(searchParamsParsers)

function MyComponent() {
  function onClick() {
    const url = serialize('/page', {
      year: 2024,
      type: 'export'
    })
    // Note that you can't do shallow routing here (in the app router)
    router.push(url)
  }
  return <button onClick={onClick}>...</button>
}

[SOMONSOUM]

@franky47 Thank you much for your response. That's it what I want

[SOMONSOUM]

I have another question about parse type as array of string in searchParams

` const searchParams = {
firstYear: parseAsInteger,
secondYear: parseAsInteger,
firstdMonth: parseAsInteger,
secondMonth: parseAsInteger,
timeframeType: parseAsStringLiteral([
"year",
"semester",
"trimester",
"month",
] as const),

// I don't know how to parse as array of string 
 countries: 

}`

[franky47]

Try this:

countries: parseAsArrayOf(parseAsString)

If you want value safety (only accept certain strings as country codes), feel free to replace the parseAsString with a parseAsStringLiteral, which does validation on top (at the cost of having to provide all valid runtime values).