React InstantSearch SSR utilities for Next.js
npm install react-instantsearch-nextjs- react-instantsearch-nextjs
- Installation
- Usage
- API
-
- routing prop
- Troubleshooting
- Contributing
- License
This package provides server-side rendering for React InstantSearch that is compatible with Next.js 13 App Router.
> [!WARNING]
> This package is experimental.
``sh`
yarn add react-instantsearch-nextjsor with npm
npm install react-instantsearch-nextjs
> [!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.
`diff
+'use client';
import { liteClient as algoliasearch } from 'algoliasearch/lite';
import {
InstantSearch,
SearchBox,
} from 'react-instantsearch';
const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');
export function Search() {
return (
{/ other widgets /}
);
}
`
Import the component from the react-instantsearch-nextjs package, and replace the component with it, without changing the props.
`diff
'use client';
import { liteClient as 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 (
-
+
{/ other widgets /}
-
+
);
}
`
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.
`jsx
// app/search/page.js or app/search/page.tsx
import { Search } from './Search'; // change this with the path to your
export const dynamic = 'force-dynamic';
export default function Page() {
return
}
`
You can now visit /search to see your server-side rendered search page.
The component is a drop-in replacement for the component. It accepts the same props, and it renders the same UI.
You can check the InstantSearch API reference for more information.
As with the component, you can pass a routing prop to the component to customize the routing behavior. The difference here is that routing.router takes the same options as the historyRouter.
If you're experiencing issues, please refer to the Need help? section of the docs, or open a new issue.
We welcome all contributors, from casual to regular 💙
- Bug report. Is something not working as expected? [Send a bug report][contributing-bugreport].
- Feature request. Would you like to add something to the library? [Send a feature request][contributing-featurerequest].
- Documentation. Did you find a typo in the doc? [Open an issue][contributing-newissue] 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][contributing-label-easy], the [bugs][contributing-label-bug] or [chores][contributing-label-chore].
To start contributing to code, you need to:
1. Fork the project
1. Clone the repository
1. Install the dependencies: yarn`
Please read our contribution process to learn more.
React InstantSearch is MIT licensed.
[contributing-bugreport]: https://github.com/algolia/instantsearch/issues/new?template=BUG_REPORT.yml&labels=triage,Library%3A%20React+InstantSearch
[contributing-featurerequest]: https://github.com/algolia/instantsearch/discussions/new?category=ideas&labels=triage,Library%3A%20React+InstantSearch&title=Feature%20request%3A%20
[contributing-newissue]: https://github.com/algolia/instantsearch/issues/new?labels=triage,Library%3A%20React+InstantSearch
[contributing-label-easy]: https://github.com/algolia/instantsearch/issues?q=is%3Aopen+is%3Aissue+label%3A%22Difficulty%3A+Easy%22+label%3A%22Library%3A%20React+InstantSearch%22
[contributing-label-bug]: https://github.com/algolia/instantsearch/issues?q=is%3Aissue+is%3Aopen+label%3A%22Type%3A+Bug%22+label%3A%22Library%3A%20React+InstantSearch%22
[contributing-label-chore]: https://github.com/algolia/instantsearch/issues?q=is%3Aissue+is%3Aopen+label%3A%22Type%3A+Chore%22+label%3A%22Library%3A%20React+InstantSearch%22