Plugin + paquete JSGutenberg, sin hatches de escape

Render WordPress Gutenberg en Next.js — 1:1

NextPress es una extensión WPGraphQL más un paquete Next.js que trae plena fidelidad de Gutenberg a tu aplicación sin cabeza. theme.json tipografía, hojas de estilo capas, soportes de bloque CSS, la API de Interactividad — todo hecho lado servidor.

$composer requiere axistaylor/nextpress-wordpress

$npm instalar @axistaylor/nextpress

// qué hace NextPress

Full Gutenberg, No hay compromisos.

Theme.json, dependencias de activos, soportes de bloque CSS, la API de Interactividad — NextPress maneja toda la pila para que tus páginas sin cabeza coincidan con la vista previa del editor exactamente.

Server-rendered Gutenberg

Componente de servidor Async. WordPress bloque de tierras HTML en su árbol Next.js a la hora de solicitud sin impuesto de hidratación cliente.

Theme.json fidelity

Paletas, tamaños de fuentes, espaciamiento, tipografía de fluidos — las mismas fichas que utiliza el editor, roscada a través de su página sin cabeza como variables CSS.

aislamiento estilo

@scope ([data-rendered]) mantiene los estilos de restablecimiento y bloqueo de WP dentro del área renderizada, por lo que su cáscara de aplicación permanece intacta.

Interactividad API

Módulos de script + mapa de importación type="module" Los bloques de interactividad de Gutenberg — cajones de carrito, navegación, acuerdos todos funcionan de manera nativa.

// cuatro pasos

Llámalo, Haz la página.

— 01 / Instalación

Instalar el plugin

Activar templateByUri, globalStyles, y las consultas del puente de activos en su punto final WPGraphQL.

wp plugin install axistaylor-nextpress --activate
# ✓ NextPress activado · GraphQL extensions registered

— 02 / Proxy

Configure el proxy

Forward proxied WP asset URLs through Next.js and thread the cart session into rendered pages.

import { NextRequest, NextResponse } from 'next/server'
import { proxyByWCR, isProxiedRoute } from '@axistaylor/nextpress/proxyByWCR'

export const proxy = async (request: NextRequest) => {
  const { pathname } = request.nextUrl
  if (isProxiedRoute(pathname)) {
    return proxyByWCR(request)
  }
  const headers = new Headers(request.headers)
  headers.set('x-uri', pathname)
  return NextResponse.next({ request: { headers } })
}

export const config = {
  matcher: [
    '/atx/:instance/wp-assets/:path*',
    '/atx/:instance/wp-internal-assets/:path*',
    '/atx/:instance/wp-json/:path*',
    '/atx/:instance/wp',
    '/atx/:instance/wc',
    '/((?!_next|api|favicon.ico|.*\\.).*)',
  ],
}

— 03 / Wire

Limpiar el diseño

Suelte la cabeza y las ranuras de pie en su diseño raíz. NextPress emite las hojas de estilo, scripts y mapa de importación.

import { WPHead, WPFooter } from '@axistaylor/nextpress'
import { fetchAssets, fetchGlobalStyles } from '@/lib/utils'
import { headers } from 'next/headers'

export default async function RootLayout({ children }) {
  const uri = (await headers()).get('x-uri') ?? '/'
  const [{ stylesheets, scripts, importMap }, globalStyles] =
    await Promise.all([fetchAssets(uri), fetchGlobalStyles()])

  return (
    <html>
      <head>
        <WPHead
          scripts={scripts}
          stylesheets={stylesheets}
          globalStyles={globalStyles}
          importMap={importMap}
          pathname={uri}
          criticalHandles={['theme', 'wp-block-library']}
        />
      </head>
      <body>
        {children}
        <WPFooter scripts={scripts} pathname={uri} />
      </body>
    </html>
  )
}

— 04 / Render

Render la página

Tu [...uri] Todo se convierte en una sola línea. NextPress resuelve la plantilla, corta el árbol de bloques, devuelve la reacción correspondiente.

import { Content, nextImageParser } from '@axistaylor/nextpress'
import { fetchContentByUri } from '@/lib/utils'

export default async function CatchAllPage({
  params,
}: {
  params: Promise<{ uri?: string[] }>
}) {
  const { uri } = await params
  const path = '/' + (uri ?? []).join('/')
  const data = await fetchContentByUri(path)
  if (!data) return null

  return (
    <Content
      content={data.content}
      contentCssClasses={data.contentCssClasses}
      parsers={[nextImageParser]}
    />
  )
}

// cobertura

Si WordPress puede renderizarlo, NextPress también puede.

NextPress no le importan los nombres de bloques. Camina el árbol de bloques, aplica los mismos soportes que CSS WordPress, y emite que coinciden React. Los bloques personalizados funcionan fuera de la caja.

Tema.json paletasGlobalStyles tokensbloques básicossoportes de bloque CSSmódulos de scriptInteractividad APIbloques personalizadosHTML clásico-editorbloques reutilizablesPiezas de plantillapatrones de bloqueOrden de dependencia del activo

// con WooGraphQL

Trae los bloques WooCommerce contigo.

NextPress renderiza cualquier bloque Gutenberg, incluyendo los WooCommerce. Junto con WooGraphQL, los hilos de sesión sin cabeza en el contexto del bloque renderizado, por lo que el WooCommerce Carrito, Checkout, Mi cuenta, y los bloques de productos leen la misma sesión que la aplicación Next.js. No hay doble entrada, no hay hacks proxy.

WC Cart / Checkout / My Account bloques render contra la sesión real del usuario.
Token de carro compartido entre la siguiente aplicación y el bloque renderizado vía @woographql/session-utils.
Bloques de producto, filtros, mini-cart — mismo punto final WPGraphQL, ninguna superficie REST paralela.
Mutaciones de nivel de bloque (add to cart, apply coupon) ida y vuelta a través de WooGraphQL.

import { Content, nextImageParser } from '@axistaylor/nextpress'
import { fetchContentByUri } from '@/lib/utils'
import { NextPressLink } from '@/components/NextPressLink'

// proxyByWCR (NextPress middleware) reenvia el cart-token
// cookie a WordPress para que coincida con URIs, por lo que el renderizador WP
// lee la misma sesión que su Siguiente app.
// Mi cuenta, y bloques de producto todos render contra el usuario
// carrito real — no conEnvoltorio de Sesión requerido.
export default async function Page({
  params,
}: {
  params: Promise<{ uri?: string[] }>
}) {
  const { uri } = await params
  const path = '/' + (uri ?? []).join('/')
  const { content, contentCssClasses } = await fetchContentByUri(path)

  return (
    <Content
      content={content}
      contentCssClasses={contentCssClasses}
      instance="shop"
      linksAs={NextPressLink}
      parsers={[nextImageParser]}
    />
  )
}

Construir con NextPres

Instalación, configuración, la API de compensación de activos, y el catálogo completo de bloques NextPress entiende, todo en los documentos.

Lea el doctor

Vista en GitHub