Search

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 (Experiemntal)

Next Docs offers first-hand support for Algolia. For setup guide, see Integrate Algolia Search guide. 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.

To pass your search index, wrap your root provider in the Algolia context provider.

import algoliasearch from 'algoliasearch/lite'
import Dialog, {
  AlgoliaContextProvider
} from 'next-docs-ui/components/dialog/search-algolia'
import { RootProvider } from 'next-docs-ui/provider'
import type { ReactNode } from 'react'
 
const client = algoliasearch(...)
const index = client.initIndex('document')
 
export function Provider({ children }: { children: ReactNode }) {
  return (
    <AlgoliaContextProvider index={index}>
      <RootProvider
        search={{
          SearchDialog: Dialog
        }}
      >
        {children}
      </RootProvider>
    </AlgoliaContextProvider>
  )
}

Other Solutions

If you want to use other solutions such as ElasticSearch, you can replace the default dialog with your own by passing the SearchDialog component to the root provider.

<RootProvider
  search={{
    SearchDialog: YourOwnDialog
  }}
>
  ...
</RootProvider>

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) { ... }