Documentation
Learn how to create and manage documentation in your Sushify Next.js application
Sushify Next.js includes a powerful documentation system powered by Fumadocs, providing a beautiful and feature-rich documentation experience.
Features
- MDX Support: Write documentation with Markdown and React components
- Automatic Navigation: Sidebar and navigation generated from file structure
- Search: Built-in full-text search
- Syntax Highlighting: Beautiful code highlighting with copy buttons
- Table of Contents: Auto-generated TOC for each page
- Multi-Language: Support for multiple languages
- Dark Mode: Built-in dark mode support
- API Documentation: OpenAPI/Swagger documentation support
- Versioning: Document multiple versions of your product
File Structure
Documentation files are located in apps/web/content/docs:
apps/web/content/docs/
├── index.mdx # Home page
├── meta.json # Navigation structure
├── getting-started/
│ ├── overview.mdx
│ ├── installation.mdx
│ ├── configuration.mdx
│ └── meta.json
├── api/
│ ├── index.mdx
│ ├── authentication.mdx
│ └── meta.json
└── ...Creating Documentation
Basic Page
Create a new MDX file in the docs directory:
---
title: My Feature
description: Learn how to use this amazing feature
---
# My Feature
This feature allows you to do amazing things.
## Installation
Install the required packages:
```bash
pnpm add my-feature
```
## Usage
Here's how to use it:
```typescript
import { MyFeature } from "my-feature";
const feature = new MyFeature();
feature.doSomething();
```Organizing with meta.json
Define navigation structure with meta.json:
{
"pages": [
"index",
"getting-started",
"database",
"authentication",
"api",
"deployment"
]
}For folders with sub-pages:
{
"title": "Getting Started",
"pages": [
"overview",
"installation",
"configuration",
"environment-setup"
]
}Front Matter
Required Fields
---
title: Page Title
description: Brief description of the page
---Optional Fields
---
title: Advanced Configuration
description: Learn about advanced configuration options
icon: Settings # Lucide icon name
full: false # Full-width layout
toc: true # Show table of contents
---Components
Callouts
<Callout type="info">
This is an informational callout.
</Callout>
<Callout type="warning">
This is a warning callout.
</Callout>
<Callout type="error">
This is an error callout.
</Callout>Code Blocks
```typescript title="app/page.tsx"
export default function Page() {
return <div>Hello World</div>;
}
```With line highlighting:
```typescript {2,4-6}
function example() {
const highlighted = true; // highlighted
const normal = true;
const highlighted2 = true; // highlighted
const highlighted3 = true; // highlighted
const highlighted4 = true; // highlighted
}
```Multi-Language Documentation
Create language-specific versions:
---
title: Overview
description: Get started with our platform
---
Content in English...---
title: Übersicht
description: Erste Schritte mit unserer Plattform
---
Inhalt auf Deutsch...