Syncing URL with instantsearch using next.js adding one unnecessary re-route

[AbdelrahmanAhmed605]

I am using next.js and currently I have an input on my homepage that allows a user to enter a search. I made it so that when a user submits their search on the homepage, it takes them to the /search page which uses algolia's instantsearch with the search already applied (to do this, I used routing={true} on my InstantSearch component).

The issue I have comes from the browser history. So when a user types "phone" on the home-page, it goes from "/" -> "/search?search=phone" -> "/search?<index_name>%5Bquery%5D=phone". Now when the user clicks the back button on the browser, it takes them to "/search?search=phone" which isn't actually connected to algolia, so it just shows the /search page with all the results in my index. How can I have it so that the user is instantly taken to "/search?<index_name>%5Bquery%5D=phone" instead of "/search?search=phone"?

For Context

On my homepage, I have the following event listener

import { useRouter } from 'next/navigation';

const router = useRouter();
const handleSearch = (e) => {
    e.preventDefault();
    router.push(`/search?search=${encodeURIComponent(query)}`)
  };

On my search page.tsx, I have:

import { useSearchParams } from 'next/navigation';

const SearchPage = () => {
  const searchParams = useSearchParams();
  const search = searchParams.get('search');

  return (
    <InstantSearch
      searchClient={searchClient}
      indexName={indexName}
      initialUiState={{
        [indexName]: {
          query: search,
        },
      }}
      future={{
        preserveSharedStateOnUnmount: true,
      }}
      routing={true}
    >
      <SearchComponent />
    </InstantSearch>
  );
};

[dhayab]

With routing enabled, you don't need to set the initialUiState as long as you navigate to the search page with the correct query parameters. Just change the route in your handleSearch() method to match what InstantSearch expects by default.

Alternatively, you can customize the query string generated and parsed by InstantSearch router by changing the state mapping: https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/js/#rewriting-urls-manually.

Finally, as you're using React InstantSearch with Next.js, make sure you read about our dedicated routing support for this framework and choose the relevant method related to whether you are in app or page router:

• pages router: https://www.algolia.com/doc/api-reference/widgets/instantsearch-next-router/react/
• app router: https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/react/#enabling-routing

[AbdelrahmanAhmed605]

Thank you so much for your help!!