コンテンツへスキップ
Fumadocs

検索

ドキュメントサイトに検索機能を実装します

検索 UI

ドキュメント検索の UI をカスタマイズする方法については、検索 UI を参照してください。

検索クライアント

使用する検索エンジンに応じて、検索クライアントを選択・設定できます。デフォルトは ZBSearch です。

検索フック

検索クライアントには、useFetchSearch() や useAlgoliaSearch() などの React フックが用意されています。これらのフックは <SearchDialog /> の props を返します。

import { useFetchSearch } from 'fumadocs-core/search/client';

const search = useFetchSearch();

<SearchDialog {...search} {...props} />;

これらのフックは、検索入力用の search と onSearchChange に加えて、次の値を返します。

  • data: 最後に成功した検索です。再検索中やエラー発生後も保持されます。
    • items: その検索結果です。各結果のコンテンツは hast としてもパースされ、hastContent に格納されます。テーブルの行は 1 つの table アイテムにまとめられます。
    • query: 検索に使用されたクエリです。
  • error: 最後の検索が失敗した場合に設定されます。
  • isLoading: search に対する検索が処理中かどうかを示します。

他の検索エンジンを使用する場合は、メモ化した検索関数を experimental_useSearch() に渡してください。関数が変更されると、再検索が実行されます。

'use client';
import { useCallback } from 'react';
import { experimental_useSearch } from 'fumadocs-core/search/client';
import type { SortedResult } from 'fumadocs-core/search';

export function useMySearch(locale: string) {
  const search = useCallback(
    async (query: string): Promise<SortedResult[]> => {
      const res = await fetch(`/api/my-search?${new URLSearchParams({ query, locale })}`);
      return res.json();
    },
    [locale],
  );

  return experimental_useSearch(search);
}

コミュニティによるインテグレーション

コミュニティがメンテナンスしているインテグレーションの一覧です。

How is this guide?

最終更新日