> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# InstantSearchNext

> Root component for InstantSearch on Next.js app router applications.

<Note>
  This is the **React InstantSearch v7** documentation.
  If you're upgrading from v6, see the [upgrade guide](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-v6-to-react-instantsearch-v7).
  If you were using React InstantSearch Hooks,
  this v7 documentation applies—just check for [necessary changes](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-hooks-to-react-instantsearch-v7).
  To continue using v6, you can find the [archived documentation](https://algolia.com/old-docs/deprecated/instantsearch/react/v6/api-reference/instantsearch/).
</Note>

```tsx Signature theme={"system"}
<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

```js JavaScript icon=code theme={"system"}
import { InstantSearchSSRProvider } from "react-instantsearch";
```

## About this component

This component replaces the [`<InstantSearch>`](/doc/api-reference/widgets/instantsearch/react) 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](/doc/guides/building-search-ui/going-further/server-side-rendering/react)

## Examples

```jsx Search.js theme={"system"}
"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](https://github.com/algolia/instantsearch/blob/master/examples/react/next-app-router/app/Search.tsx).

## Props

<ParamField body="routing" type="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.

  <CodeGroup>
    ```jsx Boolean theme={"system"}
    <InstantSearchNext
      // ...
      routing={true}
    >
      {/* Widgets */}
    </InstantSearchNext>;
    ```

    ```jsx Object theme={"system"}
    <InstantSearchNext
      // ...
      routing={{
        router: {
          // Here you can override default methods like `createURL`, `parseURL`, etc.
        },
        stateMapping: {
          // Here you can define how the UI state maps to the route state.
        },
      }}
    >
      {/* Widgets */}
    </InstantSearchNext>;
    ```
  </CodeGroup>
</ParamField>

<ParamField body="instance" type="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.

  ```jsx JavaScript icon=code theme={"system"}
  import {
    createInstantSearchNextInstance,
    InstantSearchNext,
  } from "react-instantsearch-nextjs";

  const instance = createInstantSearchNextInstance();

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