Next.jsでAlgolia Instantsearchを利用する

Next.js Advent Calendar 2020とAlgolia Advent Calendar 2020の17日目記事です。

AlgoliaのInstantsearch.jsをNext.jsのアプリに組み込んだときの覚書です。

Algolia InstantsearchをReactで

すごくざっくりとした使い方としては、react-instantsearch-domとalgoliasearchをnpm installして、react-instantsearch-domにあるコンポーネントを配置していくというものです。

$ npm install -S react-instantsearch-dom algoliasearch

この辺りは公式のドキュメントを見るのが早いです。早かったです。

Next.jsでレイアウトエリアにInstantsearchを配置する

Next.jsで「サイトのヘッダー・サイドバー」など全ページ共通の場所に検索フォームまたは検索結果を配置したい場合、InstantSearchコンポーネントをpages/_app.tsxに配置するのが無難でした。

import React from 'react'
import { 
    InstantSearch
} from 'react-instantsearch-dom';
import algoliasearch from 'algoliasearch/lite';


const algoliaClient = algoliasearch(
    'XXXX',
    '5XXXXXX'
  );

function MyApp({ Component, pageProps }) {
  return (
  <>
    <InstantSearch indexName="wp_posts_post" searchClient={algoliaClient}>
           <Component {...pageProps} />
    </InstantSearch>
  </>
  )
}

export default MyApp

こうしておけば、あとは配置したい場所にSearchBoxやHitsなどの要素をおくだけで検索が実行できるようになります。

TypeScriptでReact Instantsearch

TypeScriptで実装したい場合は、@typesをいれておきましょう。

$ npm i -D @types/react-instantsearch-dom @types/algoliasearch