NextPress bridges the gap between WordPress and Next.js, enabling you to render Gutenberg content with pixel-perfect accuracy in your React applications. It handles the complexities of WordPress scripts, styles, block markup, and the Interactivity API so you can focus on building your application.
- 1:1 Content Rendering — Render WordPress Gutenberg blocks exactly as they appear on your WordPress site
- Script Modules & Interactivity API — Full support for
viewScriptModule blocks, ES module import maps, and @wordpress/interactivity
- Script Management — Load WordPress scripts with proper dependency resolution, deferred/async strategies, and synthetic page events for DOMContentLoaded compatibility
- Style Handling — Global styles, scoped block stylesheets, and
core-block-supports layout CSS
- Image Optimization — Optional
nextImageParser converts WordPress images to next/image for WebP/AVIF
- Multi-site Support — Connect to multiple WordPress backends with automatic cross-origin proxy routing
- WordPress Plugin — Companion plugin for GraphQL asset queries, script module registry, and URL transforms
NextPress provides a set of React components and Next.js utilities that work together to fetch and render WordPress content:
- WPHead — Renders all
<head> assets in one component: global styles, stylesheets, import map, and header scripts
- WPFooter — Renders footer scripts with proper load strategies
- Content — Parses and renders WordPress HTML content with customizable parsers (URL rewriting, image optimization, custom element handling)
- AssetUpdater — Keeps assets in sync on client-side navigation and fires synthetic page events
- withWCR / proxyByWCR — Next.js configuration and middleware for secure WordPress API communication
Get started by following the Getting Started guide.