import { Steps, Tabs } from 'nextra/components'

Search Engine

Nextra includes a full-page search feature that makes it easy for users to find relevant content across your entire documentation site.

[!TIP]

Check the migration guide for more information.

Setup

Nextra integrates with Pagefind, a static search library that indexes your HTML files and provides lightning-fast, client-side full-text search — all with no server required.

npm i -D pagefind

Add a postbuild script

Pagefind indexes .html files, so the indexing must happen after building your application.

Add a postbuild script to your package.json:

<Tabs items={['Server builds', 'Static exports']}> <Tabs.Tab> json filename="package.json" "scripts": { "postbuild": "pagefind --site .next/server/app --output-path public/_pagefind" } </Tabs.Tab> <Tabs.Tab> json filename="package.json" "scripts": { "postbuild": "pagefind --site .next/server/app --output-path out/_pagefind" } </Tabs.Tab> </Tabs>

Ignore generated files

Add _pagefind/ to your .gitignore file to avoid committing generated index files.

Verify indexing output

After building and running the postbuild script, check that a _pagefind/ directory exists in public/ or out/. Start your app and test the search bar to confirm everything is working.

Configuration

Search is enabled by default. You can disable it entirely by setting search: false{:js} in your next.config.mjs file:

import nextra from 'nextra'

const withNextra = nextra({
  search: false
})
export default withNextra()

To disable code block indexing while keeping search enabled set search: { codeblocks: false }{:js}:

import nextra from 'nextra'

const withNextra = nextra({
  search: { codeblocks: false }
})
export default withNextra()