@axistaylor/nextpress
v1.1.0
Published
Render WordPress Gutenberg content 1:1 in Next.js. Automatic script/stylesheet loading, middleware proxy, and multi-WordPress support.
Maintainers
kidunot89Readme
@axistaylor/nextpress
A comprehensive toolkit for rendering WordPress Gutenberg content 1:1 in Next.js applications. Includes automatic script and stylesheet loading, middleware proxy for WordPress APIs, and multi-WordPress instance support.
Features
- 1:1 WordPress Content Rendering - Render Gutenberg blocks exactly as they appear in WordPress
- Automatic Asset Loading - Scripts and stylesheets with dependency resolution
- Middleware Proxy - Seamless WordPress REST API, admin-ajax.php, and WooCommerce integration
- Multi-WordPress Support - Connect to multiple WordPress backends
- Server Components - Full React Server Component support for optimal performance
- TypeScript - Complete type definitions included
Quick Start
1. Install
npm install @axistaylor/nextpress2. Configure Next.js
// next.config.mjs
import { withWCR } from '@axistaylor/nextpress/withWCR';
const nextConfig = {};
export default withWCR(nextConfig, {
wpDomain: 'your-wordpress.com',
wpProtocol: 'https',
frontendDomain: 'localhost:3000',
frontendProtocol: 'http',
});3. Add Middleware
// middleware.ts
import { proxyByWCR } from '@axistaylor/nextpress/proxyByWCR';
import { NextRequest } from 'next/server';
export async function middleware(request: NextRequest) {
return proxyByWCR(request);
}
export const config = {
matcher: [
'/atx/:slug/wp-json/:path*',
'/atx/:slug/wp',
'/atx/:slug/wc',
'/atx/:slug/wp-assets/:path*',
],
};4. Create Layout with Scripts & Styles
// app/(wordpress)/layout.tsx
import { HeadScripts, BodyScripts, Stylesheets } from '@axistaylor/nextpress';
import { headers } from 'next/headers';
import { fetchAssets } from '@/lib/wordpress';
export default async function WordPressLayout({ children }) {
const uri = (await headers()).get('x-uri') || '/';
const { scripts, stylesheets } = await fetchAssets(uri);
return (
<html>
<head>
<Stylesheets stylesheets={stylesheets} pathname={uri} />
<HeadScripts scripts={scripts} pathname={uri} />
</head>
<body>
{children}
<BodyScripts scripts={scripts} pathname={uri} />
</body>
</html>
);
}5. Render Content
// app/(wordpress)/[...uri]/page.tsx
import { Content } from '@axistaylor/nextpress';
import { fetchPage } from '@/lib/wordpress';
export default async function Page({ params }) {
const uri = '/' + (params.uri?.join('/') || '');
const { content } = await fetchPage(uri);
return <Content content={content} />;
}Documentation
For complete documentation, see the docs folder:
- Getting Started
- Content Component
- HeadScripts
- BodyScripts
- Stylesheets
- withWCR Configuration
- proxyByWCR Middleware
- Multi-WordPress Setup
- WordPress Plugin
- Troubleshooting
Requirements
- Next.js 14.2.5+
- React 18.3.1+
- WordPress with WPGraphQL plugin
- NextPress WordPress plugin
Contributing
We welcome contributions! Whether it's bug fixes, new features, or documentation improvements.
- Read the Contributing Guide
- Check out open issues
- Submit a Pull Request
License
MIT