Nuxt Content モジュールの活用と実務的なポイント解説

Nuxt Content モジュールは、Nuxt.js プロジェクトにファイルベースのCMS機能を簡単に組み込める強力なツールです。MarkdownやJSON、YAMLなどのファイルをコンテンツとして扱い、APIのようにクエリを実行できるため、静的サイトや動的サイトのコンテンツ管理が非常に効率的になります。

本記事では、Nuxt Content の基本的な使い方だけでなく、実務でよくあるユースケースや注意すべきポイントを詳しく解説します。これにより、より安定的でパフォーマンスの高いコンテンツ管理を実現できるでしょう。

まず結論：Nuxt Content のポイント

• ファイルベースCMSを簡単に構築可能：content/ ディレクトリに配置したMarkdownやJSONなどのファイルを自動で読み込み、APIのようにクエリできる。
• Vueコンポーネントの埋め込みが可能：Markdown内にVueコンポーネントを埋め込めるMDC構文をサポート。
• 柔軟なクエリ機能：MongoDBのようなクエリ構文でコンテンツを絞り込み、動的に表示できる。
• 自動ナビゲーション生成：コンテンツ構造に基づいたナビゲーションを自動生成できる。
• SSRと静的生成に対応：サーバーサイドレンダリングや静的サイト生成（SSG）に適した設計。

いつ使うべきか・使わない方がよいケース

使うべきケース

• ドキュメントサイトやブログの構築
  Markdownベースのコンテンツを多用するサイトで、コンテンツの管理と表示を一元化したい場合に最適です。

• 静的サイト生成（SSG）を活用した高速な公開
  ビルド時にコンテンツを取り込み、静的ファイルとして配信することで高速なページ表示が可能です。

• APIサーバーを用意せずにコンテンツ管理を完結したい場合
  外部CMSやAPIを使わずに、ローカルファイルだけでコンテンツ管理を完結できます。

使わない方がよいケース

• 大量のコンテンツを頻繁に更新する大規模サイト
  ファイルベースのため、更新のたびにビルドが必要になり、運用コストが高くなる可能性があります。

• ユーザー生成コンテンツやリアルタイム更新が必要な場合
  動的なデータベース連携やリアルタイム性が求められる場合は、専用のCMSやAPIを利用した方が適しています。

実務でよくあるユースケースとサンプルコード

1. ブログ記事の一覧表示と詳細ページ

content/blog/ にMarkdownファイルを配置し、一覧ページでタイトルと概要を表示、詳細ページで本文をレンダリングします。

<script setup lang="ts">
import { useAsyncData } from '#app'
const { data: posts } = await useAsyncData('posts', () =>
  queryContent('blog').sort({ publishedAt: -1 }).find()
)
</script>

<template>
  <ul>
    <li v-for="post in posts" :key="post._path">
      <NuxtLink :to="post._path">{{ post.title }}</NuxtLink>
      <p>{{ post.description }}</p>
    </li>
  </ul>
</template>

詳細ページでは ContentRenderer コンポーネントでMarkdownをレンダリングします。

<script setup lang="ts">
const route = useRoute()
const { data: post } = await useAsyncData(route.path, () =>
  queryContent(route.path).findOne()
)
</script>

<template>
  <ContentRenderer v-if="post" :value="post" />
</template>

2. Markdown内にVueコンポーネントを埋め込む

MDC構文を使うことで、Markdownファイル内に動的なVueコンポーネントを埋め込めます。例えば、カスタムのアラートコンポーネントを表示可能です。

# サンプル記事

ここに通常のMarkdownテキスト。

<Alert type="warning">
  これは警告メッセージです。
</Alert>

3. 多言語対応のコンテンツ管理

content/en/ や content/ja/ のように言語ごとにディレクトリを分けて管理し、ルーティングで言語を切り替えられます。

よくある落とし穴・注意点

1. SSRとHydrationのズレに注意

Markdown内に動的なVueコンポーネントを埋め込む場合、サーバーサイドレンダリング（SSR）とクライアント側のHydrationで差異が生じることがあります。特に状態を持つコンポーネントは、初期レンダリング時の状態を揃えることが重要です。

2. パフォーマンスへの影響

大量のコンテンツを一度に読み込むとビルド時間や初期ロードが遅くなるため、クエリで必要なデータだけを絞り込む工夫が必要です。また、静的生成時にコンテンツが多いとビルド時間が長くなるため、分割ビルドやキャッシュの活用を検討しましょう。

3. ファイル名・パスの管理

content/ 配下のファイル名やディレクトリ構造がそのままURLパスに影響するため、命名規則を統一し、意図しないルーティングが発生しないように注意してください。

まとめ

Nuxt Content モジュールは、Nuxt.js でファイルベースのCMSを手軽に実装できる便利なツールです。MarkdownやJSONなど多様なフォーマットをサポートし、Vueコンポーネントの埋め込みや柔軟なクエリ機能も備えています。

ただし、大量コンテンツの運用やリアルタイム更新には向かないため、用途に応じて使い分けることが重要です。SSRやHydrationの差異、パフォーマンス面の注意点を理解し、適切に設計すれば、効率的で拡張性の高いコンテンツ管理が可能になります。