Documentation Portal

Overview

NextBento includes a fully functional documentation portal that you can use as a template for your own product docs. This page explains the architecture so you can customize or replicate it.

Architecture

File Structure

app/docs/
  layout.tsx       # Docs layout with header + sidebar
  page.tsx         # Docs home
  [...slug]/page.tsx  # Dynamic doc pages (MDX)

content/docs/
  introduction.mdx
  quick-start.mdx
  ...              # One .mdx file per doc

lib/docs/
  navigation.ts    # Sidebar config, slugs, prev/next
  docs.ts          # Load MDX, extract TOC

components/docs/
  docs-header.tsx      # Header with search trigger
  docs-sidebar.tsx     # Collapsible sidebar
  docs-command-search.tsx  # ⌘K search
  mdx-components.tsx   # Custom MDX components
  prev-next.tsx       # Prev/Next navigation
  table-of-contents.tsx

Navigation Config

Edit lib/docs/navigation.ts to add sections and pages:

export const docsNavigation: DocNavSection[] = [
  {
    title: 'Getting Started',
    icon: Rocket,
    items: [
      { title: 'Introduction', slug: 'introduction' },
      { title: 'Quick Start', slug: 'quick-start' },
    ],
  },
  // ...
]

Each slug must match an MDX file in content/docs/{slug}.mdx.

MDX Content

Create .mdx files in content/docs/ with frontmatter:

---
title: Your Doc Title
description: Short description for SEO.
---

## Section Heading

Your content here. Use **markdown** and custom components like <Callout variant="tip">Tips</Callout>.

Search (⌘K)

The docs use cmdk for a command-palette search. It indexes all doc titles and slugs from the navigation config. Press ⌘K (or Ctrl+K) to open.

Custom MDX Components

The docsMdxComponents in components/docs/mdx-components.tsx provide:

• Styled headings (h2, h3, h4) with anchor IDs
• Callout — info, warning, tip, danger
• CodeBlock — with copy button
• DocsImage — zoomable screenshots
• DocsVideo — walkthrough videos with controls
• ScreenshotPlaceholder — dashed box until an asset is added
• Tables, lists, blockquotes

Customization

• Sidebar — Add icons, footer links, or new sections in lib/docs/navigation.ts
• Header — Modify components/docs/docs-header.tsx for your branding
• Styling — Prose styles live in the MDX components and docs-content class

SEO

Doc pages include:

• Dynamic metadata (title, description)
• JSON-LD Article schema
• Breadcrumb schema
• Sitemap inclusion (add /docs/* to your sitemap)