Getting Started

Quickstart

Add a new documentation page in two steps.

1. Add a route

Create a page inside the app/(docs) route group and wrap the content in DocPage. Give every h2 and h3 an id so the table of contents can track it.

app/(docs)/deploying/page.tsx
import type { Metadata } from "next"
import { DocPage } from "@/components/docs/doc-page"

export const metadata: Metadata = { title: "Deploying" }

export default function DeployingPage() {
  return (
    <DocPage
      title="Deploying"
      description="Ship your docs to production."
    >
      <h2 id="vercel">Deploy to Vercel</h2>
      <p>Push to main and let CI take it from there.</p>
    </DocPage>
  )
}

2. Register it in the navigation

Add an entry to lib/docs-nav.ts. The sidebar, command palette, section eyebrow, and previous/next pager all read from this one config.

lib/docs-nav.ts
{
  title: "Deploying",
  href: "/deploying",
  description: "Ship your docs to production.",
}

That's it

The page now appears in the sidebar, is searchable with ⌘K, and picks up pagination automatically. See Components for the building blocks you can use inside a page.

Search documentation

Search pages and jump to a section