Go to Qiita Advent Calendar Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@kinopy513in株式会社アシストエンジニアリング

ヘッドレスCMS開発で応用ウェブ制作

Posted at

WordPress開発の一歩先へ進む

WordPress開発をしていると、もっとUIをリッチにしたい、もっとクリエイティブなデザインにしたい、だけどテーマ制作には限界を感じることがあります。
そんな時に選ばれやすいのが、Next.js と WordPress を組み合わせるヘッドレス構成です。

App Router、Server Components、Route Handlers などが安定し、WordPressのヘッドレス化はかなり扱いやすくなっています。

この記事で触れること

  • ヘッドレスWordPressとは

  • Next.js と組み合わせるメリット

  • REST・GraphQLの違い

  • 開発インフラ構成例

  • App Routerでの実装チュートリアル

1. ヘッドレスWordPressとは

ヘッドレスWordPressとは、
WordPressは記事管理とAPI提供だけ担当し、フロントはNext.jsでレンダリングする構成のことです。

WordPress側

  • 記事管理

  • カテゴリ、タグ、メディア管理

  • API提供（REST / GraphQL）

Next.js側

  • ルーティング

  • UI

  • SSG / ISR / SSR

  • React Server Components による高速描画

WordPressの編集画面をそのまま使えて、フロントは今の React / Next.js の設計で自由に構築できます。

2. Next.js × WordPress が人気の理由

2-1. 高速表示とSEOが圧倒的に強い

Next.js では以下が強力な武器になります。

  • RSC（React Server Components）
    データ取得がサーバ側で行われ、無駄なJSが激減

  • Partial Pre-Rendering (PPR)
    SSG と SSR の混在がより自動化

  • ISR（Incremental Static Regeneration）の最適化

その結果、WordPressテーマよりも早く安定したページを提供できます。

2-2. フロントの自由度が圧倒的に高い

従来のテーマ構造に縛られず、ReactでUIを構築できます。

  • コンポーネント分割

  • フック利用

  • UIライブラリと組み合わせ

  • SPA的インタラクション

WordPressの「テンプレート階層」を脱却したい方には特におすすめです。

2-3. セキュリティが強くなる

WordPressを社内ネットワーク側に置き、APIだけ公開する構成も一般的になりました。
外部から /wp-admin やテーマファイルに直接アクセスされないため、攻撃面のリスクが減ります。

2-4. CMSとしての快適さは残る

記事編集者は WordPress だけ触っていればOK。
CMSとしての使いやすさはそのまま活かせます。

3. デメリット

3-1. Next.js の知識が必要になる

WordPressテーマより難易度は高いです。
React、RSC、App Router 等の理解が求められます。

3-2. WordPressのプレビュー機能をNext.js側で実装する必要あり

Next.js では Route Handlers によるプレビュー実装が定番ですが、
WordPressのプレビュー画面はそのまま使えないので自前で実装する必要があります。
これがなかなか大変です。

3-3. プラグイン依存のテーマ機能が使えない

ショートコード、テンプレート操作、ウィジェットなど
「テーマ向けの機能」は Next.js 側に再実装が必要。

3-4. WPGraphQL など追加プラグインの理解が必要

REST API も使えますが、GraphQL の方が管理しやすい場面も多いです。

4. 開発インフラ構成例

開発しやすい構成は以下です。

  • WordPress（WPGraphQL + ACF + WPGraphQL for Advanced Custom Fields）

  • Next.js（App Router / RSC / Partial Pre-Rendering (PPR)）

  • API は REST API or GraphQL 経由

  • デプロイは Vercel や AWS Amplifyなど

  • WordPress は Lightsail / EC2 / Render / CloudRun / レンタルサーバー など

Next.js がフロントを制御し、
WordPress はAPI サーバとして機能します。

5. RESTとGraphQLの選択

REST API を使うケース

  • 小規模な開発

  • WordPress の標準機能だけで済む

GraphQL（WPGraphQL）を使うケース（おすすめ）

  • カスタム投稿やACFを多用する

  • 取得データを最適化したい

  • フロント側で型生成したい

  • 複雑なメディアやリレーションを扱う

GraphQL の定番セット（WPGraphQL + WPGraphQL for Advanced Custom Fields）を入れると、Next.js 側での開発体験が大きく改善します。

6. Next.js ＋ WordPress（GraphQL）の実装

App Router / RSC 対応

Next.js で実際に記事一覧と詳細ページを簡単に作ってみます。

Step 1. WordPress 側準備

WordPress の管理画面で以下をインストール。

  • WPGraphQL

  • ACF

  • WPGraphQL for Advanced Custom Fields（必要であれば）

GraphQLエンドポイント
https://your-wordpress.com/graphql

ブラウザでアクセスしてレスポンスが返れば準備完了。

Step 2. Next.js プロジェクトを作成

ターミナル
npx create-next-app@latest headless-wp --ts cd headless-wp

App Router を選択しておきます。

Step 3. GraphQL クライアントを追加

RSCと相性の良い graphql-request を採用します。

ターミナル
npm install graphql-request graphql
lib/graphql.ts
import { GraphQLClient } from 'graphql-request';

export const client = new GraphQLClient("https://your-wordpress.com/graphql");

Step 4. 記事一覧（RSC）を取得

app/page.tsx
import { client } from "@/lib/graphql";
import { gql } from "graphql-request";

export default async function Home() { 
	const query = gql`
		query AllPosts { 
			posts { 
				nodes { 
					title
					slug 
				}  
			}  
		} 
	`; 

	const data = await client.request(query);
	const posts = data.posts.nodes;

	return ( 
		<main> 
			<h1>Blog</h1>
			<ul>
				{posts.map((p: any) => (
					<li key={p.slug}> 
						<a href={`/posts/${p.slug}`}>{p.title}</a>
					</li>
				))} 
			</ul> 
		</main>
	);
}

Next.js の RSC では async コンポーネントで直接データ取得可能です。

Step 5. 記事詳細ページ

サニタイズ用のライブラリを先にインストールしておきます。

ターミナル
npm install isomorphic-dompurify
app/posts/[slug]/page.tsx
import { client } from "@/lib/graphql";
import { gql } from "graphql-request";
import DOMPurify from "isomorphic-dompurify";

export default async function PostPage({ params }: any) { 
	const query = gql`
		query Post($slug: ID!) { 
			post(id: $slug, idType: SLUG) { 
				title
	      content
	    }  
	  } 
	`; 

	const data = await client.request(query, { slug: params.slug });
	const post = data.post;

	// サニタイズ
	const sanitizedContent = DOMPurify.sanitize(post.content, {
		USE_PROFILES: { html: true },
	});

	return ( 
		<article> 
			<h1>{post.title}</h1>
			<div dangerouslySetInnerHTML={{  __html: sanitizedContent }} /> 
		</article>
	);
} 

export async function generateStaticParams() {
	const query = gql`
		query Slugs { 
			posts { 
				nodes { 
					slug
				} 
			} 
		}
	`; 

	const data = await client.request(query);

	return data.posts.nodes.map((p: any) => ({ slug: p.slug }));
}

Next.js では generateStaticParams() が SSG の定番です。

7. ヘッドレスWordPressはどんな案件に向いているか

向いている案件

  • 高速表示が求められるブログ/メディア

  • フロントデザインが高度

  • WordPressを裏側に隠したい

  • 既存WordPress資産を活かしつつフロントを刷新したい

向かない案件

  • 小規模サイトで予算がない

  • WPプラグイン依存のフロントが多い

  • 構成を簡単にしたい場合（大がかりな構成を避け簡素に運用したい場合）

8. まとめ

Next.js × WordPressのヘッドレス構成は、以下のメリットがあります。

  • 表示が速い

  • セキュリティ性が高い

  • フロントはReactで自由に構築可能

  • CMSとしての使いやすさを維持

  • デプロイやスケールが柔軟

  • API設計の理解も進む

特に、WPGraphQL と App Router（RSC） が組み合わさった開発体験は、以前のヘッドレス構成よりはるかに快適になっています。

「WordPressは使いたいけど、フロントはもっと自由に作りたい」
そんな方はぜひ選択肢の一つにしてみてください。

採用情報

アシストエンジニアリングでは一緒に働くフロントエンド、バックエンドエンジニアを募集しています！
少しでも興味のある方は、カジュアル面談からでもお気軽にご応募ください！

お問い合わせはこちらから↓
https://official.assisteng.co.jp/contact/

参考

https://www.wpgraphql.com/
https://acf.wpgraphql.com/
https://nextjs.org/docs/app

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?