UI libraries / React InstantSearch / Widgets

<InstantSearchNext>

This is the React InstantSearch v7 documentation. React InstantSearch v7 is the latest version of React InstantSearch and the stable version of React InstantSearch Hooks.

If you were using React InstantSearch v6, you can upgrade to v7.

If you were using React InstantSearch Hooks, you can still use the React InstantSearch v7 documentation, but you should check the upgrade guide for necessary changes.

If you want to keep using React InstantSearch v6, you can find the archived documentation.

Signature 
<InstantSearchNext 
  indexName={string}
  searchClient={object}
  // Optional props
  initialUiState={object}
  onStateChange={function}
  stalledSearchDelay={number}
  routing={boolean | object}
  insights={boolean | object}
  future={{
    preserveSharedStateOnUnmount: boolean,
    persistHierarchicalRootCount: boolean,
  }}
  instance={object}
  ignoreMultipleHooksWarning={boolean}
>
  {children}
</InstantSearchNext>
Import
Copy 
1

import { InstantSearchNext } from 'react-instantsearch-nextjs';
See code examples

About this component

This component replaces <InstantSearch> in Next.js App Router applications. It supports server-side rendering and routing.

See <InstantSearch> for more information on their common props. Only the props that differ from <InstantSearch> are documented here.

Guide Server-side rendering with React InstantSearch

Examples

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13

'use client';
import { InstantSearchNext } from 'react-instantsearch-nextjs';

export function Search() {
  return (
    <InstantSearchNext
      indexName="instant_search"
      searchClient={searchClient}
    >
      {/* Widgets */}
    </InstantSearchNext>
  );
}

Check the Next.js App router example for full markup.

Parameters

routing
type: boolean | RoutingProps
default: false
Optional

Enables routing for the search state. If set to true, it uses the default routing configuration. If an object is provided, it allows for custom routing options.
Copy 
1
2
3
4
5
6

<InstantSearchNext
  // ...
  routing={true}
>
  {/* Widgets */}
</InstantSearchNext>
instance
type: InstantSearch
Optional

Allows you to pass an existing instance of InstantSearch to the component. This is useful for advanced use cases such as dynamic category pages, so that navigation does not cause InstantSearch to re-initialize.

You can create an instance using the createInstantSearchNextInstance function from react-instantsearch-nextjs.
Copy 
1
2
3
4
5
6
7
8
9
10
11

import { createInstantSearchNextInstance, InstantSearchNext } from 'react-instantsearch-nextjs';

const instance = createInstantSearchNextInstance();

function Search() {
  return (
    <InstantSearchNext instance={instance}>
      {/* Widgets */}
    </InstantSearchNext>
  );
}
ignoreMultipleHooksWarning
type: boolean
default: false
Optional

If set to true, it disables the warning about having a different count of widgets between the first and second render.
Copy 
1
2
3
4
5
6

<InstantSearchNext
  // ...
  ignoreMultipleHooksWarning={true}
>
  {/* Widgets */}
</InstantSearchNext>
Did you find this page helpful?
React InstantSearch v7