Documentation

🏗️ Documentation Architecture

NEXTDEVKIT's documentation system is structured as follows:

src/
├── content/
│   └── docs/
│       ├── index.mdx                    # Documentation home
│       ├── index.zh.mdx                 # Chinese home
│       ├── meta.json                    # Root navigation
│       ├── ...
│       └── deployment/
│           ├── index.mdx
│           ├── nextjs.mdx
│           ├── cloudflare-worker.mdx
│           ├── sst-aws.mdx
│           └── meta.json
├── app/
│   └── [locale]/
│       └── docs/
│           ├── layout.tsx               # Documentation layout
│           └── [[...slug]]/
│               └── page.tsx             # Documentation pages
├── components/
│   └── docs/
│       └── mdx-components.tsx           # Documentation components
├── lib/
│   └── source.ts                       # Documentation source loader
└── source.config.ts                   # Documentation collection

⚙️ Documentation Configuration

Source Configuration

The documentation system is configured in source.config.ts:

src/source.config.ts

import { defineDocs } from "fumadocs-mdx/config";

export const docs = defineDocs({
  dir: "src/content/docs",
});

Source Loader

Documentation is loaded using Fumadocs in src/lib/source.ts:

src/lib/source.ts

export const source = loader({
  i18n,
  baseUrl: "/docs",
  source: docs.toFumadocsSource(),
});

📁 Documentation Organization

Meta Files

Documentation structure is organized using meta.json files:

Root meta.json:

{
  "title": "NEXTDEVKIT",
  "description": "NEXTDEVKIT Documentation",
  "root": true,
  "pages": [
    "index",
    "tech-stack",
    "environment",
    "configuration",
    "deployment",
    "---Codebase---",
    "project-structure",
    "ide-setup",
    "formatting-and-linting",
    "update-the-codebase",
    "---Features---",
    "database",
    "authentication",
    "payment",
    "blog",
    "documentation",
    "---Advanced---",
    "themes",
    "seo"
  ]
}

Section meta.json (e.g., environment/meta.json):

{
  "title": "Environment Setup",
  "description": "Configure your development environment",
  "pages": [
    "index",
    "nextjs",
    "cloudflare-worker",
    "sst-aws"
  ]
}

Hierarchical Organization

Organize documentation in folders with index files:

docs/
├── environment/
│   ├── index.mdx          # Environment overview
│   ├── nextjs.mdx         # Next.js setup
│   ├── cloudflare-worker.mdx
│   ├── sst-aws.mdx
│   └── meta.json          # Section navigation
├── configuration/
│   ├── index.mdx          # Configuration overview
│   ├── website-config.mdx
│   ├── marketing-config.mdx
│   └── meta.json

📝 Creating Documentation

Adding a New Documentation Page

Create a new MDX file in src/content/docs/:

---
title: API Reference
description: Complete API reference for NEXTDEVKIT
icon: Code
---

# API Reference

Complete API reference for NEXTDEVKIT's server actions and utilities.

## Authentication API

### `getSession()`

Get the current user session on the server side.

```typescript title="src/app/components/server-component.tsx"
import { getSession } from '@/lib/auth/server';

export default async function ServerComponent() {
  const session = await getSession();
  
  if (!session?.user) {
    redirect('/auth/login');
  }
  
  return <div>Welcome, {session.user.name}!</div>;
}

The icon property in the frontmatter supports all Lucide icons and will be generated as an icon in the sidebar.

Organization

Fumadocs supports hierarchical organization of documentation.

You can create the meta.json file in each folder to organize the documentation.

For example, to create a new section called configuration, you need to create a new folder called configuration in the src/content/docs/ directory and add an meta.json file in it.

src/content/docs/configuration/meta.json

{
  "title": "Configuration",
  "description": "Configuration documentation",
  "pages": [
    "index",
    "website-config",
    "marketing-config"
  ]
}

Multi-language

Fumadocs supports multi-language documentation.

You can create content in multiple languages using the following file naming convention:

Default locale (e.g., English): filename.mdx
Other locales (e.g., Chinese): filename.zh.mdx

And for internationalization, you can create a new meta.zh.json file in the same folder.

🎯 Next Steps

Now that you understand the documentation system, explore these related features:

On this page