Blog System Complete Guide

NextDevKit uses Fumadocs MDX to build the blog system, providing powerful content creation and management capabilities.

A blog is an essential feature module for modern websites. Whether it's sharing technical insights or companies publishing product updates, a well-featured blog system brings tremendous value, and can bring more organic search traffic through SEO optimization.

NextDevKit comes with a modern blog system based on MDX, letting you focus on content creation.

🤔 What is MDX?

Core Concepts of MDX

MDX (Markdown for JSX) is a superset of Markdown that allows you to use JSX components directly in Markdown documents. This means you can:

• Maintain Markdown's simplicity: Continue using familiar Markdown syntax
• Enhance interactivity: Embed React components for complex functionality
• Unified development experience: Content and components use the same tech stack
• Type safety: Enjoy full TypeScript support

MDX vs Traditional Markdown

Traditional Markdown limitations:

# My Blog Post
This is ordinary text.

![Image](./image.png)

The power of MDX:

# My Blog Post
This is ordinary text.

<Image 
  src="/blog/my-image.png" 
  alt="High-resolution image" 
  width={800} 
  height={400}
  priority
/>

<VideoEmbed url="https://www.youtube.com/watch?v=..." />

🏗️ NextDevKit Blog Architecture

Directory Structure

NextDevKit's blog system uses file-based content management:

Core Component Descriptions:

• src/content/blog/: Stores all blog MDX files
• app/[locale]/(marketing)/blog/: Blog page routes and layouts
• components/blog/: Blog-specific React components
• Multi-language support: .mdx (English) and .zh.mdx (Chinese) files

Tech Stack

NextDevKit's blog system is built on the following technologies:

• Fumadocs MDX: MDX parsing and rendering engine
• Next.js 15: Application framework and routing system
• TypeScript: Type-safe development experience
• Tailwind CSS: Styling system
• Rehype/Remark: Content processing plugins

✍️ Creating Your First Blog Post

Understanding Frontmatter & Fumadocs Configuration

Frontmatter Schema Definition

NextDevKit defines a Zod Schema in source.config.ts to ensure correct metadata format for each article:

export const blogs = defineCollections({
  type: "doc",
  dir: "src/content/blog",
  schema: (ctx) => {
    return z.object({
      title: z.string(),                    // Required: Article title
      description: z.string(),              // Required: Article description
      keywords: z.string().optional(),      // Optional: SEO keywords
      createdAt: z.date(),                  // Required: Creation date
      updatedAt: z.date(),                  // Required: Update date
      tags: z.array(z.string()).optional(), // Optional: Tag array
      author: z.string(),                   // Required: Author info
      image: z.string().optional(),         // Optional: Cover image
      slug: z.string().default(/* auto-generated */),   // Auto: URL path
      locale: z.string().default(/* auto-detected */), // Auto: Language locale
    });
  },
});

Smart Field Processing

Auto Slug Generation:

slug: z.string().default(ctx.path.split("/").pop()?.split(".")[0])

File nextjs-guide.mdx → slug: "nextjs-guide"

Auto Language Detection:

locale: z.string().default(() => {
  const locale = ctx.path.split("/").pop()?.split(".")[1];
  if (locale === "md" || locale === "mdx") {
    return appConfig.i18n.defaultLocale; // Default "en"
  }
  return locale; // "zh", "ja", etc.
})

Complete Frontmatter Example

Every blog post begins with YAML Frontmatter that defines the article's metadata:

---
title: My First Blog Post
description: "This is my first blog post created with NextDevKit, introducing basic MDX writing methods."
keywords: "nextjs blog, mdx tutorial, nextdevkit"
createdAt: 2025-01-15T10:00:00+08:00
updatedAt: 2025-01-15T10:00:00+08:00
tags: ["nextjs", "blog", "tutorial"]
author: "Your Name"
image: "/blog/my-first-post.png"
# slug and locale will be auto-generated, no need to fill manually
---

# Welcome to My Blog!

Multi-language Support

NextDevKit supports multi-language blogs. Create different language versions of the same article:

src/content/blog/
├── my-post.mdx        # English version
└── my-post.zh.mdx     # Chinese version

Of course, you can also add more language versions.

📊 Blog Management and Optimization

Article Organization Strategies

Organize by Time:

src/content/blog/
├── 2025-01-nextjs-tutorial.mdx
├── 2025-02-react-patterns.mdx
└── 2025-03-typescript-tips.mdx

Organize by Topic:

src/content/blog/
├── nextjs-complete-guide.mdx
├── react-best-practices.mdx
└── typescript-advanced.mdx

Tag and Classification System

Use tags to categorize articles:

tags: ["nextjs", "react", "typescript", "tutorial"]

Tag Naming Suggestions:

• Tech Tags: nextjs, react, typescript, css
• Type Tags: tutorial, guide, case-study, news
• Difficulty Tags: beginner, intermediate, advanced
• Topic Tags: frontend, backend, fullstack, design
• Business Tags: AI, cloud computing, database, security, devops

SEO Optimization

Title Optimization:

title: "Next.js 15 Complete Guide: From Beginner to Expert (2025)"

Description Optimization:

description: "Deep dive into Next.js 15 new features including App Router, Server Components, parallel routes. This guide provides practical cases and best practices."

Keyword Strategy:

keywords: "nextjs 15, app router, server components, react, nextjs tutorial"

Image Optimization Strategy

Image Naming Convention:

public/blog/
├── nextjs-guide/
│   ├── hero-image.png
│   ├── app-router-diagram.svg
│   └── performance-chart.webp
└── react-patterns/
    ├── component-tree.png
    └── state-flow.svg

🔍 Content Management Best Practices

NextDevKit's blog system is file-based, you can edit MDX files directly in your IDE, or use AI assistance to generate content.

CMS vs File Management

File Management Advantages (NextDevKit's approach):

• Version Control: Git manages content change history
• Developer Experience: Edit directly in IDE, can use AI assistance to generate content
• Type Safety: TypeScript checks content structure
• Offline Work: Create content without network connection
• Automatic Deployment: Git commits trigger site updates

CMS Use Cases:

• Team Collaboration: Non-technical team members participate in content creation
• Client Requirements: Clients need independent content management
• Workflow: Need content review and publishing processes

📚 Summary

NextDevKit's blog system provides a powerful and flexible solution for content creation:

💡 Core Advantages

🚀 Modern Authoring Experience:

• MDX combines Markdown simplicity with React flexibility
• Real-time preview and hot reload
• TypeScript type safety
• Rich built-in components

📊 Content Management Capabilities:

• File-based version control
• Multi-language content support
• Tag classification system
• Built-in SEO optimization

🎨 Customization Capabilities:

• Custom MDX components
• Flexible styling system
• Extensible feature architecture
• Built-in performance optimization

By mastering NextDevKit's blog system, you can build professional, efficient, and user-friendly content platforms, focusing on creating high-quality content!

Reference Resources:

• MDX Official Documentation
• Fumadocs Documentation
• Next.js Image Optimization
• NextDevKit Blog Examples