Doc Template

A modern documentation site template built with Nextra, Next.js 15, and React 19.

Features

• Next.js 15 with App Router
• React 19 with latest features
• Nextra 4 documentation framework
• Tailwind CSS 4 for styling
• TypeScript for type safety
• Pagefind for full-text search
• Mermaid for diagrams with zoom/pan controls
• KaTeX for math rendering
• Dark mode support

Quick Start

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm start

Project Structure

doc-template/
+-- src/
|   +-- app/                    # Next.js App Router
|   |   +-- _components/        # Shared React components
|   |   +-- _constants/         # Project constants
|   |   +-- _utils/             # Utility functions
|   |   +-- [[...mdxPath]]/     # Dynamic MDX routing
|   |   +-- layout.tsx          # Root layout
|   |   +-- metadata.ts         # Site metadata
|   +-- content/                # MDX documentation files
|   |   +-- _meta.ts            # Navigation configuration
|   |   +-- index.mdx           # Home page
|   |   +-- getting-started/    # Getting started section
|   |   +-- guides/             # Guides section
|   +-- mdx-components.ts       # MDX component mappings
|   +-- styles/
|       +-- globals.css         # Global styles
+-- public/                     # Static assets
+-- mdx-components.tsx          # MDX re-export
+-- next.config.ts              # Next.js configuration
+-- tailwind.config.js          # Tailwind configuration
+-- tsconfig.json               # TypeScript configuration
+-- package.json

Configuration

Update Project Constants

Edit src/app/_constants/project.ts:

export const BASE_URL = "https://your-docs.com";
export const GITHUB_REPO_URL = "https://github.com/your-org/your-docs";
export const PROJECT_URL = "https://github.com/your-org/your-docs";

Update Metadata

Edit src/app/metadata.ts with your site information.

Customize Branding

Edit src/app/layout.tsx to update the logo and navbar.

Adding Documentation

Create a New Page

1. Create a new .mdx file in src/content/
2. Add frontmatter:

---
title: Page Title
description: Page description
---

# Content here

3. Update the corresponding _meta.ts file

Navigation

Navigation is controlled via _meta.ts files:

export default {
  "page-filename": "Display Title",
  "another-page": "Another Title",
};

Using Diagrams

<MermaidDiagram id="unique-id" chart={`
graph TD
    A[Start] --> B[End]
`} />

License

MIT