Sorting of query string keys

[hugotiger]

To avoid accidentally creating duplicate content on Google it would be handy if the library could sort the keys in a predictable way. Maybe it's already possible and if so I'm wondering how that can be achieved?

As an example setting the following URL shouldn't be possible using the library acme.com/?b=foo&a=foo. I'd like it to alway become acme.com/?a=foo&b=foo instead.

[franky47]

To avoid accidentally creating duplicate content on Google

If your main concern is SEO, you should do this kind of sorting in the metadata canonical URL you declare to crawlers: https://nuqs.47ng.com/docs/seo

[hugotiger]

Hmmm yeah that's correct. But wouldn't it be even easier if it was sorted out of the box? That's for example how the popular query-string package works. This would mean that a lot of situations you could skip defining canonicals at all (assuming the query string should be indexable).

I for example have to do this right now which would wouldn't be needed if the query params were sorted in a stable order.

export const generateMetadata = async ({ searchParams }) => {
  const stringifiedSearchParams = stringify(searchParams, { arrayFormat: 'comma' })
  const searchString = stringifiedSearchParams ? `?${stringifiedSearchParams}` : ''

  return {
    alternates: {
      canonical: `/foo` + searchString,
    },
  }
}

[franky47]

Would you like to open a PR?

This would be a good place to sort the entries:

nuqs/packages/nuqs/src/url-encoding.ts

Line 6 in 9dc148f

for (const [key, value] of search.entries()) {

If you do, could you please base it off of v2, as this would be a behavioural change that might impact consuming test code (and internal test code too for that matter).

[franky47]

This is available in nuqs@2.6.0-beta.2, feel free to try it:

Complete docs (with demo): https://nuqs-next.47ng.com/docs/options#processing-urlsearchparams

<NuqsAdapter
  processUrlSearchParams={(search) => {
    const entries = Array.from(search.entries())
    entries.sort(([a], [b]) => a.localeCompare(b))
    return new URLSearchParams(entries)
  }}
>
  {children}
</NuqsAdapter>

[hugotiger]

This is an awesome solution! Thanks for pinging 🙌

Added a minor comment in the PR on the docs for it (don't know if I needed to tag you or not).