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

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

👇組み込みイメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/d9a5f55c-8aa6-e1a9-4a90-320087fe3a2d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/d04865f5-2052-8cd9-c472-fab2a9a7a736.png)

## Algolia DocSearch の申し込み

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

👇こんな感じで自サイトのURLとメールアドレスを入力し、"Join the program"をクリックします。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/e6d0f18e-4971-d067-7dc5-2a545cd90bc5.png)

申し込みを実施すると`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にログイン](https://dashboard.algolia.com/users/sign_in)して、Applicationの選択を確認して`API keys`のリンクをクリックします。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/688a6a68-cbf3-87bf-b97e-42401cacefb7.png)

👇**Application ID**と**Search API Key**をコピーしておきます。（後で使います）  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/08d35bcc-e199-d622-62e2-30a91a35e066.png)

👇Search をクリックします。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/2fdcae9a-a705-ea1c-db88-023ed8e702fe.png)

👇**インデックス名**をコピーしておきます。（後で使います）  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/00606cd0-6550-eaf9-d6aa-9eadd125720b.png)

## React プロジェクトの作成

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

```text
npx create-next-app@latest
```

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

```text
>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 ライブラリインストール

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

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

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

```javascript
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>
    </>
  )
}

```

## 動作確認

```text
cd my-app
npm run dev
```

👇ブラウザアクセス  
[http://localhost:3000](http://localhost:3000)

👇表示イメージ  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/f073bef0-93e5-655e-8a88-2808d0801fa9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/e8942b1d-03c0-3690-9863-3880fbfa8a22.png)

## 👇関連記事

## 👇参考URL

- [node download](https://nodejs.org/en/download)
- [React プロジェクトを始める](https://ja.react.dev/learn/start-a-new-react-project)
- [Next.js](https://nextjs.org/docs/getting-started/installation)
- [DOCSEARCH](https://docsearch.algolia.com/docs/DocSearch-v3)
- [DOCSEARCH React Install](https://github.com/algolia/docsearch?tab=readme-ov-file#react)

## 本記事へのリンク

![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708851/ff676d7d-5e89-860e-8d06-884e5c98a345.png)

### [https://docs.saurus12.com/frontend/algolia_search](https://docs.saurus12.com/frontend/algolia_search)

[keywords]  
Algolia DocSearch React

[Algolia DocSearch で検索バーを自サイトに組み込む](https://docs.saurus12.com/frontend/algolia_search)

更新日:2024年01月14日