MDX 开发者优先网站 — 无 CMS 锁定

你的内容不应该被困在别人的数据库中

每次你提交内容到专有 CMS，你就在做一个赌注。你赌供应商不会提价、不会停用功能、不会被一家不在乎你工作流的公司收购。大多数时候，你会输掉这个赌注。

MDX 翻转了这个模式。你的内容以 Markdown 文件的形式存储在你的代码库中，并通过 JSX 组件进行增强。它是版本控制的、可移植的，完全由你拥有。没有凌晨 2 点过期的 API 密钥，没有迁移噩梦，没有供应商对你的内容进行勒索。

在 Social Animal，我们构建 MDX 驱动的网站，为开发团队提供对内容架构的完全控制，同时保持创作体验的清洁和快速。

什么是 MDX，为什么它很重要？

MDX 是组件时代的 Markdown。它让你编写标准 Markdown 并直接在内容文件中嵌入 React（或任何 JSX 兼容的）组件。可以将其视为开发工具和内容创作之间的桥梁。

一个典型的 MDX 文件如下所示：

# Product Launch Announcement

We're shipping the new dashboard today.

<FeatureGrid features={launchFeatures} />

Read the full changelog [here](/changelog).

<CallToAction variant="primary" />

这是包含真实内容和真实组件的文件，存储在你 Git 仓库中的 .mdx 文件中。不需要 CMS 管理面板。不需要 REST API 调用来呈现标题。

开发者为什么偏好 MDX

• Git 原生工作流：内容经过与代码相同的 PR、审查和部署管道
• 类型安全的组件：你的内容组件在构建时进行验证，而不是运行时
• 零运行时成本：MDX 编译为静态 HTML — 无需客户端 Markdown 解析
• 完整的 JSX 能力：交互式图表、嵌入式演示、动态表格 — 全部内联在你的文章中
• 无供应商依赖：如果你切换框架，你的 .mdx 文件随之而行

供应商锁定问题是真实存在的

我们已经将客户从 Contentful、Prismic、Sanity 和 WordPress 迁移出来 — 有时甚至在同一个季度。模式总是一样的：

1. 一个团队选择 CMS，因为它在演示中看起来不错
2. 他们围绕专有内容模型构建深度耦合的模板
3. CMS 改变定价、弃用 API 版本或引入破坏性变更
4. 迁移变成一个多个冲刺的项目，阻碍功能工作

使用 MDX，迁移不是问题。你的内容是文件。文件存储在文件夹中。文件夹存储在 Git 中。从 Next.js 迁移到 Astro？你的 MDX 文件不关心 — 它们在两者中都能工作。

"无供应商锁定"实际意味着什么

这不是说我们反对 CMS。这意味着你的内容层没有单一故障点是你无法控制的。具体来说：

• 没有专有内容模型 — 你的架构在代码中定义，而不是在供应商的仪表板中
• 构建时没有 API 依赖 — 内容是本地的，构建是快速和确定性的
• 没有按座位定价的意外 — 没有 SaaS 账单与你的内容相关联
• 没有迁移税 — 切换框架或主机不需要重新平台化内容

我们的 MDX 优先架构方法

我们不仅仅是将 MDX 文件放入 /content 文件夹就完事了。我们构建一个可扩展的合适内容架构。

使用 Frontmatter 验证的内容架构

每个 MDX 文件都使用 Zod 或类似的运行时验证器获得经过验证的 frontmatter 架构。你的内容具有强制结构 — 必需字段、类型化日期、验证的 slug — 无需 CMS 来强加它。

const postSchema = z.object({
  title: z.string().max(70),
  date: z.coerce.date(),
  tags: z.array(z.string()),
  draft: z.boolean().default(false),
});

推送格式不正确的内容文件，构建会失败并显示清晰的错误。这比大多数 CMS 平台提供的验证更好。

自定义组件库

我们构建根据你的内容需求定制的可重用 MDX 组件集。常见示例：

• <Callout> — 风格化的提示、警告和信息块
• <CodeDemo> — 带语法高亮的实时代码示例
• <ComparisonTable> — 结构化的功能比较
• <VideoEmbed> — 响应式、延迟加载的视频，具有正确的宽高比
• <PricingCard> — 从你的数据层提取的动态定价组件

这些组件已记录、测试并与你的内容一起版本化。

内容集合和类型安全

使用 Astro 的 Content Collections 或 Next.js 与自定义加载器，我们创建完全类型化的内容 API。你的 IDE 自动完成内容字段。TypeScript 在部署前捕获破坏的引用。老实说，DX 超过了我使用过的任何 CMS GraphQL 浏览器。

非开发者创作选项

MDX 不意味着每个人都需要住在 VS Code 中。我们在需要时添加轻量级编辑层：

• Prose Mirror 或 TinaCMS 用于支持 Git 的视觉编辑
• Decap CMS（原 Netlify CMS） 用于简单的管理 UI，提交到你的仓库
• GitHub 的内置编辑器 与预览工作流用于快速修复
• 自定义管理仪表板 使用以编程方式提交 MDX 文件的服务器操作

内容保留在 Git 中。编辑体验适应进行写作的任何人。

技术栈

我们的 MDX 构建通常运行在：

• Next.js 14+ with next-mdx-remote 或 @next/mdx 用于 App Router 集成
• Astro 原生 MDX 支持和 Content Collections 用于静态优先网站
• Rehype 和 Remark 插件 用于语法高亮、目录生成、链接处理和图像优化
• Tailwind CSS 用于具有设计令牌的组件样式
• Vercel 或 Netlify 用于部署和即时回滚（你的内容在 Git 中，所以每次部署都是可逆的）

你得到什么

当我们交付 MDX 优先网站时，你将获得：

• 一个完全部署的网站，页面加载时间不到一秒
• 一个包含验证的已记录内容架构
• 一个自定义 MDX 组件库
• 一个具有预览部署的基于 Git 的内容工作流
• 零月度 CMS 成本
• 完全拥有每个内容文件、组件和配置
• 一个不存在的迁移路径 — 因为没有什么需要迁移

这对谁有效

MDX 优先架构非常适合：

• 开发者工具公司 想要在一个堆栈中拥有文档、博客和营销页面
• 初创公司 不想在有收入之前为 CMS 支付 300 美元/月
• 代理机构 厌倦了跨数十个客户网站维护 CMS 集成
• 工程团队 想要在他们的单一仓库中拥有内容，而不是第三方仪表板

如果你的团队对 Git 感到舒适，并且你看重长期所有权而不是短期便利，MDX 是正确的选择。