Algolia Search

セットアップアンカーリンクをコピー

依存関係をインストールします。

npm install algoliasearch

Algolia への登録アンカーリンクをコピー

Algolia に登録して検索用のアプリ ID と API キーを取得し、.env.local に保存してください(Vite 系のフレームワークでは NEXT_PUBLIC_ の代わりに VITE_ を、Astro では PUBLIC_ を使用します):

NEXT_PUBLIC_ALGOLIA_APP_ID="app ID"
NEXT_PUBLIC_ALGOLIA_SEARCH_KEY="search-only API key"
ALGOLIA_WRITE_KEY="write API key"

検索インデックスを同期するアンカーリンクをコピー

static.json ルートをプリレンダリングしてビルド時に検索インデックスをエクスポートし、ビルドのたびにスクリプトで Algolia に同期します。

import { source } from '@/lib/source';
import { toDocuments } from 'fumadocs-core/search/algolia';

export const revalidate = false;

export async function GET() {
  return Response.json(await toDocuments(source));
}

import * as fs from 'node:fs/promises';
import { type DocumentRecord, sync } from 'fumadocs-core/search/algolia';
import { algoliasearch } from 'algoliasearch';

// Next.js writes it under `route-cache` when built with an adapter, like on Vercel
const [file] = await Array.fromAsync(fs.glob('.next/server/{app,route-cache/*/*/$}/static.json.body'));
const records = JSON.parse(await fs.readFile(file, 'utf-8')) as DocumentRecord[];

const client = algoliasearch(
  process.env.NEXT_PUBLIC_ALGOLIA_APP_ID!,
  process.env.ALGOLIA_WRITE_KEY!,
);

await sync(client, {
  indexName: 'document',
  documents: records,
});

console.log(`search updated: ${records.length} records`);

{
  "scripts": {
    "build": "next build && node --env-file-if-exists=.env.local scripts/sync-content.ts"
  }
}

sync() はインデックスの設定を更新し、すべてのレコードを置き換えます。build スクリプトはビルドのたびに同期を行うため、デプロイ先のプラットフォームにも同じ環境変数を設定してください。

検索 UIアンカーリンクをコピー

UI の実装方法には、いくつかの選択肢があります。

• Fumadocs UI の検索ダイアログを使用する。

• 組み込みの検索クライアントフックを使って独自に構築する。

  テキストをコピー

  import { liteClient } from 'algoliasearch/lite';
  import { useAlgoliaSearch } from 'fumadocs-core/search/client';
  
  const algolia = liteClient('id', 'key');
  
  const { search, onSearchChange, isLoading, data } = useAlgoliaSearch({
    indexName: 'document',
    client: algolia,
  });

• Algolia 公式のクライアントを直接使用する。

高度な使い方アンカーリンクをコピー

タグフィルターアンカーリンクをコピー

タグフィルターを設定するには、static.json ルートで toDocuments() に tag を渡します。

toDocuments(source, { tag: (page) => page.slugs[0] });

次に、検索クライアントを更新します。

• Fumadocs UI: 検索 UI でタグフィルターを有効にします。

• 検索クライアント: 次のようにタグフィルターを追加できます。

  テキストをコピー

  import { useAlgoliaSearch } from 'fumadocs-core/search/client';
  
  const { search, onSearchChange, isLoading, data } = useAlgoliaSearch({
    tag: '<your tag value>',
    // ...
  });

tag フィールドはファセット用の属性です。Algolia の検索クライアントでは、tag:value というフィルターも使用できます。

内部の仕組みアンカーリンクをコピー

Algolia Integrationは、ドキュメント検索用にAlgolia Searchを自動で設定します。

ドキュメント内の段落ごとにレコードを作成します。これはAlgoliaも推奨している方法です。

各レコードには、次の検索可能な属性が含まれます。

section フィールドは、見出しの下にある段落にのみ存在します。見出しと 段落はそれぞれ個別のレコードとしてインデックスされ、ページIDごとにグループ化されます。

ページの url プロパティは一意である必要がある点に注意してください。同じ URLを持つページが複数存在しないようにしてください。