• react-instantsearch-nextjs
  • Installation
  • Usage
  • API
    • <InstantSearchNext>
    • routing prop
  • Troubleshooting
  • Contributing
  • License

react-instantsearch-nextjs

This package provides server-side rendering for React InstantSearch that is compatible with Next.js 13 App Router.

[!WARNING] This package is experimental.

Installation

yarn add react-instantsearch-nextjs
# or with npm
npm install react-instantsearch-nextjs

Usage

[!NOTE] You can check this documentation on Algolia's Documentation website.

Your search component must be in its own file, and it shouldn't be named page.js or page.tsx.

To render the component in the browser and allow users to interact with it, include the "use client" directive at the top of your code.

+'use client';
import algoliasearch from 'algoliasearch/lite';
import {
  InstantSearch,
  SearchBox,
} from 'react-instantsearch';

const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

export function Search() {
  return (
    <InstantSearch indexName="YourIndexName" searchClient={searchClient}>
      <SearchBox />
      {/* other widgets */}
    </InstantSearch>
  );
}

Import the <InstantSearchNext> component from the react-instantsearch-nextjs package, and replace the <InstantSearch> component with it, without changing the props.

'use client';
import algoliasearch from 'algoliasearch/lite';
import {
- InstantSearch,
  SearchBox,
} from 'react-instantsearch';
+import { InstantSearchNext } from 'react-instantsearch-nextjs';

const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

export function Search() {
  return (
-   <InstantSearch indexName="YourIndexName" searchClient={searchClient}>
+   <InstantSearchNext indexName="YourIndexName" searchClient={searchClient}>
      <SearchBox />
      {/* other widgets */}

-   </InstantSearch>
+   </InstantSearchNext>
  );
}

To serve your search page at /search, create an app/search directory. Inside it, create a page.js file (or page.tsx if you're using TypeScript).

Make sure to configure your route segment to be dynamic so that Next.js generates a new page for each request.

// app/search/page.js or app/search/page.tsx
import { Search } from './Search'; // change this with the path to your <Search> component

export const dynamic = 'force-dynamic';

export default function Page() {
  return <Search />;
}

You can now visit /search to see your server-side rendered search page.

API

<InstantSearchNext>

The <InstantSearchNext> component is a drop-in replacement for the <InstantSearch> component. It accepts the same props, and it renders the same UI.

You can check the InstantSearch API reference for more information.

routing prop

As with the <InstantSearch> component, you can pass a routing prop to the <InstantSearchNext> component to customize the routing behavior. The difference here is that routing.router takes the same options as the historyRouter.

Troubleshooting

If you're experiencing issues, please refer to the Need help? section of the docs, or open a new issue.

Contributing

We welcome all contributors, from casual to regular 💙

• Bug report. Is something not working as expected? Send a bug report.
• Feature request. Would you like to add something to the library? Send a feature request.
• Documentation. Did you find a typo in the doc? Open an issue and we'll take care of it.
• Development. If you don't know where to start, you can check the open issues that are tagged easy, the bugs or chores.

To start contributing to code, you need to:

1. Fork the project
2. Clone the repository
3. Install the dependencies: yarn

Please read our contribution process to learn more.

License

React InstantSearch is MIT licensed.