Algolia DocSearch で検索バーを自サイトに組み込む

Algolia DocSearch を利用して無料で検索バーを自サイトに組み込む手順を解説します。

👇組み込みイメージ

Algolia DocSearch の申し込み

👇このサイトから利用申し込みをします。
https://docsearch.algolia.com/apply/

👇こんな感じで自サイトのURLとメールアドレスを入力し、"Join the program"をクリックします。

申し込みを実施するとUsing Algolia for your documentation searchというタイトルのメールが送られて来ます。
さらに１日～２日程度待つと[Algolia] Re: Using Algolia for your documentation searchというタイトルのメールが送られて来ますので、メール内に記載されたAccept this invitation to join your application and get started!のリンクをクリックします。

Algolia の接続情報取得

Algoliaにログインして、Applicationの選択を確認してAPI keysのリンクをクリックします。

👇Application IDとSearch API Keyをコピーしておきます。（後で使います）

👇Search をクリックします。

👇インデックス名をコピーしておきます。（後で使います）

React プロジェクトの作成

👇React(Next.js)プロジェクト作成

npx create-next-app@latest

👇選択オプションは以下のとおり、適当に選択します。

>npx create-next-app@latest
√ What is your project named? ... my-app
√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... No
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... No
√ Would you like to use App Router? (recommended) ... No
√ Would you like to customize the default import alias (@/*)? ... No
Creating a new Next.js app in c:\tmp\my-app.

👇docsearch ライブラリインストール

cd my-app
npm install @docsearch/react@3

👇[my-app\pages\index.js]を編集します。

appId：上記手順でコピーしたApplication ID
indexName：上記手順でコピーしたインデックス名
apiKey：上記手順でコピーしたSearch API Key

import Head from 'next/head'
import Image from 'next/image'
import { Inter } from 'next/font/google'
import styles from '@/styles/Home.module.css'

import { DocSearch } from '@docsearch/react'
import '@docsearch/css'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={`${styles.main} ${inter.className}`}>
        <div className={styles.description}>
            
            <DocSearch
            appId="********"
            indexName="********"
            apiKey="********"
            />

        </div>

      </main>
    </>
  )
}