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>
</>
)
}
動作確認
cd my-app
npm run dev
👇ブラウザアクセス
http://localhost:3000
👇表示イメージ
👇関連記事
👇参考URL
本記事へのリンク
https://docs.saurus12.com/frontend/algolia_search
[keywords]
Algolia DocSearch React
Algolia DocSearch で検索バーを自サイトに組み込む
更新日:2024年01月14日