Search

Supporting document search in your docs

Next Docs UI supports document searching based on Next Docs Zeta and provides search dialog for different solutions.

Learn More about Document Search.

Search Dialog

You can customize the search dialog from Root Provider.

By default, your dialog will be lazy loaded using next/dynamic, this allows a better initial loading performance.

Algolia

Next Docs offers first-hand support for Algolia. For the setup guide, see Integrate Algolia Search. Make sure you have algoliasearch installed on your project.

While generally we recommend building your own search with their client-side SDK, you can use the built-in dialog from next-docs-ui/components/dialog/search-algolia.

First, create a separate client component for the dialog.

Client Component

import algo from 'algoliasearch/lite';
import type { SharedProps } from 'next-docs-ui/components/dialog/search';
import SearchDialog, {
  AlgoliaContextProvider,
} from 'next-docs-ui/components/dialog/search-algolia';
 
const appId = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID!;
const apiKey = process.env.NEXT_PUBLIC_ALGOLIA_API_KEY!;
const indexName = process.env.NEXT_PUBLIC_ALGOLIA_INDEX!;
 
const client = algo(appId, apiKey);
const index = client.initIndex(indexName);
 
export default function CustomSearchDialog(props: SharedProps) {
  return (
    <AlgoliaContextProvider index={index}>
      <SearchDialog {...props} />
    </AlgoliaContextProvider>
  );
}

Then, lazy load the dialog with next/dynamic.

Provider (Client Component)

import { RootProvider } from 'next-docs-ui/provider';
import dynamic from 'next/dynamic';
import type { ReactNode } from 'react';
 
const SearchDialog = dynamic(() => import('@/components/search'));
 
export function Provider({ children }: { children: ReactNode }) {
  return (
    <RootProvider
      search={{
        SearchDialog,
      }}
    >
      {children}
    </RootProvider>
  );
}

Note

The built-in implementation doesn't use instant search (their official javascript client).

Built-in UI

If you want to use the built-in search dialog UI instead of building your own, you may use the SearchDialog component.

import {
  SearchDialog,
  type SharedProps
} from 'next-docs-ui/components/dialog/search'
 
export default function CustomSearchDialog(props: SharedProps) { ... }

Search

Search Dialog

Algolia

Other Solutions

Built-in UI

On this page