メインコンテンツへスキップ
Next.js 16 + App Router

Save time building WordPress REST API integration from scratch

Headless WordPress
Starter for Next.js

ISR, Webhook, Draft Mode, and SEO built-in.An engineer-focused template ready to use as your project foundation.

View Demo BlogAbout This Template
Pricing|Documentation|Contact
TypeScriptTailwind CSSWordPress REST APIVercel

Features

Essential features for headless WordPress setup built-in.
Ready to use as your project foundation.

ISR + On-Demand Revalidation

Detect WordPress updates via Webhook and instantly reflect them using Next.js Revalidate API. Combines static generation speed with dynamic updates.

Draft Mode (Preview)

Preview WordPress draft posts in Next.js. Seamless pre-publish review.

SEO Ready

JSON-LD structured data (Article/BreadcrumbList), dynamic OGP image generation, automatic Canonical URL, auto-generated sitemap.xml, robots.txt configured.

Next.js 16 App Router

Uses the latest App Router architecture. Supports Server Components, Streaming, and Parallel Routes.

TypeScript + Type Safety

Type definitions for WordPress REST API responses. Combines editor autocomplete with runtime safety.

Test Ready

Test environment with Jest + Playwright + MSW built-in. From unit tests to E2E.

Architecture

WordPress と Next.js の連携フロー

Next.js は ISR で静的生成Webhook でページ単位再生成Draft Mode でプレビュー
1

WordPress

記事を作成・更新

REST API で記事データを提供

2

Webhook

更新を検知

記事の公開・更新時に Next.js へ通知

3

Next.js

Revalidate

On-Demand ISR で該当ページを再生成

4

Vercel

配信

Edge Network で高速配信

Draft Mode 対応

WordPress の下書き記事も Next.js でプレビュー可能。 公開前の確認がシームレスに行えます。

Pricing

Designed as an investment that pays for itself with a single project

wp-template v1.1

$39(Early Bird)

Regular price $59 (planned)

  • Commercial use allowed
  • Use in multiple projects
  • Client delivery allowed
  • English documentation
  • Email support
🛒 Buy on GumroadView Details

FAQ

Frequently Asked Questions

お問い合わせ

ご購入前のご質問、購入後のサポートは以下よりお問い合わせください。

問い合わせフォームからお気軽にお問い合わせください。

※ 返信目安: 3営業日以内

お問い合わせフォームへ

Blog Preview

WordPress から取得した実際の記事データ。
ISR により静的生成され、Webhook で自動更新されます。

記事がありません。WordPress に記事を追加してください。

View All Posts

Note: この記事一覧は WordPress REST API から取得し、 ISR で静的生成されています。WordPress で記事を更新すると、 Webhook 経由で自動的に再生成されます。

Developer Experience

モノレポ対応、型安全、テスト完備。
このまま案件の土台として使える状態です。

Directory Structure

apps/wp-template/
├── src/
│   ├── app/           # Next.js App Router
│   ├── components/    # React components
│   └── lib/
│       └── wp/        # WordPress API client
├── .env.local         # Environment variables
└── next.config.mjs

Commands

# 開発サーバー起動
yarn dev:wp-template

# ビルド
yarn build:wp-template

# テスト
yarn test:wp-template

# Lint
yarn lint:wp-template

Environment Variables

NEXT_PUBLIC_WORDPRESS_API_URL=https://your-wp.com/wp-json/wp/v2
NEXT_PUBLIC_WORDPRESS_HOST=your-wp.com
WP_AUTH_TOKEN=your-app-password
REVALIDATE_SECRET=your-secret
WEBHOOK_SECRET=your-webhook-secret

What's Already Built

以下の機能はすべて実装済み。あなたはビジネスロジックに集中できます。

ISR + On-Demand Revalidation

全ページ静的生成対応

Webhook 連携

WordPress更新で自動再生成

Draft Mode

下書きプレビュー機能

JSON-LD 構造化データ

SEO向け自動出力

sitemap.xml / robots.txt

自動生成済み

OGP 画像生成

動的OGP対応

TypeScript 型定義

WP APIレスポンス型付き

Tailwind CSS

型安全なコンポーネント

Jest + Playwright + MSW

E2Eテスト環境完備

🔷

TypeScript

WordPress API レスポンスの型定義付き

🧪

Test Ready

Jest + Playwright + MSW で即テスト可能

📦

Monorepo

yarn workspaces で依存関係を一元管理