2026年8月9日

WordPressのNext.jsヘッドレスCMSを構築する方法

カスタマイズ

はじめに

Web開発において、静的サイトジェネレータと動的なコンテンツマネージャーを組み合わせることで、パフォーマンスと柔軟性を同時に獲得できます。WordPressは世界中のウェブサイトで広く使用されているCMSですが、Next.jsのような現代のフロントエンドフレームワークとの統合により、さらなるメリットを得られます。

症状・背景

WordPress上で管理されたコンテンツを利用するが、Webアプリケーション的な要素を追加したい
既存のWordPressサイトに静的生成によるパフォーマンス向上を適用したい
サイトの読み込み速度を高速化し、SEO最適化を図りたい

手順・設定方法

ステップ1: WordPress REST APIを有効にする

# ワードプレス管理画面にログインし、「wp-admin」へ移動します。
# 「wp-admin」で「設定 > 設定」とクリックして、開発者向けのオプションを表示するための「デバッグ」タブを開きます。

# 以下のように設定を変更します。
define('WP_DEBUG', true);

# REST APIのエンドポイントにアクセスできるようにします。
add_filter( 'rest_authentication_checkpoint', '__return_null' );

ステップ2: Next.jsプロジェクトを作成する

# ローカル環境でNext.jsプロジェクトを初期化します。
npx create-next-app@latest my-wp-nextjs-app --typescript

# プロジェクトディレクトリに移動します。
cd my-wp-nextjs-app

# WordPress REST APIからのデータ取得用のAPIを作成します。
npm run build

ステップ3: WordPressとNext.jsを接続する

# Next.jsアプリケーションでWordPress REST APIへのアクセスを設定します。
import axios from 'axios';

// バックエンドサーバーのURLを定義します。
const backendUrl = process.env.BACKEND_URL;

export default function Home({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title.rendered}</h2>
          <p dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
        </article>
      ))}
    </div>
  );
}

export async function getStaticProps() {
  const response = await axios.get(`${backendUrl}/wp-json/wp/v2/posts`);
  return {
    props: { posts: response.data },
  };
}

ステップ4: デプロイとテスト

# GitHub PagesやVercelでNext.jsアプリケーションをデプロイします。
vercel --prod

# ブラウザでデプロイされたURLを開きます。

注意事項

REST APIの認証設定が適切に行われていないと、セキュリティリスクがありますので注意が必要です。
WordPressからNext.jsへデータをフローさせる際は、パフォーマンス最適化のためにキャッシュを活用するなどの工夫が必要です。
データモデルやAPIエンドポイントの変更がある場合は、それぞれのアプリケーションで同期を取るようにしましょう。

まとめ

1. REST APIの設定: WordPressからデータを取得するために必要な設定を行います。

2. Next.jsプロジェクト作成: 新しいNext.jsプロジェクトを作成し、WordPress REST APIとの接続を構築します。

3. API実装: Next.jsアプリケーション内でWordPressからのデータ取得を実装します。

4. デプロイとテスト: テスト環境で確認後、本番環境にデプロイを行います。

Post Views: 1