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.

Search API

Fumadocs provides a search API to search the documentation.

You can use the createI18nSearchAPI function to search the documentation.

src/app/api/search/route.ts

export const { GET } = createI18nSearchAPI("advanced", {
	i18n: {
		defaultLanguage: appConfig.i18n.defaultLocale,
		languages: Object.keys(appConfig.i18n.locales).filter(
			(locale) => locale !== "zh",
		),
	},
	indexes: source.getLanguages().flatMap((entry) =>
		entry.pages.map((page) => ({
			title: page.data.title,
			description: page.data.description,
			structuredData: (page.data as any)?.structuredData,
			id: page.url,
			url: page.url,
			locale: entry.language,
		})),
	),
});

Because the default search API is not support the Chinese language zh, you need to filter the Chinese language from the languages array.

If you want to support the special language search like Chinese, you can refer the follow links:

For example, for Chinese & Japanese, they require additional configurations:

pnpm add @orama/tokenizers

Update the search API to support the special languages:

src/app/api/search/route.ts

import { source } from '@/lib/source';
import { createFromSource } from 'fumadocs-core/search/server';
import { createTokenizer } from '@orama/tokenizers/mandarin';

export const { GET } = createFromSource(source, {
  localeMap: {
    // [locale]: Orama options
    zh: {
      components: {
        tokenizer: createTokenizer(),
      },
      search: {
        threshold: 0,
        tolerance: 0,
      },
    },
  },
});

🎯 Next Steps

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

On this page