BLOG

Nuxt3 × WordPressヘッドレス入門｜静的生成から運用までの手順

WordPress の管理画面はそのまま、フロントエンドはNuxt3で高速化――
いわゆるヘッドレスCMS構成が注目されています。
本記事では「Nuxt3＋WordPress REST API」を組み合わせ、
静的サイト生成（SSG）からデプロイ・運用までの流れを解説します。

1. ヘッドレスWordPressとは？

WordPress をコンテンツ管理専用にし、テーマ部分を Nuxt3 などの
フロントエンドフレームワークで置き換える構成を指します。
データ取得は REST API または GraphQL（WPGraphQL）経由で行います。

2. Pros / Cons 比較

項目 ヘッドレス構成 従来テーマ構成
表示速度 SSGで超高速／CDNキャッシュ◎ プラグイン依存で速度ばらつき
開発自由度 Vue3/TypeScript/Lottieなど自由 PHPテンプレートに縛られる
運用コスト ビルド⇔配信でやや手間 WP内で完結・即時公開
編集体験 管理画面変わらず◎ 同上
プラグイン互換 REST非対応プラグインは工夫要 そのまま利用可

3. 導入ステップ

  1. WordPress側
    • パーマリンクを「投稿名」に設定
    • REST APIを有効化（デフォルトON）／WPGraphQLを導入するとより便利
    • CORS・認証対策：本番ドメインのみ許可
  2. Nuxt3プロジェクト作成 
    npx nuxi init wp-headless
    cd wp-headless && npm i
  3. API取得 
    // composables/usePosts.ts
export const usePosts = () => useFetch('https://example.com/wp-json/wp/v2/posts')
  4. SSG設定 
    // nuxt.config.ts
export default defineNuxtConfig({
  nitro: { preset: 'vercel' },
  routeRules: {
    '/posts/**': { static: true, swr: 60 } // 60秒で再検証
  }
})

4. 静的生成 & ISR

  • npm run generate で完全静的書き出し
  • Nitro の swr オプションでISR（Incremental Static Regeneration）
  • Webhook を使い、WP 更新時に Vercel／Netlify で自動再ビルド

5. デプロイ方法

  • Vercel：GitHub 認証→ Deploy；ISRが標準対応
  • Netlify：Build Hook で WP 更新時に再ビルド
  • Cloudflare Pages：高速CDN配信＋Functionsで動的処理

6. 運用TIPS

  • WordPress側でメディア圧縮＋WebPを導入し転送量削減
  • プラグイン追加時は REST エンドポイントを要確認
  • 管理者プレビュー用に /preview/[slug].vue を用意してリアルタイム確認

まとめ

Nuxt3 × WordPress ヘッドレス構成は「速度」と「開発自由度」が大きな武器。
一方、ビルド運用やプラグイン互換の検証が課題です。
本記事を参考に、まずはテスト環境で SSG → デプロイまで試してみてください。

ご相談ください

ヘッドレスCMS導入や Nuxt3 カスタマイズのご依頼は、
山キノコロリ WEB事業部までお気軽にどうぞ！
▶ お問い合わせフォーム

BACK