WordPressをヘッドレスCMSとして使い、フロントエンドをNext.jsで構築するアーキテクチャが注目されています。コンテンツ管理はWordPressの使いやすい管理画面で、表示はモダンなReactアプリで、という両方の良いところを取る手法です。
WordPress REST APIの基本
WordPress 4.7以降、REST APIが標準搭載されています。/wp-json/wp/v2/ 以下のエンドポイントで投稿・ページ・カテゴリなどのデータをJSON形式で取得できます。
# 投稿一覧を取得
curl https://your-site.com/wp-json/wp/v2/posts
# 特定の投稿を取得
curl https://your-site.com/wp-json/wp/v2/posts/123
# カテゴリ一覧
curl https://your-site.com/wp-json/wp/v2/categories
# 検索
curl "https://your-site.com/wp-json/wp/v2/posts?search=React"
# ページネーション
curl "https://your-site.com/wp-json/wp/v2/posts?per_page=10&page=2"Next.jsプロジェクトのセットアップ
npx create-next-app@latest wp-frontend --typescript --app
cd wp-frontendWordPress APIクライアント
// lib/wordpress.ts
const API_URL = process.env.WORDPRESS_API_URL || "https://your-site.com/wp-json/wp/v2";
export interface WPPost {
id: number;
slug: string;
title: { rendered: string };
content: { rendered: string };
excerpt: { rendered: string };
date: string;
categories: number[];
_embedded?: {
"wp:featuredmedia"?: Array<{ source_url: string }>;
};
}
export async function getPosts(page = 1, perPage = 10): Promise<WPPost[]> {
const res = await fetch(
`${API_URL}/posts?_embed&per_page=${perPage}&page=${page}`,
{ next: { revalidate: 3600 } } // ISR: 1時間キャッシュ
);
if (!res.ok) throw new Error("Failed to fetch posts");
return res.json();
}
export async function getPostBySlug(slug: string): Promise<WPPost | null> {
const res = await fetch(
`${API_URL}/posts?_embed&slug=${slug}`,
{ next: { revalidate: 3600 } }
);
const posts = await res.json();
return posts[0] || null;
}
export async function getCategories() {
const res = await fetch(`${API_URL}/categories`);
return res.json();
}投稿一覧ページ
// app/page.tsx
import { getPosts } from "@/lib/wordpress";
import Link from "next/link";
export default async function Home() {
const posts = await getPosts();
return (
<main>
<h1>ブログ</h1>
{posts.map((post) => (
<article key={post.id}>
<Link href={`/posts/${post.slug}`}>
<h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
</Link>
<div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
<time>{new Date(post.date).toLocaleDateString("ja-JP")}</time>
</article>
))}
</main>
);
}投稿詳細ページ
// app/posts/[slug]/page.tsx
import { getPostBySlug, getPosts } from "@/lib/wordpress";
import { notFound } from "next/navigation";
export async function generateStaticParams() {
const posts = await getPosts(1, 100);
return posts.map((post) => ({ slug: post.slug }));
}
export default async function PostPage({ params }: { params: { slug: string } }) {
const post = await getPostBySlug(params.slug);
if (!post) notFound();
return (
<article>
<h1 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
<time>{new Date(post.date).toLocaleDateString("ja-JP")}</time>
<div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
</article>
);
}カスタムエンドポイントの追加
functions.phpでカスタムREST APIエンドポイントを追加できます。人気記事ランキングや関連記事など、標準APIにない機能を実装する場合に使います。
// functions.php
add_action("rest_api_init", function() {
register_rest_route("custom/v1", "/popular", [
"methods" => "GET",
"callback" => function() {
$posts = get_posts([
"meta_key" => "post_views",
"orderby" => "meta_value_num",
"order" => "DESC",
"numberposts" => 5,
]);
return array_map(function($p) {
return [
"id" => $p->ID,
"title" => $p->post_title,
"slug" => $p->post_name,
"views" => get_post_meta($p->ID, "post_views", true),
];
}, $posts);
},
"permission_callback" => "__return_true",
]);
});CORS設定
ヘッドレス構成ではフロントエンドとWordPressが別ドメインになるため、CORS設定が必要です。
// functions.php
add_action("rest_api_init", function() {
remove_filter("rest_pre_serve_request", "rest_send_cors_headers");
add_filter("rest_pre_serve_request", function($value) {
header("Access-Control-Allow-Origin: https://your-frontend.com");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
return $value;
});
});まとめ
WordPressのREST APIとNext.jsを組み合わせることで、編集者にはWordPressの使いやすいUIを、ユーザーにはReactベースの高速な表示体験を提供できます。ISRを使えばビルド不要で最新コンテンツが反映される、最強のブログ基盤が構築できます。