FlexSearch

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

npm install flexsearch

npm install @types/flexsearch -D

ソースから作成するアンカーリンクをコピー

ソースオブジェクトからサーバーを作成します。

import { source } from '@/lib/source';
import { flexsearchFromSource } from 'fumadocs-core/search/flexsearch';

export const { GET } = flexsearchFromSource(source);

検索インデックスからアンカーリンクをコピー

検索インデックスからサーバーを作成します。各インデックスには structuredData フィールドが必要です。

通常、これはコンテンツソース(例: Fumadocs MDX)から提供されます。Remark Structure プラグインを使って、Markdown/MDX ドキュメントから抽出することもできます。

flexsearchFromSource() の代わりに、これを検索ルートから配信します:

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

const server = flexsearch({
  indexes: source.getPages().map((page) => ({
    title: page.data.title!,
    description: page.data.description,
    url: page.url,
    id: page.url,
    structuredData: page.data.structuredData,
  })),
});

ドキュメントの検索アンカーリンクをコピー

ドキュメントは次の方法で検索できます。

• Fumadocs UI: 標準でサポートされています。詳しくは検索 UIを参照してください。
• 検索クライアント:

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

const { search, onSearchChange, isLoading, data } = useFetchSearch();

設定アンカーリンクをコピー

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

タグで検索結果を絞り込めます。このドキュメントのような複数ドキュメント構成を実装する際に便利です。

import { source } from '@/lib/source';
import { flexsearchFromSource } from 'fumadocs-core/search/flexsearch';

const server = flexsearchFromSource(source, {
  buildIndex(page) {
    return {
      title: page.data.title!,
      description: page.data.description,
      url: page.url,
      id: page.url,
      structuredData: page.data.structuredData,
      // page.slugs[0] など、任意の値を指定します
      tag: '<value>',
    };
  },
});

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

• Fumadocs UI: 検索 UI でタグフィルターを設定します。
• 検索クライアント: useFetchSearch() にタグを渡します。

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

const { search, onSearchChange, isLoading, data } = useFetchSearch({
  tag: '<value>', 
});

静的モードアンカーリンクをコピー

静的サイトに対応するには、検索サーバーの staticGET を使用し、ルートを静的ルートにするか、事前レンダリングするようにしてください。

import { source } from '@/lib/source';
import { flexsearchFromSource } from 'fumadocs-core/search/flexsearch';

// 静的にキャッシュ
export const revalidate = false;
export const { staticGET: GET } = flexsearchFromSource(source);

続いて、検索クライアントを更新します。

• Fumadocs UI: 検索 UI で静的クライアントを使用します。

• 検索クライアント: クライアントのアダプターを変更します。

  テキストをコピー

  import { useFlexsearchStatic } from 'fumadocs-core/search/client/flexsearch-static';
  
  const { search, onSearchChange, isLoading, data } = useFlexsearchStatic({
    // 任意: tag と locale を渡す
    tag,
  });

  プロパティ

  型

  from?string

  locale?string

  tag?union

国際化アンカーリンクをコピー

Flexsearch は、英語以外の言語でも特別な設定なしで動作しますが、ロケールごとに Flexsearch のオプションを指定すると、検索結果の精度を高められます。

import { source } from '@/lib/source';
import { flexsearchFromSource } from 'fumadocs-core/search/flexsearch';
import { Charset } from 'flexsearch';

const server = flexsearchFromSource(source, {
  localeMap: {
    // [locale]: Flexsearch のオプション
    jp: { encoder: Charset.CJK },
  },
});