SaaS Boilerplate

Create and manage static content with MDX and FumaDocs for blog, help, docs, and updates.

By the end of this guide, you'll understand how to create and manage static content in your SaaS application using MDX and FumaDocs. You'll learn to author documentation, blog posts, help articles, and product updates that automatically render with rich components, proper SEO, and seamless navigation.

Overview

The SaaS Boilerplate includes a comprehensive content management system that lets you create static content without touching code. This system powers four main content types:

Documentation (/docs) - Technical guides and API references using FumaDocs
Blog (/blog) - Company news, tutorials, and announcements
Help Center (/help) - User-facing support articles and FAQs
Product Updates (/updates) - Changelog and feature announcements

All content uses MDX (Markdown + JSX) for rich formatting with interactive components. The system automatically handles routing, SEO metadata, navigation, and responsive design.

How It Works

The content layer uses FumaDocs to transform MDX files into fully-featured web pages. Here's the architecture:

Configuration Layer

Content is configured in source.config.ts with different schemas for each content type:

// source.config.ts
export const docs = defineDocs({
  dir: 'src/content/docs',
  docs: {
    postprocess: {
      includeProcessedMarkdown: true,
    },
  },
})

export const blog = defineDocs({
  dir: 'src/content/blog', 
  docs: {
    schema: frontmatterSchema.extend({
      cover: z.url().optional(),
      tags: z.array(z.string()).optional(),
    }),
  },
})

Rendering Pipeline

Each content type has dedicated pages that load content via FumaDocs loaders:

// src/app/(site)/(content)/docs/source.ts
export const source = loader({
  baseUrl: '/docs',
  source: docs.toFumadocsSource(),
})

Component System

MDX files use custom components defined in mdx-components.tsx:

// mdx-components.tsx
export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...defaultMdxComponents,
    Accordion, Accordions, Banner, Step, Steps,
    TypeTable, File, Folder, Files,
    // ... more components
  }
}

Content Types

Creating Content

Choose Content Type

Decide where your content belongs based on audience and purpose:

Docs: Technical content for developers/integrators
Blog: Marketing content, tutorials, announcements
Help: User support, troubleshooting, FAQs
Updates: Product changes, new features, maintenance

Create File Structure

Create your MDX file in the appropriate directory:

Add Frontmatter

Include required metadata at the top of your file:

---
title: "My Article Title"
description: "Brief description for SEO and previews"
date: "2024-01-15T10:00:00.000Z"
tags: ["tutorial", "getting-started"]
---

Write MDX Content

Use Markdown with JSX components for rich formatting:

# My Article Title

This is regular markdown content.

<Steps>
<Step>
### Step 1
Do something important.
</Step>
<Step>
### Step 2  
Do the next thing.
</Step>
</Steps>

<Banner type="info">
Here's a helpful tip!
</Banner>

For help center categories, create meta.json files:

{
  "title": "Getting Started",
  "description": "Initial setup guides",
  "icon": "Rocket",
  "pages": ["first-steps", "setup"],
  "defaultOpen": true
}

MDX Components

Use these components to create interactive, professional content:

Prop

Type

Docs use automatic navigation based on folder structure. Create nested folders for organization:

src/content/docs/
├── getting-started/
│   ├── quickstart.mdx
│   └── environment-setup.mdx
├── core-concepts/
│   ├── authentication.mdx
│   └── database.mdx
└── api-reference/
    ├── endpoints.mdx
    └── schemas.mdx

Help Center Categories

Help uses explicit navigation with meta.json files for grouping:

src/content/help/
├── (getting-started)/
│   ├── meta.json          # Category definition
│   └── first-steps.mdx
├── (account-management)/
│   ├── meta.json
│   ├── profile.mdx
│   └── security.mdx
└── (faq)/
    ├── meta.json
    └── questions.mdx

Meta.json Structure

{
  "title": "Category Name",
  "description": "Category description",
  "icon": "IconName",
  "pages": ["page-slug-1", "page-slug-2"],
  "defaultOpen": false
}

Practical Example

Let's create a complete help article with navigation:

Create Category Structure

mkdir -p src/content/help/\(troubleshooting\)

Create meta.json

// src/content/help/(troubleshooting)/meta.json
{
  "title": "Troubleshooting",
  "description": "Solutions to common issues",
  "icon": "HelpCircle",
  "pages": ["common-issues", "error-codes"],
  "defaultOpen": false
}

Create Article

// src/content/help/(troubleshooting)/common-issues.mdx
---
title: "Common Issues & Solutions"
description: "Fix the most frequently encountered problems"
---

# Common Issues & Solutions

<Accordions type="multiple">
<Accordion title="Login problems">
Check your email for the verification link. If you don't see it, check your spam folder.
</Accordion>

<Accordion title="Slow loading">
Clear your browser cache or try a different browser. Contact support if the issue persists.
</Accordion>
</Accordions>

SEO & Performance

The content layer automatically optimizes for SEO:

Meta tags: Title and description from frontmatter
Open Graph: Automatic social media previews
Structured data: JSON-LD for rich snippets
Performance: Static generation with ISR
Accessibility: Semantic HTML and ARIA attributes

Troubleshooting

Best Practices