Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stuart-williams/next-instantsearch
Server side rendering with Next.js and React InstantSearch
https://github.com/stuart-williams/next-instantsearch
algolia algolia-search instantsearch next nextjs react-instantsearch
Last synced: about 2 months ago
JSON representation
Server side rendering with Next.js and React InstantSearch
- Host: GitHub
- URL: https://github.com/stuart-williams/next-instantsearch
- Owner: stuart-williams
- License: mit
- Created: 2020-05-15T10:30:34.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T17:17:29.000Z (over 1 year ago)
- Last Synced: 2024-04-24T15:13:35.274Z (5 months ago)
- Topics: algolia, algolia-search, instantsearch, next, nextjs, react-instantsearch
- Language: TypeScript
- Homepage: https://next-instantsearch.now.sh
- Size: 1.42 MB
- Stars: 33
- Watchers: 3
- Forks: 8
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# next-instantsearch
[](https://badge.fury.io/js/next-instantsearch)
[](https://github.com/stuart-williams/next-instantsearch/actions?query=workflow%3ATest)
[](https://github.com/stuart-williams/next-instantsearch/actions?query=workflow%3APublish)
[](https://bundlephobia.com/result?p=next-instantsearch)
**Server side rendering with Next.js and React InstantSearch**
## What is it?
`next-instantsearch` is a plugin for [Next.js](https://nextjs.org/) projects that allows you to easily configure your [Algolia](https://www.algolia.com/) powered [InstantSearch](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/) app with [SSR](https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/react/) and [URL sync](https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/react/) out of the box.
The current version of this library is only compatible with InstantSearch v6 or greater. See the [upgrade guides](https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/react/) for more info.
View a [live demo](https://next-instantsearch.now.sh/) of the [simple example](https://github.com/stuart-williams/next-instantsearch/tree/master/examples/simple) based on the [`react-instantsearch` next example](https://github.com/algolia/react-instantsearch/tree/master/examples/next).
## Installation
```sh
npm install next-instantsearch
# or
yarn add next-instantsearch
```
## Getting started
Use the `withInstantSearch` HOC to configure [InstantSearch](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/#the-instantsearch-root-widget) and enable [SSR](https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/react/):
```javascript
import algoliasearch from "algoliasearch/lite";
import { withInstantSearch } from "next-instantsearch";
import {
Configure,
Highlight,
Hits,
Pagination,
RefinementList,
SearchBox,
} from "react-instantsearch-dom";
const searchClient = algoliasearch("your_app_id", "your_api_key");
const HitComponent = ({ hit }) => ;
const Page = () => (
<>
>
);
export default withInstantSearch({
indexName: "your_index",
searchClient,
})(Page);
```
You may also configure via `getInitialProps`:
```javascript
import algoliasearch from "algoliasearch/lite";
import { withInstantSearch } from "next-instantsearch";
import {
Configure,
Highlight,
Hits,
Pagination,
RefinementList,
SearchBox,
} from "react-instantsearch-dom";
const searchClient = algoliasearch("your_app_id", "your_api_key");
const HitComponent = ({ hit }) => ;
const Page = () => (
<>
>
);
Page.getInitialProps = async () => ({
indexName: "your_index",
// You may want to set some default searchState.
// This will be merged on to state from the url.
searchState: {
refinementList: {
categories: ["Appliances"],
},
},
});
export default withInstantSearch({
searchClient,
})(Page);
```
## Advanced Usage
Out of the box `next-instantsearch` will trigger a shallow route replace when your search state changes.
This may not work for you if you're using a non standard router or maybe you want to prevent this route change with a no-op.
```javascript
import { withInstantSearch, createURL, onSearchStateChange } from "next-instantsearch";
import { Router } from "../i18n";
withInstantSearch({
indexName: "your_index",
searchClient,
onSearchStateChange: (searchState) => onSearchStateChange(searchState, Router),
// or
onSearchStateChange: () => {}, // Prevent route change
// or
onSearchStateChange: (searchState, Router) => {
// ... Some custom implementation ...
},
})(Page);
```
During SSR `react-instantsearch` will call `renderToString` on your component, meaning your component is rendered outside of the context of your app. For this reason you may need to wrap your component with some context providers etc. More info on `react-instantsearch` SSR can be found [here](https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/react/).
```javascript
withInstantSearch({
indexName: "your_index",
searchClient,
decorate: ({ ctx, component }) => (
{component()}
),
})(Page);
```