[Next.js] How to change index (for localization)?

[JanKups]

I have multiple indices, each for a language (as described).

What would be the best approach to switch language in Next.JS?

Options:

• Loading the index name as State and changing the State. Unfortunately this does not update the results.
• Sorting could be an option but seems illogical with different data

[dhayab]

You should be able to force a remount of <InstantSearch> by setting its key prop to your index name state getter.

function Page() {
  const [indexName, setIndexName] = useState('...');
  
  /* ... */
  
  return (
    <InstantSearch searchClient={searchClient} indexName={indexName} key={indexName}>
      {/* ... */}
    </InstantSearch>
  );
}

[JanKups]

Awesome, works as mentioned!

[JanKups]

You should be able to force a remount of <InstantSearch> by setting its key prop to your index name state getter.

@dhayab Any idea how to make this work with InstantSearchSSRProvider? I believe the server rendering is causing InstantSearch to not be refreshed.