React-instantsearch-nextjs NPM

react-instantsearch-nextjs

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: