Routing

The documentation template uses Next.js App Router for file-based routing. Every folder within app/docs/ maps directly to a URL path, making it straightforward to add new pages.

File-based routing

Each documentation page is defined by a page.tsx file inside a directory that corresponds to its URL segment:

Routing structure
app/docs/
├── page.tsx                    → /docs
├── installation/
│   └── page.tsx                → /docs/installation
├── components/
│   ├── markdown/
│   │   └── page.tsx            → /docs/components/markdown
│   └── code-blocks/
│       └── page.tsx            → /docs/components/code-blocks
└── streamdown/
    ├── page.tsx                → /docs/streamdown
    └── plugins/
        └── page.tsx            → /docs/streamdown/plugins

Dynamic routes

For documentation with many pages following the same template, you can use dynamic route segments:

app/docs/[slug]/page.tsx
interface PageProps {
  params: Promise<{ slug: string }>
}

export default async function DocPage({ params }: PageProps) {
  const { slug } = await params
  // Fetch or resolve content based on slug
  return <article>{/* Page content */}</article>
}

Params are async in Next.js 16

Remember that params must be awaited in Next.js 16. This applies to all Server Components and Route Handlers.

Layouts

The docs section uses a shared layout at app/docs/layout.tsx that renders the sidebar navigation and header across all documentation pages. Nested layouts are fully supported if you need section-specific chrome.

app/docs/layout.tsx
import { Header } from "@/components/docs/header"
import { SidebarNav } from "@/components/docs/sidebar-nav"
import { docsConfig } from "@/lib/docs-config"

export default function DocsLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex min-h-screen flex-col">
      <Header />
      <div className="flex flex-1">
        <aside className="hidden w-64 shrink-0 border-r md:block">
          <SidebarNav items={docsConfig.sidebarNav} />
        </aside>
        <main className="flex-1 min-w-0">{children}</main>
      </div>
    </div>
  )
}

The sidebar navigation is driven by a centralised configuration object in lib/docs-config.ts. When you add a new page, simply add an entry to the config to make it appear in the sidebar:

lib/docs-config.ts
export const docsConfig = {
  sidebarNav: [
    {
      title: "Getting Started",
      href: "/docs",
      items: [
        { title: "Introduction", href: "/docs" },
        { title: "Installation", href: "/docs/installation" },
      ],
    },
    // Add more sections here
  ],
}