ヘッドレス Web サイトに WordPress と Next.js を使用する方法

現代のウェブサイトには、スピード、柔軟性、そして堅牢なSEO対策が求められます。Next.js ヘッドレスWordPressは 、これら3つの要素すべてを実現します。コンテンツ管理システムとフロントエンドを分離することで、WordPressの使い慣れた編集環境とNext.jsの超高速レンダリング機能という、両方の利点を享受できます。

このガイドでは、アーキテクチャの理解から本番環境対応のヘッドレス サイトの展開まで、すべてを順を追って説明します。.

分離された CMS セットアップを検討している開発者であっても、従来の WordPress サイトを最新化しようとしているチームであっても、このステップバイステップのリソースが役に立ちます。.

TL;DR: 高速でスケーラブルなヘッドレスウェブサイトを構築する

• 柔軟性を高めるために、分離されたセットアップを使用してコンテンツ管理をフロントエンドから分離します。.
• 効率的なデータ配信のために、REST API または GraphQL を介してコンテンツを取得します。.
• 静的生成、サーバー レンダリング、スマート キャッシュによってパフォーマンスが向上します。.
• 最新のホスティング プラットフォームと安全な API に導入して、 速度、スケーラビリティ、保護を実現します。

ヘッドレス WordPress とは何ですか? また、なぜ Next.js と組み合わせるのですか?

このスタックの威力を理解するには、まず「ヘッドレス」アーキテクチャの概念と、これら 2 つの特定のテクノロジが完璧な組み合わせとなる理由を理解する必要があります。.

ヘッドレスWordPress CMSアーキテクチャの定義

従来のWordPress はモノリシックなシステムです。コンテンツの保存、ビジネスロジック、ページのレンダリングを一元的に処理します。訪問者がサイトにアクセスすると、WordPressはデータベースにクエリを実行し、PHPテンプレートを処理し、完全にレンダリングされたHTMLページを配信します。

ヘッドレスWordPressは、このモデルを一新します。ヘッドレスアーキテクチャでは、

• WordPressはバックエンドとしてのみ機能します。 コンテンツ、ユーザー認証、データストレージを管理します。

• フロントエンドは完全に独立しています。Next.js のようなJavaScriptフレームワークが、すべてのレンダリングとユーザーインタラクションを処理します。

• API はこれら 2 つを橋渡しします。WordPress を通じてコン​​テンツを公開し REST API 、Next.js はそのデータを取得してページを構築します。

「ヘッドレス」という用語は、WordPress からフロントエンドのプレゼンテーション層である「ヘッド」を削除することに由来します。.

の インストールは にログインし /wp-admin、投稿もこれまでと同じ方法で作成されます。しかし、訪問者はWordPressに直接アクセスすることはありません。Next.jsのフロントエンドとやり取りするだけです。

バックエンドとフロントエンドを分離するメリット

WordPress のバックエンドをフロントエンド アーキテクチャから分離すると、次のような大きな利点がいくつか得られます。

• パフォーマンスの向上：Next.jsはビルド時にページを静的HTMLとしてプリレンダリングします。リクエストごとにPHP処理が行われないため、最初のバイトまでの時間（TTFB）が大幅に短縮されます。

• フロントエンドの自由度：WordPressに触れることなく、フロントエンドを再構築または再設計できます。CMSの移行なしで、フレームワークの切り替え、レイアウトの再設計、A/Bテストの実行が可能です 。

• セキュリティの向上：WordPressインスタンスをプライベートサーバーまたはサブドメイン上で実行できるため、パブリックインターネットから隠蔽されます。攻撃者は wp-login.phpを見つけることができないため、攻撃の標的にすることはできません。

• スケーラビリティから配信される静的ページは、 CDN トラフィックの急増にも容易に対応できます。WordPressサーバーはAPIリクエストのみを受信し、ページの読み込みは行いません。

• マルチチャネル コンテンツ配信: 同じ WordPress コンテンツ API で、Web サイト、モバイル アプリ、音声アシスタント、キオスクを同時に提供できます。

• 開発者エクスペリエンスの向上: フロントエンド チームは、PHP や WordPress テーマの開発を学習することなく、すでに使い慣れた React および JavaScript ツールを使用して作業します。

Next.js がヘッドレス WordPress のパフォーマンスと SEO に最適な理由

Next.js は、いくつかの理由から、ヘッドレス CMS プロジェクト向けの JavaScript フレームワークの中で際立っています。.

• サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）により、 ページのレンダリングのタイミングと方法を制御できます。ブログをビルド時に静的に生成したり、頻繁に変更される製品ページをサーバー側でレンダリングしたり、サイト全体で両方の戦略を組み合わせたりすることも可能です。

• た組み込みの画像最適化 を介し next/image 、適切なサイズの WebP 形式の画像が遅延読み込みで自動的に提供されます。これにより、 Core Web Vitals スコアが直接的に向上します。

• ファイルベースのルーティング により、動的なルーティングが簡単になります。 [slug].js ページディレクトリに

• API ルートを 使用すると、フォーム処理や Webhook 処理などのサーバー側ロジックを、別のバックエンドなしで Next.js プロジェクトに直接追加できます。

• SEO機能 はネイティブです。Next.jsはサーバー上でHTML全体をレンダリングするため、検索エンジンのクローラーはJavaScriptの実行を待たずにページコンテンツ全体を取得できます。next /head Aメタタグコンポーネントと組み合わせることで、サイトのSEO競争力を維持できます。

WordPressコンテンツ取得におけるREST APIとGraphQLの比較

WordPress は、ヘッドレス セットアップ用に 2 つの API アプローチを提供しています。

WordPress REST APIは WordPressコアに同梱されています。追加のプラグインは不要です。投稿用のエンドポイントは/wp-json/wp/v2/posts、ページ用のエンドポイントは/wp-json/wp/v2/pagesです。fetch () 、シンプルなコンテンツのニーズには十分対応できます。

WPGraphQL は、WordPressにGraphQLエンドポイントを追加するプラグインです。 JSON 不要なフィールドが多数含まれる

これにより、ペイロード サイズが削減され、ネストされたデータの取得が簡素化され (たとえば、投稿とそのカテゴリおよび作成者の詳細を 1 回のリクエストで取得する)、フロントエンド チームが使用できる厳密に型指定されたスキーマが提供されます。.

GraphQLを初めて使用する小規模なプロジェクトやチームであれば、REST APIで十分です。コンテンツ間の関係が複雑な大規模サイトでは、WPGraphQLの方がパフォーマンスが向上し、 開発者 エクスペリエンスも向上します。

WordPressとNext.jsのヘッドレスセットアップを構築するための前提条件

コードを書く前に、強固な基盤を確立し、環境を準備する必要があります。.

必要なツールと環境の設定

ヘッドレス WordPress のセットアップを実行するには、マシンに次のツールがインストールされている必要があります。

• Node.js（v18以降）： nodejs.orgからダウンロードしてください。 node -v ターミナルで

• npm または Yarn: npm は Node.js に同梱されています。Yarn はオプションですが、一部のチームでは推奨されています。

• 稼働中のWordPress環境： ローカル環境（LocalWP、MAMP、または Dockerを）でも、ホスト型インスタンスでも構いません。唯一の要件は、HTTP経由でアクセス可能であることです。

• コードエディタ： VS Codeは、 ESLintとPrettier拡張機能を備えた

• Git: バージョン管理とデプロイメントのワークフロー用。

ローカルでの WordPress 開発の場合、LocalWP は、構成なしで自分のマシン上で WordPress サイトを立ち上げる最も速い方法です。.

必要なWordPressプラグイン（WPGraphQL、REST API）のインストール

WordPress REST APIは、すべての最新のWordPressインストールでデフォルトで有効になっています。 https://yoursite.com/wp-json/wp/v2/posts ブラウザで

WPGraphQLの場合:

• WordPress ダッシュボードにログインします。.

• に移動します プラグイン → 新規追加。

• WPGraphQL を検索し、Jason Bahl によるプラグインをインストールします。.

• 有効化します。.

• ダッシュボードに新しいGraphQLメニュー項目が表示されます。GraphQL → 設定 にアクセスしてエンドポイントを設定してください。

を使用する場合は、ACF 用の WPGraphQL をインストールすることもできます Advanced Custom FieldsGraphQL スキーマを通じてカスタム フィールド データを公開する

GraphQLエンドポイントをテストするには、 「GraphQL」→「GraphiQL IDE」に移動してください。このインタラクティブなプレイグラウンドでは、Next.jsプロジェクトで使用する前にクエリを作成してテストできます。

ヘッドレス配信のためのWordPress API設定

いくつかの WordPress 設定がヘッドレス API 配信に影響します。

• パーマリンク： に移動し [設定] → [パーマリンク 、「プレーン」以外のオプションを選択してください。REST API はプレーンなパーマリンクでは正しく動作しません。「投稿名」（/%postname%/）が最も一般的な選択肢です。

• CORSヘッダー： デフォルトでは、WordPress REST APIのレスポンスは、Next.js開発サーバーからのクロスオリジンリクエストをブロックする場合があります。WordPressテーマの functions.php か、WP CORSなどのプラグインを使用して、Next.jsドメインからのリクエストを許可してください。

• アプリケーションパスワード： 非公開コンテンツまたは下書きコンテンツの場合、WordPress はアプリケーションパスワード（WordPress 5.6 で導入）をサポートしています。ユーザープロフィールでパスワードを生成し、API リクエストに Basic 認証ヘッダーとして含めてください。

• 公開コンテンツの可視性: 表示する投稿がパスワードで保護されたり非公開になったりせず、公開されていることを確認します。

始める前にReactとNext.jsの基礎を理解する

ヘッドレス WordPress 開発 Next.js を使用した

• React の基礎: コンポーネント、props、状態、 useEffect と useState フック。

• Next.js ページ レンダリング メソッド: の違いを理解すること getStaticProps、 getServerSideProps、 getStaticPaths が重要です。

• 非同期JavaScript： を使用して、非同期データ取得コードを記述します async/await Fetch APIの

• JSX 構文: JavaScript 内で HTML のような構文を記述する方法。

Next.js を初めて使用する場合は、このプロジェクトを開始する前に、nextjs.org/learn にある公式の Next.js チュートリアルを数時間学習すると、大きな成果が得られます。.

WordPressとNext.jsを接続するためのステップバイステップガイド

基礎が固まったので、次は バックエンドとフロントエンド。このガイドでは、静的ブログのアーキテクチャで広く使われているNext.js Pages Routerのパラダイムを使用します。

ステップ1: 新しいNext.jsプロジェクトの作成と構成

ターミナルを開き、create-next-app ユーティリティを使用して新しい Next.js アプリケーションを作成します。.

npx create-next-app@latest my-headless-site cd my-headless-site

セットアップウィザードでは、TypeScript、ESLint、Tailwind CSS、App Router のいずれを使用するか尋ねられます。このガイドでは、既存のチュートリアルやプラグインとの互換性を最大限に高めるため、Pages Router を選択してください。大規模なプロジェクトには TypeScript をお勧めします。.

次に、 .env.local WordPress URL を保存するために、プロジェクト ルートに

NEXT_PUBLIC_WORDPRESS_API_URL=https://your-wordpress-site.com/wp-json/wp/v2 WORDPRESS_GRAPHQL_ENDPOINT=https://your-wordpress-site.com/graphql

このファイルをバージョン管理にコミットしないでください。.gitignore を .env.local に。

ステップ2: REST APIとgetStaticPropsを使用してWordPressデータを取得する

にファイルを作成します pages/blog/index.js。このページには、WordPress REST API から取得したすべてのブログ投稿がリストされます。

エクスポートデフォルト関数BlogIndex({ posts }) { return (<ul> {posts.map((post) => (<li key={post.id}> <a href={`/blog/${post.slug}`}>{投稿タイトルがレンダリングされました}</a></li> ))}</ul> ); } エクスポート async function getStaticProps() { const res = await fetch( `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?_embed&per_page=100` ); const posts = await res.json(); return { props: { posts }, revalidate: 60, }; }

getStaticPropsは サーバービルド時に実行されます。WordPressから投稿を取得し、コンポーネントにpropsとして渡します。 この revalidate: 60は 、高度なセクションで説明する増分静的再生成を有効にします。

ステップ3: ApolloまたはGraphQLクライアントでWPGraphQLを使用する

よりスケーラブルなアプローチには、WPGraphQL を使用してください。まず、Next.js プロジェクトに軽量な GraphQL クライアントをインストールします。.

npm インストール @apollo/client graphql

にユーティリティ ファイルを作成します lib/apolloClient.js。

"@apollo/client" から { ApolloClient、InMemoryCache } をインポートします。const client = new ApolloClient({ uri: process.env.WORDPRESS_GRAPHQL_ENDPOINT、cache: new InMemoryCache()、}); デフォルトのクライアントをエクスポートします。

で GraphQL を使用して WordPress の投稿をクエリします getStaticProps。

import client from "../../lib/apolloClient"; import { gql } from "@apollo/client"; const GET_POSTS = gql` query GetPosts { posts { nodes { id title slug date excerpt featuredImage { node { sourceUrl altText } } } } } `; export async function getStaticProps() { const { data } = await client.query({ query: GET_POSTS }); return { props: { posts: data.posts.nodes }, revalidate: 60, }; }

このアプローチでは、フロントエンドが使用するフィールドのみを取得し、API 応答をスリムに保ちます。.

ステップ4: ブログページの動的ルートと静的生成

ファイルを作成してください [slug].js 内に pages/posts/ ディレクトリ

使用して getStaticPaths を Next.js に構築する URL を指示し、 getStaticProps を 使用して各 URL の特定のコンテンツを取得します。

エクスポート async function getStaticPaths() { const res = await fetch( `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?per_page=100` ); const posts = await res.json(); const paths = posts.map((post) => ({ params: { slug: post.slug }, })); return { paths, fallback: "blocking" }; } エクスポート async function getStaticProps({ params }) { const res = await fetch( `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?slug=${params.slug}&_embed` ); const posts = await res.json(); if (!posts.length) { return { notFound: true }; } 戻り値: { 投稿: posts[0] }, 再検証: 60, }; }

getStaticPaths は Next.js に対してどのスラッグをプリレンダリングするかを指示します。fallback : "blocking" 、初期ビルドに含まれていないスラッグは最初の要求時にサーバーでレンダリングされ、その後静的ページとしてキャッシュされます。

ステップ5: 投稿コンテンツ、画像、カスタムフィールドの処理

WordPressは 投稿本文コンテンツを 生のHTMLとして保存します。Reactの dangerouslySetInnerHTML。

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

注目の画像については、 _embed クエリ パラメータを使用します。画像 URL には、 post._embedded['wp:featuredmedia'][0].source_url を。

Next.jsの Image 自動最適化のために、

「next/image」から画像をインポートします。 <Image src={post._embedded["wp:featuredmedia"][0].source_url} alt={post.title.rendered} width={1200} height={630} />

Advanced Custom Fields を使用する場合は、WPGraphQL for ACF プラグインを有効にしてください。カスタムフィールドのデータは GraphQL スキーマに表示され、標準の投稿データと一緒にクエリできるようになります。.

ヘッドレスWordPressとNext.jsの高度なテクニック

基本が機能するようになったら、高度な機能を実装して、サイトをエンタープライズ グレードのアプリケーションのようにすることができます。.

増分静的再生成（ISR）による最適化

ISRを使用すると、サイト全体を再構築することなく、デプロイ後に静的に生成されたページを更新できます。設定方法は、使用しているNext.jsルーターによって異なりますが、この2つを混同するとバグの原因となることがよくあります。.

ページ ルーター ISR (時間ベース)

追加します 再検証 値 (秒単位) を getStaticProps の 。

return { props: { post }, revalidate: 300, // 5 分ごとに再生成する };

再検証期間の終了後にユーザーがページにアクセスすると、Next.js はキャッシュされたページをバックグラウンドで再生成しながら、直ちに提供します。次の訪問者は最新のバージョンを受け取ります。.

ページルータISR（オンデマンド）

WordPress の公開または更新イベントによってトリガーされるオンデマンドの再検証を行うには、 pages/api/revalidate.js。WordPress は Webhook 経由でこのルートを呼び出します。

デフォルトの非同期関数ハンドラーをエクスポートします(req, res) { if (req.query.secret !== process.env.REVALIDATION_SECRET) { return res.status(401).json({ message: "無効なトークン" }); } const slug = req.query.slug; try { await res.revalidate(`/blog/${slug}`); return res.json({ revalidated: true }); } catch (err) { return res.status(500).send("再検証エラー"); } }

res.revalidate() は適切な Pages Router メソッドです。時間ベースのウィンドウの期限が切れるのを待たずに、特定のパスの即時バックグラウンド再生成をトリガーします。

アプリルーターISR

を使用している場合はapp/ 、構文が異なります。時間ベースの再検証は、ルートセグメント設定のエクスポートとして設定します。

// app/blog/[slug]/page.js エクスポート const revalidate = 300;

App Router でのオンデマンド再検証では、 revalidatePath() または revalidateTag()からインポートされた next/cacheAPI ルート内ではなく、サーバーアクションまたはルートハンドラー内で、

// app/api/revalidate/route.js (App Router ルート ハンドラー) import { revalidatePath } from "next/cache"; import { NextResponse } from "next/server"; export async function POST(request) { const { slug, secret } = await request.json(); if (secret !== process.env.REVALIDATION_SECRET) { return NextResponse.json({ message: "Invalid token" }, { status: 401 }); } revalidatePath(`/blog/${slug}`); return NextResponse.json({ revalidated: true }); }

重要な違い： res.revalidate() は Pages Router に属します。revalidatePath () と revalidateTag() は App Router に属します。Pag​​es Router プロジェクト内で App Router のメソッドを使用したり、その逆を行ったりすると、サイレントエラーまたは実行時エラーが発生します。実際に使用するルーターに合わせてメソッドを選択してください。

このガイドの手順説明では、ページルーターを全面的に使用しています。今後アプリルーターに移行する場合は、すべてのISRロジックを更新し、 revalidatePath() ください。

下書きコンテンツにプレビューモードを追加する

プレビューモードを使用すると、編集者は公開前にNext.jsフロントエンドでWordPressのドラフトコンテンツを確認できます。2つのAPIルートを設定します。

• /api/preview: プレビュー モードを有効にし、投稿にリダイレクトします。
• /api/exit-preview: プレビュー モードを無効にします。

WordPress テーマまたはプラグインで、 プレビュー URL 設定 (WPGraphQL JWT 認証を使用している場合) を https://your-nextjs-site.com/api/preview?secret=YOUR_SECRET&slug={slug}。

で getStaticProps、プレビュー モードを確認し、ドラフト コンテンツを取得します。

エクスポート async function getStaticProps({ params, preview, previewData }) { const authHeader = preview ? { Authorization: `Bearer ${previewData.token}` } : {}; const res = await fetch( `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?slug=${params.slug}&status=draft`, { headers: authHeader } ); // ... }

Next.js でサイトマップと SEO メタデータを作成する

をインストールします next-sitemap 自動サイトマップ生成のために

npm インストール next-sitemap

を作成し next-sitemap.config.js 、ビルド時に取得されるすべての WordPress 投稿スラッグを含めるように設定します。package.json next-sitemap 、ビルド後のスクリプトとして で。

ページごとの SEO メタデータの場合は、 next/head コンポーネントを使用するか、App Router を使用している場合は組み込みのメタデータ API を使用します。

"next/head"からHeadをインポートします。<Head><title> {post.title.rendered} | マイブログ</title><meta name="description" content="{投稿抜粋レンダリング}" /><meta property="og:title" content="{投稿タイトルがレンダリングされました}" /><meta property="og:image" content={featuredImageUrl} /></Head>

WordPressでRankMathプラグインを使用し、Add WPGraphQL SEOプラグインを使ってそのメタデータをWPGraphQL経由で公開します。これにより、エディターはWordPressからタイトルと説明を制御でき、Next.jsがそれらを取得してレンダリングします。.

続きを読む: WordPressをヘッドレスCMSとして使う

クライアント側フェッチのためのキャッシュ戦略と SWR

すべてのコンテンツを静的に生成する必要はありません。ユーザー固有のデータ、コメント、リアルタイム在庫などは、クライアント側での取得が効果的です。Vercel swr の

npm インストール swr

import useSWR from "swr"; const fetcher = (url) => fetch(url).then((r) => r.json()); function Comments({ postId }) { const { data, error } = useSWR( `/wp-json/wp/v2/comments?post=${postId}`, fetcher); if (error) return<p>コメントを読み込めませんでした。</p> ; if (!data) を返す<p>読み込み中...</p> ; 戻る<ul>{data.map((c) =><li key={c.id}> {c.content.rendered}</li> )}</ul> ; }

SWRはキャッシュ、再検証、重複排除を自動的に処理します。SWRは「stale-while-revalidate」戦略を採用しており、キャッシュされたデータを即座に返し、その後バックグラウンドで自動的に新しいデータを取得します。.

Next.js を使用した WordPress のデプロイメント、パフォーマンス、セキュリティのベストプラクティス

Next.js のフロントエンドと WordPress のバックエンドを別々のサービスとしてデプロイします。この分離は、ヘッドレスモデルの大きなメリットの一つです。.

Next.js のデプロイは 、Next.js チームが構築したプラットフォームである Vercel 上で最適に機能します。Vercel は、ISR、 エッジキャッシュ、イメージ最適化、環境変数管理を標準で処理します。

NetlifyとAWS Amplifyは優れた代替手段です。セルフホスト型のデプロイメントの場合は、 `npm run build && npm start`を Nginxリバースプロキシの背後

WordPressのデプロイメントは 上で実行できますWP Engine、 Kinsta、 SiteGround。WordPressはAPIレスポンス（ページビューではない）のみを処理するため、小規模なホスティングでもかなりのトラフィックを処理できます。

セキュリティ強化 ヘッドレス WordPress の

• などの非公開サブドメインに移動します cms.yourdomain.com。
• XML-RPCを無効にする（add_filter('xmlrpc_enabled', '__return_false');）。
• を使用します Web アプリケーション ファイアウォール (WAF) Cloudflare などの
• WordPress REST API を、機密エンドポイントの認証されたリクエストに制限します。.
• WordPress のコア、テーマ、プラグインを最新の状態に保ってください。.
• API 認証には強力なアプリケーション パスワードを使用します。.

パフォーマンス最適化 チェックリスト:

• Next.js 静的アセットの CDN 配信を有効にします。.
• 使用すると next/image を 、 レスポンシブなサイズが生成され 、WebP が自動的に提供されます。
• 可能な限りコンポーネントをサーバー側でレンダリングすることで、クライアント側の JavaScript を最小限に抑えます。.
• WordPress API 応答に適切な HTTP キャッシュ ヘッダーを設定します。.
• WordPress オブジェクト キャッシュ (Redis または Memcached) を使用して、API の背後にあるデータベース クエリを高速化します。

Next.js ヘッドレス セットアップを使用した WordPress のよくある落とし穴のトラブルシューティング

ヘッドレス環境への移行はやりがいのあるものですが、学習曲線も存在します。ここでは、最も一般的な障害とその解決方法をご紹介します。

• CORSエラー 開発中の ブラウザは localhost:3000 WordPressドメインへのクロスオリジンリクエストをブロックしています。functions.php経由でWordPressにCORSヘッダーを追加する か 、WP CORSプラグインを使用してください。開発環境と本番環境の両方のNext.jsドメインでオリジンを許可してください。

• パーマリンクが404エラーを返す場合： REST APIでは、プレーンテキスト以外のパーマリンクが必要です。 設定→パーマリンク 、何も変更しなくても、プレーンテキスト以外のオプションを保存してください。これにより、書き換えルールがリセットされます。

• Next.js によって WordPress の画像がブロックされています: Next.js はセキュリティ上の理由から、外部の画像ドメインへのアクセスを制限しています。WordPress ドメインを next.config.js。

module.exports = { images: { domains: ["your-wordpress-site.com"], }, };

• レンダリングされたコンテンツ内のHTMLエンティティ： WordPress REST APIは、 &。小さなユーティリティを使用してデコードするか、 html-entitiesを 。

• APIリクエストが多すぎるため、ビルドが失敗しています。 投稿数が数千件ある場合、 getStaticPaths を使用してリクエストをページ分割する か および per_page 、 フォールバックとして「blocking」 、最新の投稿のみを事前にレンダリングしてください。

• プラグイン更新後のGraphQLスキーマエラー： プラグインを追加または削除すると、WPGraphQLスキーマが変更されます。WordPressプラグインの変更後は、Apolloクライアントキャッシュを再生成するか、ローカルスキーマスナップショットをクリアしてください。

• 本番環境で下書き投稿が表示される場合： 使用する場合は status=any 開発中のAPIクエリで status=publishようにしてください。環境固有のAPIパラメータを使用することで、下書き投稿が公開されないようにすることができます。

結論

WordPress を Next.js と併用すると、ほぼすべての指標で従来の WordPress を上回る、スケーラブルで SEO に適したヘッドレス アーキテクチャが実現します。.

コンテンツ チームは使い慣れた WordPress エディターを維持し、開発チームは最新の React ツールを使用して構築します。.

セットアップは、 ヘッドレス CMS、データ レイヤーとしての REST API または WPGraphQL、すべてのフロントエンド レンダリングとパフォーマンスの最適化を処理する Next.js という 3 つのコンポーネントに依存します。

REST APIから始め、複雑さが増すにつれてWPGraphQLを導入し、サイトの成熟に合わせてISR、プレビューモード、オンデマンドの再検証を段階的に導入します。Next.jsフロントエンドをVercelに、WordPressを専用のPHPホストにデプロイすることで、クリーンで本番環境対応の分離を実現します。.

この組み合わせはもはや実験的なものではなく、主要なパブリッシングプラットフォーム、eコマースサイト、エンタープライズアプリケーションで利用されています。ツールは成熟しており、コミュニティは活発で、パフォーマンスの向上は目覚ましいものがあります。今こそ構築の好機です。.

ヘッドレスサイト向け WordPress と Next.js に関する FAQ