Configuration

This page documents all configuration options available in the documentation template.

Next.js config

The next.config.mjs file controls Next.js behaviour. Recommended settings for documentation:

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Enable React Compiler for optimised rendering
  reactCompiler: true,

  // Enable Cache Components with "use cache"
  cacheComponents: true,

  // Turbopack is enabled by default in Next.js 16
  // No need to configure it explicitly
}

export default nextConfig

Docs config

The lib/docs-config.ts file defines the sidebar navigation structure:

lib/docs-config.ts

interface NavItem {
  title: string       // Display title
  href: string        // Route path
  items?: NavItem[]   // Sub-items
  label?: string      // Optional badge (e.g. "New", "Beta")
}

interface DocsConfig {
  sidebarNav: NavItem[]
}

export const docsConfig: DocsConfig = {
  sidebarNav: [
    {
      title: "Section Title",
      href: "/docs/section",
      items: [
        { title: "Page", href: "/docs/section/page" },
        { title: "New Feature", href: "/docs/section/new", label: "New" },
      ],
    },
  ],
}

Labels

Use the label property to display badges next to navigation items. Useful for marking new or beta content.

Theme config

All design tokens are defined in app/globals.cssusing CSS custom properties. See the Theming guide for a complete list of tokens.

Token	Purpose
`--background`	Page background colour
`--foreground`	Primary text colour
`--accent`	Configurable accent/highlight colour for links, buttons, and interactive elements
`--border`	Border colour
`--code-bg`	Code block background
`--muted-foreground`	Secondary text colour

Streamdown config

Streamdown is configured per component via the plugins prop. See the Plugins page for full options for each plugin.

tsx

<Streamdown
  plugins={{ code, math, mermaid, cjk }}
  animated={false}
>
  {content}
</Streamdown>