Skip to main content
Demo: Headless WordPress Starter for Next.js 16
Back to Templates
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 Blog
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

Integration flow between WordPress and Next.js

Static generation with ISRPer-page regeneration via WebhookPreview with Draft Mode
1

WordPress

Create & Update

Provides article data via REST API

2

Webhook

Detects Updates

Notifies Next.js when articles are published or updated

3

Next.js

Revalidate

Regenerates target pages with On-Demand ISR

4

Vercel

Deliver

Fast delivery via Edge Network

Draft Mode Support

Preview WordPress draft posts in Next.js. Seamlessly review content before publishing.

Developer Experience

Monorepo support, type-safe, and test-ready.
Use it as your project foundation right away.

Directory Structure

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

Commands

# Start development server
yarn dev:next-wp-template

# Build
yarn build:next-wp-template

# Test
yarn test:next-wp-template

# Lint
yarn lint:next-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

All the features below are already implemented, so you can focus on your business logic.

ISR + On-Demand Revalidation

All pages statically generated

Webhook Integration

Auto-regenerate on WordPress updates

Draft Mode

Draft preview functionality

JSON-LD Structured Data

Auto-generated for SEO

sitemap.xml / robots.txt

Auto-generated

OGP Image Generation

Dynamic OGP support

TypeScript Type Definitions

WP API response types included

Tailwind CSS

Type-safe components

Jest + Playwright + MSW

E2E test environment ready

🔷

TypeScript

Full type coverage for API responses and components

🧪

Test Ready

Unit, integration, and E2E tests preconfigured

📦

Monorepo

Shared packages with yarn workspaces

Blog Preview

Live article data from WordPress, statically generated with ISR.

View All Posts

Note: This article list is retrieved from the WordPress REST API and statically generated with ISR. When you update articles in WordPress, they are automatically regenerated via Webhook.

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
  • Documentation: Japanese
  • Local development template (run locally)
  • Email support
🛒 Buy on GumroadView Details

Contact

Have questions before purchasing or need support? We're here to help.

Feel free to reach out through the form below.

* Response time: Within 3 business days

Go to Contact Form

FAQ

Frequently Asked Questions