FlexSearch

Setup

npm install flexsearch

npm install @types/flexsearch -D

From Source

Create the server from source object.

app/api/search/route.ts (Next.js)

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

export const { GET } = flexsearchFromSource(source);

From Search Indexes

Create the server from search indexes, each index needs a structuredData field.

Usually, it is provided by your content source (e.g. Fumadocs MDX). You can also extract it from Markdown/MDX document using the Remark Structure plugin.

app/api/search/route.ts (Next.js)

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

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

Searching Documents

You can search documents using:

Fumadocs UI: Supported out-of-the-box, see Search UI for details.

Search Client:

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

const  = ({
  : 'fetch',
});

Prop

Type

Configurations

Tag Filter

Support filtering results by tag, it's useful for implementing multi-docs similar to this documentation.

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,
      // use your desired value, like page.slugs[0]
      tag: '<value>',
    };
  },
});

and update your search client:

Fumadocs UI: Configure Tag Filter on Search UI.

Search Client: pass a tag to the hook.

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

const client = useDocsSearch({
  type: 'fetch',
  tag: '<value>',
});

Static Mode

To support usage with static site, use staticGET from search server and make the route static or pre-rendered.

app/api/search/route.ts (Next.js)

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

// statically cached
export const revalidate = false;
export const { staticGET: GET } = flexsearchFromSource(source);

staticGET is also available on flexsearch().

and update your search clients:

Fumadocs UI: use static client on Search UI.

Search Client: change your client adapter.

import { useDocsSearch } from 'fumadocs-core/search/client';
import { flexsearchStaticClient } from 'fumadocs-core/search/client/flexsearch-static';

const client = useDocsSearch({
  client: flexsearchStaticClient({
    // optional: pass tag & locale
    tag,
  }),
});

Prop

Type

Be Careful

Static Search requires clients to download the exported search indexes. For large docs sites, it can be expensive.

You should use cloud solutions like Orama Cloud or Algolia for these cases.

Internationalization

Flexsearch doesn't require configurations to work for other languages, but you can improve the results by specifying Flexsearch options for each locale.

app/api/search/route.ts

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

const server = flexsearchFromSource(source, {
  localeMap: {
    // [locale]: Flexsearch options
    jp: { encoder: Charset.CJK },
  },
});

On this page