Docker × Next.js × WordPressで作るヘッドレスCMS入門【ローカル開発環境構築ガイド】

注意: 本記事はAI（ChatGPT）を活用して執筆しています。内容の正確性には配慮していますが、最新情報や公式ドキュメントも併せてご確認ください。

Docker + Nextjs + WordPressを使ったヘッドレスCMS環境を構築する方法を解説します。
ヘッドレスCMSを使うことで、WordPressの管理画面で記事を管理しつつ、フロントエンドはNext.jsで高速・柔軟に開発できます。

この記事では、Docker Composeを使ってローカルに開発環境を構築し、Next.jsとWordPressを連携させる方法を紹介します。

想定する読者

• Headless CMSに興味がある人
• Dockerで開発環境を構築したい人
• Next.jsとWordPressを連携したい人

GitHubリポジトリ

このリポジトリにはDocker Composeで構築できるNext.js＋WordPress環境のサンプルが含まれています。
🔗 https://github.com/konatsu-dev/headless-cms

バージョン

README.mdにも記載していますが各サービスのバージョンは下記のようになっています。

サービス/ディレクトリ	バージョン情報
Next.js	15.4.1
Node.js	22.x
WordPress	6.8.x
MySQL	8.4

2025年7月時点でのそれぞれ最新のバージョンを使用していますので、バージョンの決め方に特にこだわりなしです。

起動～初期設定まで

ここでは、実際にDockerを使ってNext.js＋WordPressのヘッドレスCMS環境を立ち上げる手順と、各サービスへのアクセス方法について解説します。

1. リポジトリのクローン

まずは、GitHub上のリポジトリをローカル環境にクローンします。

git clone https://github.com/konatsu-dev/headless-cms.git
cd headless-cms

2. Docker環境の起動

次に、Docker Composeを使って必要なサービス（Next.js、WordPress、MySQL）を一括で起動します。

docker compose up -d

初回起動時は、Dockerイメージのダウンロードや依存パッケージのインストールが行われるため、数分かかる場合があります。
-dオプションを付けることで、バックグラウンドでコンテナが起動します。

3. 各サービスへのアクセス

サービスが正常に起動したら、以下のURLからそれぞれのサービスにアクセスできます。

サービス	アクセスURL	備考
Next.js	http://localhost/	フロントエンド（ポート80）
WordPress	http://localhost:8888/	管理画面・API（ポート8888）
MySQL	localhost:3306	ユーザー: user / パスワード: user

• Next.js
  ブラウザで http://localhost/ にアクセスすると、Next.jsで構築されたフロントエンド画面が表示されます。

• WordPress
  http://localhost:8888/ にアクセスすると、WordPressの管理画面やAPIにアクセスできます。初期設定や記事の投稿はこちらから行います。

  ⚠️ 重要: WordPressの初期設定を完了していない場合、Next.js側でエラー画面が表示される可能性があります。WordPressに初回アクセスした際は、以下の初期設定を必ず行ってください：

  1. サイト名の設定
  2. 管理者アカウントの作成
  3. パーマリンク設定を「投稿名」に変更（API連携に必要）

• MySQL
  データベースに外部ツールから接続する場合は、ホストmysql、ポート3306、ユーザーuser、パスワードuserを使用してください。

---

この手順で、ローカル環境にヘッドレスCMSの開発環境を簡単に構築できます。
次のセクションでは、WordPressとNext.jsの連携方法や、実際に記事を投稿して表示する手順について解説します。

WordPressとNext.jsの連携・記事表示手順

1. WordPressのAPI設定

Next.jsからWordPressの記事データを取得するためには、WordPressのREST API（例: http://localhost:8888/wp-json/wp/v2/posts）にアクセスできる必要があります。

しかし、WordPressを初期状態のまま（パーマリンク設定が「基本」）で使っている場合、REST APIのエンドポイントに正しくアクセスできないことがあります。
この場合、パーマリンク設定を「投稿名」に変更することで、APIエンドポイントが正常に動作するようになります。

パーマリンク設定の手順

1. WordPressの管理画面（http://localhost:8888/wp-admin/）にログインします。
2. 左側メニューから「設定」→「パーマリンク設定」を選択します。
3. 「共通設定」の中から「投稿名」を選択し、ページ下部の「変更を保存」ボタンをクリックします。

これで、http://localhost:8888/wp-json/wp/v2/posts などのREST APIエンドポイントにアクセスできるようになります。

2. Next.jsでWordPressの記事一覧を取得・表示する

ここでは、WordPressの初期状態で自動生成される「Hello World!」記事を使って、記事データの取得と表示を行います。

WordPressとNext.jsを連携させるために、まずはWordPressのREST APIから記事データを取得し、それをNext.jsで表示してみましょう。

Step 1: page.tsx をシンプルに作り直す

next ディレクトリ内の app/page.tsxを一度すべて削除し、以下のように書き直します。（Githubのソースはすでに書き直し済みです）

// app/page.tsx
type Post = {
  id: number;
  title: {
    rendered: string;
  };
};

async function getPosts(): Promise<Post[]> {
  const res = await fetch('http://172.40.0.3/wp-json/wp/v2/posts', {
    next: { revalidate: 60 }, // ISR対応（60秒ごとに再検証）
  });

  if (!res.ok) {
    throw new Error('Failed to fetch posts');
  }

  return res.json();
}

export default async function Home() {
  const posts = await getPosts();

  return (
    <main style={{ padding: '2rem' }}>
      <h1>WordPress記事一覧</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title.rendered}</li>
        ))}
      </ul>
    </main>
  );
}

Step 2: なぜ 172.40.0.3 を使うのか？

このIPアドレスは、Docker Composeのネットワーク設定で割り当てられたWordPressコンテナの固定IPアドレスです。

# docker-compose.yml
wp:
  ...
  networks:
    headless-cms-network:
      ipv4_address: 172.40.0.3

3. Next.jsで記事を表示する（一覧・詳細ページについて）

Next.jsでWordPressの記事一覧や詳細ページを作成する方法については、すでに多くの解説記事が存在します。本記事では割愛しますが、基本的には取得した記事データを使って一覧ページや動的ルーティングによる詳細ページを作成できます。
詳しくは公式ドキュメントや他の解説記事をご参照ください。

4. よくあるトラブル・Tips

4-1. WordPressのテーマを有効化する

カスタムテーマ（例：themeディレクトリ内のテーマ）を利用している場合は、WordPress管理画面から該当テーマを有効化してください。
テーマを有効化しないと、functions.phpの設定（例：アイキャッチ画像の有効化）が反映されません。

1. WordPress管理画面（http://localhost:8888/wp-admin/）にログイン
2. 「外観」→「テーマ」から『headless_cms_theme』テーマを有効化

---

4-2. 記事のサムネイル（アイキャッチ画像）の取得方法

WordPressの記事にサムネイル（アイキャッチ画像）を設定し、Next.jsで表示したい場合は、WordPress REST APIのレスポンスにサムネイル情報が含まれるようにする必要があります。

サムネイル情報をAPIで取得する手順

1. WordPressテーマでアイキャッチ画像を有効化する

   functions.php に以下を追加します。（Githubのソースはすでに追加済みです）

   // functions.php
   add_theme_support('post-thumbnails');
   

2. REST APIでサムネイルURLを取得する

   WordPressのREST APIはデフォルトではサムネイルURLを返しません。
   ?_embed パラメータを付けてリクエストすることで、サムネイル情報が含まれるようになります。（Githubのソースはすでに追加済みです）

   例:
   http://172.40.0.3/wp-json/wp/v2/posts?_embed

   Next.js側では、以下のようにサムネイルURLを取得できます。

   const thumbnail =
     post._embedded?.["wp:featuredmedia"]?.[0]?.source_url || "デフォルト画像URL";
   

---

4-3. WP記事詳細の表示方法とエスケープについて

WordPress REST APIから取得した記事本文（content.rendered）やタイトル（title.rendered）は、HTMLタグが含まれた状態で返されます。

Next.jsでの表示時の注意

• エスケープせずにそのまま出力する必要があるため、dangerouslySetInnerHTMLを使います。
• ただし、外部から取得したHTMLをそのまま出力するため、XSSなどのリスクに注意してください。

例:

<div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />

---

4-4. CORSエラーについて

Next.js（フロントエンド）からWordPress（API）にリクエストを送る際、CORS（クロスオリジン）エラーが発生する場合があります。

• Dockerネットワーク内で通信する場合は問題ありませんが、ブラウザから直接APIにアクセスする場合はCORS設定が必要になることがあります。
• 必要に応じて、WordPress側でCORSを許可するプラグインを導入するか、functions.phpでヘッダーを追加してください。

---

4-5. その他のTips

• 日本語記事の文字化け
  MySQLの文字コード設定や、WordPressの言語設定を確認しましょう。

• APIレスポンスのキャッシュ
  Next.jsのISR（Incremental Static Regeneration）やSWRなどを活用するとパフォーマンスが向上します。

---

まとめ

本記事では、Dockerを使ってWordPressとNext.jsを連携させたヘッドレスCMS環境を構築する基本的な流れをご紹介しました。
WordPressで記事を管理しつつ、Next.jsを使って高速かつ柔軟なフロントエンド開発を行える構成は、モダンなWeb制作・開発において非常に有力な選択肢となります。

今回はできるだけシンプルに構築手順と連携の仕組みが理解できることを目的として、以下のような運用上の細かい設定や拡張要素はあえて省略しています。

• MySQLデータベースのSQLダンプによるバージョン管理や移行手順
• WordPressテーマやプラグインの開発フロー
• 本番環境へのデプロイ構成（例：VercelやRenderなどとの統合）
• CI/CDやテスト、パフォーマンス改善のベストプラクティス

今後の発展としては、上記のような実践的なトピックを段階的に取り入れていくことで、より堅牢で保守性の高いHeadless CMSアーキテクチャを構築することができます。

---

今後も、より高度な連携方法や本番運用に向けた工夫についても記事にしていく予定です。
この記事が、Headless CMSやDocker開発に興味のある方の一助となれば幸いです。