Next.js 14 App Router Implementation: Can I get cleaner urls?

[dante-blitz]

Hi there,

I am new to implementing Algolia with Next.js

I have it all working but I want to ask if the routing url is in the correct format. Heres what I'm getting...

?Events%5BrefinementList%5D%5BmusicGenres%5D%5B0%5D=Afrobeats

Should the urls be cleaner? The documentation provides the following example...

https://example.org/?instant_search[query]=galaxy&instant_search[menu][categories]=All Unlocked Cell Phones&instant_search[refinementList][brand][0]=Apple&instant_search[refinementList][brand][0]=Samsung&instant_search[page]=2

Thanks in advance.

Below is a simplified version of my code...

'use client'

// npm
import React from 'react'
import algoliasearch from 'algoliasearch/lite'
import { InstantSearchNext } from 'react-instantsearch-nextjs'
import { Configure, Hits, RefinementList } from 'react-instantsearch'

const Component = (indexName) => {

  const searchClient = algoliasearch(
    process.env.NEXT_PUBLIC_SEARCH_APP_IP
    process.env.NEXT_PUBLIC_SEARCH_READ_API_KEY
  )

  return(
    <InstantSearchNext
      indexName={indexName}
      searchClient={searchClient}
      future={{
        preserveSharedStateOnUnmount: true,
      }}
      routing={{
        router: { cleanUrlOnDispose: false },
      }}
    >
      <Configure hitsPerPage={12} />
      <RenderState indexName={indexName} />

      {/* ... */}

    </InstantSearchNext>
  )
}
 

And here are the relevant dependencies...

  "dependencies": {
    "next": "14.2.4",
    "react": "^18",
    "react-dom": "^18",
    "algoliasearch": "^4.24.0",
    "react-instantsearch": "^7.12.0",
    "react-instantsearch-nextjs": "^0.3.5",
  }

[Haroenv]

You can use the option encode: false for qs by using the qsModule key of createURL in routing. See more info here: https://github.com/ljharb/qs?tab=readme-ov-file#stringifying and the default createURL function you can modify to pass that option:

instantsearch/packages/instantsearch.js/src/lib/routers/history.ts

Lines 310 to 321 in e7cf000

	createURL = ({ qsModule, routeState, location }) => {
	const { protocol, hostname, port = '', pathname, hash } = location;
	const queryString = qsModule.stringify(routeState);
	const portWithPrefix = port === '' ? '' : `:${port}`;
	// IE <= 11 has no proper `location.origin` so we cannot rely on it.
	if (!queryString) {
	return `${protocol}//${hostname}${portWithPrefix}${pathname}${hash}`;
	}
	return `${protocol}//${hostname}${portWithPrefix}${pathname}?${queryString}${hash}`;
	},

const routing = {
  router: history({
    createURL({ qsModule, routeState, location }) {
      const { protocol, hostname, port = "", pathname, hash } = location;
      const queryString = qsModule.stringify(routeState, { encode: false});
      const portWithPrefix = port === "" ? "" : `:${port}`;

      // IE <= 11 has no proper `location.origin` so we cannot rely on it.
      if (!queryString) {
        return `${protocol}//${hostname}${portWithPrefix}${pathname}${hash}`;
      }

      return `${protocol}//${hostname}${portWithPrefix}${pathname}?${queryString}${hash}`;
    },
  }),
};

[dante-blitz]

Just so I'm Just so I'm clear, is this following url format the default (as opposed to some incorrect implementation)?

If I want cleaner urls I have to make you suggested modifications right?

?Events%5BrefinementList%5D%5BmusicGenres%5D%5B0%5D=Afrobeats

[dante-blitz]

Thanks for your answer @Haroenv. Working for me in Next.js 14 using the app router. Heres my code if anyone else is having the same issue...

    <InstantSearchNext
      indexName={indexName}
      searchClient={searchClient}
      future={{
        preserveSharedStateOnUnmount: true,
      }}
      routing={{
        router: {
          cleanUrlOnDispose: false,
          createURL: ({ qsModule, routeState, location }) => {
            const { protocol, hostname, port = '', pathname, hash } = location
            const queryString = qsModule.stringify(routeState, {
              encode: false,
            })
            const portWithPrefix = port === '' ? '' : `:${port}`

            // IE <= 11 has no proper `location.origin` so we cannot rely on it.
            if (!queryString) {
              return `${protocol}//${hostname}${portWithPrefix}${pathname}${hash}`
            }

            return `${protocol}//${hostname}${portWithPrefix}${pathname}?${queryString}${hash}`
          },
        },
      }}
    >