Astro Content Collections は『型安全な MD 管理』の決定打
Astro の Content Collections は Markdown/MDX を型安全に管理する仕組みで、ブログ・ドキュメントサイトの標準パターンになりつつあります。本記事では編集部の視点で、深掘りした使い方を公開情報をもとに整理します。Astro 実践 もご参考に。
基本構造
(1) src/content/配下にコンテンツ。(2) config.tsでスキーマ定義。(3) getCollection()で取得。(4) 型推論が効く。(5) Zod でフロントマター検証。Zod-Valibot もご参考に。
スキーマ定義の実例
(1) title (string)。(2) date (date型)。(3) author (reference)：別コレクション参照。(4) tags (array)。(5) image schema()：画像メタデータ。
MDX の活用
(1) JSX を MDX 内で使用。(2) React/Vue/Svelte コンポーネント import。(3) カスタムコンポーネント：Callout/Code 等。(4) frontmatterで props 設定。(5) シンタックスハイライト：Shiki 内蔵。shadcn/ui 実践 もご参考に。
動的ルート生成
(1) [slug].astroでファイル単位。(2) getStaticPathsで全パス生成。(3) SSG ビルド時に静的化。(4) 関連記事の自動抽出。(5) RSS フィード生成。
パフォーマンス最適化
(1) Image Service：自動最適化。(2) Partial Hydration：必要部分のみ JS。(3) View Transitions：滑らかな遷移。(4) Sitemap：プラグイン。(5) Web Vitals常時最適。Web Vitals 最適化 もご参考に。
CMS との連携
(1) Headless CMS：Contentful/Sanity/Strapi 等。(2) Notion API：エディタ統合。(3) Git ベース：Decap CMS 等。(4) ビルド時取得：SSG。(5) Webhook で再ビルド。Webhook 設計 もご参考に。
失敗しがちなパターン
(1) スキーマ未定義：型の恩恵失う。(2) 巨大画像：Image Service 未活用。(3) 過剰な Hydration：パフォーマンス低下。(4) SEO 設定不足。(5) CMS 連携の遅延。対策は、(1)config.ts 整備、(2)astro:assets、(3)client:visible 厳選、(4)SEO 必須項目、(5)on-demand ISR、です。