Flexsearch

Next Docs supports searching document based on Flexsearch.

As the bulit-in search of Next Docs, It is the default but also recommended option since it's easier to setup and totally free.

Usage

Note: If you're using a CMS, you should use the API provided by the CMS instead.

1. Create the API Route.

import { createSearchAPI } from 'next-docs-zeta/search/server';
 
export const { GET } = createSearchAPI('simple', {
  indexes: allDocs.map((docs) => ({
    title: docs.title,
    content: docs.body.raw, // Raw Content
    url: docs.url,
  })),
});

2. Create a Search Dialog.

import { useDocsSearch } from 'next-docs-zeta/search/client';
 
export function Dialog() {
  const { search, setSearch, query } = useDocsSearch();
  return <div>...</div>;
}

createSearchAPI

Create a GET route handler, that supports simple and advanced search.

createI18nSearchAPI

Create a GET route handler with i18n functionality.

Learn how to implement i18n

useDocsSearch

A hook that combined debounce value and useSWR.

Return Type

Response Data

Custom Algorithm

You can port your own search algorithm by returning a list of SortedResult from your custom /api/search/route.ts api endpoint, and you can integrate it with Next Docs UI.

Advanced Search

Returns a more detailed result with matching headings and contents.

It accepts structured data procesed from a markdown/MDX document, and index it with Flexsearch. You can extract the structured data using the Structure remark plugin or structure() function.

Notice that it cannot extract content from rehype-specific content (remark plugins are supported)

Usage

Same as simple search, but requires the structuredData property.

import { allDocs } from 'contentlayer/generated';
import { createSearchAPI } from 'next-docs-zeta/search/server';
 
export const { GET } = await createSearchAPI('advanced', {
  indexes: allDocs.map((docs) => ({
    id: docs._id,
    title: docs.title,
    url: '/docs/' + docs.slug,
    structuredData: docs.structuredData,
  })),
});

Tag Filter

It's useful for implementing versioned docs, or multi-docs similar to this documentation.

import { allDocs } from 'contentlayer/generated';
import { createSearchAPI } from 'next-docs-zeta/search/server';
 
export const { GET } = createSearchAPI('advanced', {
  indexes: allDocs.map((page) => ({
    ...page,
    tag: 'value',
  })),
  tag: true,
});
 
// Pass `tag` in your custom search dialog
const { search, setSearch, query } = useDocsSearch(locale, tag);