Project Structure

This page will detail the directory structure and the purpose of each file in the project.

Project Overview

Core Directory Explanation

app/ Directory

This is the Next.js 13+ App Router directory containing application routes and layouts:

• [locale]/: Dynamic route handling different language pages
• (site)/: Website homepage and other static pages
• docs/: Documentation page route handling
• i18n/: Internationalization related configurations and utility functions
• api/: API routes including search functionality

content/ Directory

Stores all content files:

• docs/: Documentation content with multi-language file support
• blog/: Blog articles with multi-language and tag classification support
• pages/: Static page content like about page, privacy policy, etc.

blog/ Directory Details

The blog directory stores blog articles with the following features:

• Multi-language support: Use suffixes like .zh-cn.mdx
• Tag system: Use tags field in frontmatter
• Category functionality: Support organizing articles by categories
• SEO optimization: Automatically generate meta tags and structured data

Example file structure:

blog/
├── example-blog.mdx          # English blog
├── example-blog.zh-cn.mdx    # Chinese blog

└── tech-tips.zh-cn.mdx       # Tech sharing article

pages/ Directory Details

The pages directory stores static page content:

• Legal pages: Privacy policy, terms of service, license, etc.
• Company information: About us, contact information, etc.
• Changelog: Product updates and change records
• Custom pages: Any other static content pages

Example file structure:

pages/
├── about.mdx              # About page
├── privacy-policy.mdx     # Privacy policy
├── terms-of-service.mdx   # Terms of service
├── license.mdx            # License information
└── changelog.mdx          # Changelog

components/ Directory

Reusable React components:

• Hero/: Homepage hero section component
• Navigation/: Navigation component
• Footer/: Footer component
• FAQ/: Frequently asked questions component
• Other business components...

locales/ Directory

Internationalization translation files:

• en/: English translations
• zh-cn/: Simplified Chinese translations

Important Configuration Files

next.config.mjs

Next.js main configuration file containing:

• Internationalization configuration
• MDX processing configuration
• Build optimization settings

source.config.ts

Fumadocs configuration file defining:

• Document source configuration
• Search functionality settings
• Page generation rules

middleware.ts

Middleware handling internationalization routing, responsible for:

• Language detection and redirection
• Path localization
• Cookie and Header processing

File Naming Conventions

Multi-language Files

Document files use language suffixes:

• filename.zh-cn.mdx - Simplified Chinese

• filename.mdx - Default language (English)

Metadata Files

Each directory can contain a meta.json file to define:

• Page order
• Navigation structure
• Page titles and descriptions

Content Organization Recommendations

1. Group by functionality: Place related documents in the same directory
2. Maintain consistency: Ensure file structure consistency across all language versions
3. Use descriptive names: File and directory names should clearly express their content
4. Reasonable hierarchy: Avoid overly deep directory nesting

Next Steps

After understanding the project structure, you can:

• Learn Configuration Guide
• Start Customizing Content
• Understand Deployment Process