ヘッドレスWordPress + Next.js：2026年の実践計画

ヘッドレスとは

ヘッドレス構成では、WordPressは引き続き編集者がコンテンツを作成・管理する場所ですが、公開Webサイトの描画は行いません。別のフロントエンド（ここではNext.js）が、WordPress REST APIまたはWPGraphQLでコンテンツを取得してページを構築します。

メリットは、速度、セキュリティ（WordPressの管理画面を非公開のアドレスに置ける）、デザインの自由度、そして同じコンテンツをWebサイト、アプリ、その他のチャネルに配信できることです。コストは、ホスティングと保守が必要なシステムが2つになることと、通常はWordPressのテーマやプラグインが提供する機能をフロントエンドで作り直す必要があることです。

導入する価値があるとき

• 速度と規模が重要な大規模コンテンツサイトやパブリッシャー。
• 高度にカスタマイズされた、アプリのようなフロントエンドが必要なブランド。
• Webサイト、モバイルアプリ、その他のチャネルでコンテンツを共有する場合。
• すでにReactやNext.jsの開発者がいるチーム。

会社案内サイトや数ページ程度の小規模事業のサイトであれば、適切に構築された従来型のWordPressテーマの方が、通常は安価で同じくらい高速です。

レンダリング：常に新しい静的ページ

ページを静的に生成してCDNから配信すれば、訪問者はすぐにHTMLを受け取れます。サイト全体を再構築する代わりに、オンデマンド再検証を使います。編集者が投稿を公開・更新すると、WordPressの小さなフックがNext.jsの秘密のエンドポイントを呼び出し、影響を受けるページやタグだけを再検証します。コンテンツは数秒で公開され、ページの速度も保たれます。

// app/api/revalidate/route.js — called by WordPress on publish
import { revalidateTag } from 'next/cache';

export async function POST(request) {
  const { secret, tag } = await request.json();
  if (secret !== process.env.REVALIDATE_SECRET) {
    return Response.json({ ok: false }, { status: 401 });
  }
  revalidateTag(tag);
  return Response.json({ ok: true });
}

編集者向けのプレビュー

編集者はプレビューボタンが機能することを期待しています。Next.jsのドラフトモードを使いましょう。WordPressがシークレットと投稿IDを付けてプレビュー用ルートにリンクし、そのルートがドラフトモードを有効にし、ページが認証付きリクエスト（アプリケーションパスワードやトークンなど）で最新のリビジョンを取得します。未公開の投稿、予約投稿、カスタムフィールドを持つページでもプレビューをテストしてください。

ヘッドレス構成でのSEO

• SEOプラグインの項目（タイトル、ディスクリプション、canonical、SNS用画像、構造化データ）をAPIで公開し、Next.jsのメタデータとして出力します。
• サイトマップと robots.txt は、WordPressのコンテンツを使ってフロントエンドで生成します。
• リダイレクトはWordPressで管理してフロントエンドに同期し、編集者が管理を続けられるようにします。
• 移行時はURLを同一に保つか、すべての旧URLをリダイレクトします。

画像、フォーム、検索

WordPressのメディアは、設定でWordPressのメディアドメインを許可したうえで、Next.jsの画像最適化または画像CDN経由で配信します。フォームには送信先が必要です。入力を検証してCRMやメールに転送するNext.jsのルートに送信するか、フォームプラグインのAPIを使います。テーマの検索ページはなくなるため、サイト内検索は通常、専用サービスまたはシンプルなAPIエンドポイントに移します。

あらかじめ想定しておく落とし穴

• ページビルダーはレイアウトをショートコードや独自のマークアップで保存するため、他の環境では描画しにくくなります。Gutenbergブロックやカスタムフィールドを優先してください。
• テーマに依存するメニュー、ウィジェット、プラグインの機能には、API上の代替手段が必要です。
• 重複コンテンツを避けるため、WordPressの管理画面を保護し、公開テーマを無効にします。
• 多言語コンテンツには、APIに対応したプラグインと、Next.jsでの明確なURL戦略が必要です。

着手前のチェックリスト

コンテンツモデル（投稿タイプ、フィールド、ブロック）、プレビューと公開の流れ、リダイレクトとSEO項目の管理場所、フォームと検索の扱い、そしてそれぞれのホスティングと監視の担当者について合意しておきましょう。これらを事前に決めておけば、ヘッドレスWordPressは編集者には使い慣れたツールを、訪問者にはどこでも高速なサイトを提供します。