algolia-search について
Algolia Search の統合パターンをまとめた開発スキルです。React InstantSearch、Next.js のサーバーサイドレンダリング、インデックス同期を扱い、検索画面の構築やインデックス更新を行う開発者向けです。
主な機能
- 01React InstantSearch Hooks の検索パターン
- 02Next.js のサーバーサイドレンダリング統合
- 03ルーティングと URL 同期の考慮事項
- 04全件、レコード単位、部分的なインデックス更新
- 05バッチ処理と差分更新の指針
活用シーン
- 01React アプリでのインスタント検索構築
- 02Next.js 検索のサーバーサイドレンダリング設定
- 03アプリケーションデータの Algolia インデックス同期
- 04インデックス内の指定属性のみ更新
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/algolia-searchを入力して読み込まれたか確認します。
詳細
Algolia 検索統合
パターン
フックを使った React InstantSearch
型先行検索（type-ahead search）のためにフックを使用する、最新の React InstantSearch のセットアップです。
react-instantsearch-hooks-web パッケージと algoliasearch クライアントを使用します。 ウィジェットはコンポーネントであり、classnames でカスタマイズできます。
主なフック:
- useSearchBox: 検索入力の処理
- useHits: 検索結果へのアクセス
- useRefinementList: ファセットによるフィルタリング
- usePagination: 結果のページネーション
- useInstantSearch: 完全な状態へのアクセス
Next.js サーバーサイドレンダリング
react-instantsearch-nextjs パッケージを使った、Next.js 向けの SSR 統合です。
SSR では の代わりに を使用します。 Pages Router と App Router（実験的）の両方をサポートしています。
考慮すべき主な点:
- 最新の結果を得るために dynamic = 'force-dynamic' を設定する
- routing プロパティで URL の同期を処理する
- 初期状態には getServerState を使用する
データの同期とインデックス作成
Algolia を データと同期させ続けるためのインデックス作成戦略です。
3 つの主なアプローチ:
- 完全な再インデックス作成 - インデックス全体を置き換える（コストが高い）
- レコードの完全な更新 - 個々のレコードを置き換える
- 部分更新 - 特定の属性のみを更新する
ベストプラクティス:
- レコードをバッチ処理する（理想: 10MB、1 バッチあたり 1K〜10K レコード）
- 可能な場合は増分更新を使用する
- 属性のみの変更には partialUpdateObjects を使用する
- deleteBy は計算コストが高いため避ける
⚠️ 注意すべき点
| 問題 | 重大度 | 解決策 |
|---|---|---|
| 問題 | critical | ドキュメントを参照 |
| 問題 | high | ドキュメントを参照 |
| 問題 | medium | ドキュメントを参照 |
| 問題 | medium | ドキュメントを参照 |
| 問題 | medium | ドキュメントを参照 |
| 問題 | medium | ドキュメントを参照 |
| 問題 | medium | ドキュメントを参照 |
| 問題 | medium | ドキュメントを参照 |
コメント
Markdown 対応