Skip to main content
This is the React InstantSearch v7 documentation. If you’re upgrading from v6, see the upgrade guide. If you were using React InstantSearch Hooks, this v7 documentation applies—just check for necessary changes. To continue using 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

JavaScript
import { InstantSearchSSRProvider } from "react-instantsearch";

​
About this component

This component replaces the <InstantSearch> component as root in Next.js applications using the app router. It supports server-side rendering and routing. Only props that are different from the <InstantSearch> component are shown on this page. To learn more, see Server-side rendering

​
Examples

Search.js
"use client";
import { InstantSearchNext } from "react-instantsearch-nextjs";

export function Search() {
  return (
    <InstantSearchNext indexName="instant_search" searchClient={searchClient}>
      {/* Widgets */}
    </InstantSearchNext>
  );
}
For a complete implementation, see the Next.js app router example.

​
Props

​
routing
boolean | RoutingProps
default:false
Enables routing for the search state. If true, it uses the default routing configuration. Pass an object for custom routing options.
<InstantSearchNext
  // ...
  routing={true}
>
  {/* Widgets */}
</InstantSearchNext>;
​
instance
InstantSearch
Lets you pass an existing instance InstantSearch instance 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.To create an instance, use the createInstantSearchNextInstance function from the react-instantsearch-nextjs package.
JavaScript
import {
  createInstantSearchNextInstance,
  InstantSearchNext,
} from "react-instantsearch-nextjs";

const instance = createInstantSearchNextInstance();

function Search() {
  return (
    <InstantSearchNext instance={instance}>{/* Widgets */}</InstantSearchNext>
  );
}
⌘I