Installation

Add the packages needed for a Next Pages Router documentation section.

The demo app is a pnpm workspace package named docs. It declares the local Chakra Docs packages it imports and keeps Next, React, and Chakra UI as application dependencies.

Workspace dependencies

Use the package manager to link local packages into the app workspace.

pnpm --filter docs add @chakra-docs/core @chakra-docs/chakra @chakra-docs/next @chakra-docs/search @chakra-docs/source-filesystem @chakra-ui/react

For Pagefind indexing, add the optional search adapter too.

pnpm --filter docs add @chakra-docs/search-pagefind

App provider

Wrap the Pages Router app with Chakra and Chakra Docs providers in _app.tsx. The host app owns the Chakra system, theme, and link adapter.

import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
import { DocsProvider } from '@chakra-docs/chakra';
import { NextLink } from '@chakra-docs/next/link';

export default function App({ Component, pageProps }) {
  return (
    <ChakraProvider value={defaultSystem}>
      <DocsProvider config={{ linkComponent: NextLink }}>
        <Component {...pageProps} />
      </DocsProvider>
    </ChakraProvider>
  );
}

Project structure

This app keeps the documentation content near the Pages Router app:

apps/docs/
  src/content/docs/
    _meta.json
    index.md
    configuration.md
    pages-router.md
  src/pages/docs/[[...slug]].tsx
  src/pages/api/docs/search.ts
  src/docs/manifest.ts

That location is a choice made by the host app. A real product site can point Chakra Docs at a package docs folder, a generated directory, or a repository-backed source.