Package Exports

next-instantsearch

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (next-instantsearch) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

next-instantsearch

Server side rendering with Next.js and React InstantSearch

Installation

npm install next-instantsearch
# or
yarn add next-instantsearch

Getting started

Use the withInstantSearch HOC to configure InstantSearch and enable SSR:

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 }) => <Highlight attribute="name" hit={hit} />;

const Page = () => (
  <>
    <Configure hitsPerPage={12} />
    <SearchBox />
    <RefinementList attribute="categories" />
    <Hits hitComponent={HitComponent} />
    <Pagination />
  </>
);

export default withInstantSearch({
  indexName: "your_index",
  searchClient,
})(Page);

You may also configure via getInitialProps:

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 }) => <Highlight attribute="name" hit={hit} />;

const Page = () => (
  <>
    <Configure hitsPerPage={12} />
    <SearchBox />
    <RefinementList attribute="categories" />
    <Hits hitComponent={HitComponent} />
    <Pagination />
  </>
);

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.

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);

You may need to decorate your component with some wrapper components due to the way react-instantsearch-dom handles server side rendering.

withInstantSearch({
  indexName: "your_index",
  searchClient,
  decorate: ({ ctx, component }) => (
    <Provider store={ctx.store}>{component()}</Provider>
  ),
})(Page);