Algolia Search

SetupCopy Anchor Link

Install dependencies:

npm install algoliasearch

Sign up on AlgoliaCopy Anchor Link

Sign up and obtain the app id and API keys for your search, store them in .env.local (VITE_ instead of NEXT_PUBLIC_ outside Next.js):

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

Sync Search IndexesCopy Anchor Link

Pre-render a static.json route to export the search indexes on build, and sync them to Algolia with a script after each build:

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';

const records = JSON.parse(await fs.readFile('.next/server/app/static.json.body', '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() updates the index settings and replaces all records. The build script syncs on every build, set the same variables on your deployment platform.

Search UICopy Anchor Link

You can consider different options for implementing the UI:

• Using Fumadocs UI search dialog.

• Build your own using the built-in search client hook:

  Copy Text

  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,
  });

• Use their official clients directly.

AdvancedCopy Anchor Link

Tag FilterCopy Anchor Link

To configure tag filtering, pass a tag to toDocuments() in the static.json route:

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

And update your search client:

• Fumadocs UI: Enable Tag Filter on Search UI.

• Search Client: You can add the tag filter like:

  Copy Text

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

The tag field is an attribute for faceting. You can also use the filter tag:value on Algolia search clients.

Under the HoodCopy Anchor Link

The Algolia Integration automatically configures Algolia Search for document search.

It creates a record for each paragraph in your document, it is also recommended by Algolia.

Each record contains searchable attributes:

The section field only exists in paragraphs under a heading. Headings and paragraphs are indexed as an individual record, grouped by their page ID.

Notice that it expects the url property of a page to be unique, you shouldn't have two pages with the same url.