{"id":13683280,"url":"https://github.com/stuart-williams/next-instantsearch","last_synced_at":"2025-04-11T11:15:39.930Z","repository":{"id":40750251,"uuid":"264165293","full_name":"stuart-williams/next-instantsearch","owner":"stuart-williams","description":"Server side rendering with Next.js and React InstantSearch","archived":false,"fork":false,"pushed_at":"2023-01-06T17:17:29.000Z","size":1494,"stargazers_count":33,"open_issues_count":28,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-24T15:13:35.274Z","etag":null,"topics":["algolia","algolia-search","instantsearch","next","nextjs","react-instantsearch"],"latest_commit_sha":null,"homepage":"https://next-instantsearch.now.sh","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stuart-williams.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-15T10:30:34.000Z","updated_at":"2024-03-21T12:12:37.000Z","dependencies_parsed_at":"2023-02-06T07:01:36.661Z","dependency_job_id":null,"html_url":"https://github.com/stuart-williams/next-instantsearch","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stuart-williams%2Fnext-instantsearch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stuart-williams%2Fnext-instantsearch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stuart-williams%2Fnext-instantsearch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stuart-williams%2Fnext-instantsearch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stuart-williams","download_url":"https://codeload.github.com/stuart-williams/next-instantsearch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248381788,"owners_count":21094528,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["algolia","algolia-search","instantsearch","next","nextjs","react-instantsearch"],"created_at":"2024-08-02T13:02:06.122Z","updated_at":"2025-04-11T11:15:39.906Z","avatar_url":"https://github.com/stuart-williams.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# next-instantsearch\n\n[![npm version](https://badge.fury.io/js/next-instantsearch.svg)](https://badge.fury.io/js/next-instantsearch)\n[![Test](https://github.com/stuart-williams/next-instantsearch/workflows/Test/badge.svg)](https://github.com/stuart-williams/next-instantsearch/actions?query=workflow%3ATest)\n[![Publish](https://github.com/stuart-williams/next-instantsearch/workflows/Publish/badge.svg)](https://github.com/stuart-williams/next-instantsearch/actions?query=workflow%3APublish)\n[![Bundlephobia](https://badgen.net/bundlephobia/minzip/next-instantsearch)](https://bundlephobia.com/result?p=next-instantsearch)\n\n**Server side rendering with Next.js and React InstantSearch**\n\n## What is it?\n\n`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.\n\nThe 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.\n\nView 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).\n\n## Installation\n\n```sh\nnpm install next-instantsearch\n# or\nyarn add next-instantsearch\n```\n\n## Getting started\n\nUse 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/):\n\n```javascript\nimport algoliasearch from \"algoliasearch/lite\";\nimport { withInstantSearch } from \"next-instantsearch\";\nimport {\n  Configure,\n  Highlight,\n  Hits,\n  Pagination,\n  RefinementList,\n  SearchBox,\n} from \"react-instantsearch-dom\";\n\nconst searchClient = algoliasearch(\"your_app_id\", \"your_api_key\");\n\nconst HitComponent = ({ hit }) =\u003e \u003cHighlight attribute=\"name\" hit={hit} /\u003e;\n\nconst Page = () =\u003e (\n  \u003c\u003e\n    \u003cConfigure hitsPerPage={12} /\u003e\n    \u003cSearchBox /\u003e\n    \u003cRefinementList attribute=\"categories\" /\u003e\n    \u003cHits hitComponent={HitComponent} /\u003e\n    \u003cPagination /\u003e\n  \u003c/\u003e\n);\n\nexport default withInstantSearch({\n  indexName: \"your_index\",\n  searchClient,\n})(Page);\n```\n\nYou may also configure via `getInitialProps`:\n\n```javascript\nimport algoliasearch from \"algoliasearch/lite\";\nimport { withInstantSearch } from \"next-instantsearch\";\nimport {\n  Configure,\n  Highlight,\n  Hits,\n  Pagination,\n  RefinementList,\n  SearchBox,\n} from \"react-instantsearch-dom\";\n\nconst searchClient = algoliasearch(\"your_app_id\", \"your_api_key\");\n\nconst HitComponent = ({ hit }) =\u003e \u003cHighlight attribute=\"name\" hit={hit} /\u003e;\n\nconst Page = () =\u003e (\n  \u003c\u003e\n    \u003cConfigure hitsPerPage={12} /\u003e\n    \u003cSearchBox /\u003e\n    \u003cRefinementList attribute=\"categories\" /\u003e\n    \u003cHits hitComponent={HitComponent} /\u003e\n    \u003cPagination /\u003e\n  \u003c/\u003e\n);\n\nPage.getInitialProps = async () =\u003e ({\n  indexName: \"your_index\",\n  // You may want to set some default searchState.\n  // This will be merged on to state from the url.\n  searchState: {\n    refinementList: {\n      categories: [\"Appliances\"],\n    },\n  },\n});\n\nexport default withInstantSearch({\n  searchClient,\n})(Page);\n```\n\n## Advanced Usage\n\nOut of the box `next-instantsearch` will trigger a shallow route replace when your search state changes.\nThis 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.\n\n```javascript\nimport { withInstantSearch, createURL, onSearchStateChange } from \"next-instantsearch\";\nimport { Router } from \"../i18n\";\n\nwithInstantSearch({\n  indexName: \"your_index\",\n  searchClient,\n  onSearchStateChange: (searchState) =\u003e onSearchStateChange(searchState, Router),\n  // or\n  onSearchStateChange: () =\u003e {}, // Prevent route change\n  // or\n  onSearchStateChange: (searchState, Router) =\u003e {\n    // ... Some custom implementation ...\n  },\n})(Page);\n```\n\nDuring 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/).\n\n```javascript\nwithInstantSearch({\n  indexName: \"your_index\",\n  searchClient,\n  decorate: ({ ctx, component }) =\u003e (\n    \u003cProvider store={ctx.store}\u003e{component()}\u003c/Provider\u003e\n  ),\n})(Page);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstuart-williams%2Fnext-instantsearch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstuart-williams%2Fnext-instantsearch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstuart-williams%2Fnext-instantsearch/lists"}