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" />

これは.mdxファイルにGitリポジトリに保存されている本当のコンテンツと本当のコンポーネントです。CMSの管理パネルは必要ありません。見出しをレンダリングするためのREST API呼び出しも必要ありません。

開発者がMDXを好む理由

• Git-nativeワークフロー: コンテンツはコードと同じ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-Firstアーキテクチャへのアプローチ

私たちはMDXファイルを/contentフォルダにドロップしてそれで終わりとは言いません。スケールする適切なコンテンツアーキテクチャを構築します。

Frontmatterバリデーション付きコンテンツスキーマ

すべてのMDXファイルは、Zodまたは同様のランタイムバリデータを使用して検証されたfrontmatterスキーマを取得します。コンテンツは強制された構造を持っています — 必須フィールド、型付きされた日付、検証されたスラッグ — 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 and Remark plugins — シンタックスハイライト、目次生成、リンク処理、および画像最適化用
• Tailwind CSS — デザイントークン付きのコンポーネントスタイリング用
• Vercel or Netlify — インスタント・ロールバック付きデプロイ用（コンテンツはGitにあるため、すべてのデプロイは可逆的です）

得られるもの

MDX-firstウェブサイトを納品する際、以下を手に入れます：

• 秒以下のページロード時間を持つ完全にデプロイされたサイト
• バリデーション付きのドキュメント化されたコンテンツスキーマ
• カスタムMDXコンポーネントライブラリ
• プレビューデプロイメント付きのGitベースのコンテンツワークフロー
• ゼロの月額CMSコスト
• すべてのコンテンツファイル、コンポーネント、構成の完全な所有権
• 存在しない移行パス — 移行する必要があるものがないので

これは誰のためのものか

MDX-firstアーキテクチャは以下に適しています：

• 開発者ツール企業 — ドキュメント、ブログ、マーケティングページを1つのスタックで実現したい場合
• スタートアップ — 収益が出る前にCMSに月額$300を払いたくない場合
• エージェンシー — 数十のクライアントサイト全体でCMS統合の保守に疲れている場合
• エンジニアリングチーム — コンテンツをサードパーティのダッシュボードではなくモノレポに配置したい場合

チームがGitに慣れており、短期的な便利さよりも長期的な所有権を大切にする場合、MDXが正しい選択です。