Plugin + JS PaketServer-gerenderte Gutenberg, keine Fluchtluken

Rendern WordPress Gutenberg in Next.js — 1:

NextPress ist eine WPGraphQL-Erweiterung plus ein Next.js-Paket, das Ihrer Headless-App volle Gutenberg-Treue verleiht. theme.json Typografie, geschichtete Stylesheets, Block-unterstützt CSS, die Interaktivitäts-API – alle serverseitig gerendert.

$Komponist benötigen axistaylor/nextpress-wordpress

$npm install @axistaylor/nextpress

// Was NextPress macht

Full Gutenberg, Keine Kompromisse.

Theme.json, Asset-Abhängigkeiten, Block-unterstützt CSS, die Interaktivitäts-API – NextPress behandelt den gesamten Stapel, so dass Ihre Headless-Seiten genau mit der Editor-Vorschau übereinstimmen.

Server-Rendering Gutenberg

Async Server-Komponente. WordPresss Block HTML landet in Ihrem Next.js-Baum zur Anfragezeit ohne Kundenhydratationssteuer.

Theme.json Treue

Paletten, Schriftgrößen, Abstand, flüssige Typografie – die gleichen Token, die der Editor verwendet, werden als CSS-Variablen durch Ihre Headless-Seite gefädelt.

Stilisolierung

@scope ([data-rendered]) Bewahrt die Reset- und Blockstile von WP im gerenderten Bereich auf, sodass Ihre App-Shell unberührt bleibt.

Interaktivität API

Skriptmodule + Import Map für type="module" Gutenberg Interaktivitätsblöcke – Warenkorbschubladen, Navigation, Akkordeons funktionieren alle nativ.

// vier Schritte

Verdrahten Sie es in, Rendern Sie die Seite.

01 / Installieren

Installieren Sie das Plugin

Aktivate templateByUri, globalStyles, und die Asset-Bridge-Abfragen zu Ihrem WPGraphQL-Endpunkt.

wp plugin install axistaylor-nextpress --activate
# ✓ NextPress aktiviert · GraphQL-Erweiterungen registriert

— 02/Proxy

Den Proxy konfigurieren

Forward proxied WP Asset URLs durch Next.js und Thread der Warenkorbsitzung in gerenderte Seiten.

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 / Draht

Draht das Layout

Lassen Sie die Kopf- und Fußzeilenschlitze in Ihr Root-Layout fallen. NextPress sendet die Stylesheets, Skripte und die Importkarte aus.

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

Rendern der Seite

Ihr [...uri] catch-all wird zu einem One-Liner. NextPress löst die Vorlage auf, holt den Blockbaum ab und gibt den passenden React zurück.

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]}
    />
  )
}

// Abdeckung

Wenn WordPress es machen kann, NextPress kann das auch.

NextPress kümmert sich nicht um Blocknamen. Es läuft den Blockbaum, wendet die gleiche Unterstützung von CSS WordPress an und sendet passendes React aus. Benutzerdefinierte Blöcke arbeiten aus der Box.

theme.json palettesglobalStyles-TokenKernblöckeBlock unterstützt CSSSkriptmoduleInteraktivität APICustom Blocksclassic-editor HTMLwiederverwendbare BlöckeSchabloneBlockmusterAuftrag zur Abhängigkeit von Vermögenswerten

// mit WooGraphQL

Bringen Sie die WooCommerce Blöcke mit dir.

NextPress macht jeden Gutenberg-Block, einschließlich der WooCommerce-Blocks. Gepaart mit WooGraphQL, die Headless Session Threads in den gerenderten Blockkontext – so der WooCommerce Wagen, Kasse, Mein Konto, und Produktblöcke lesen die gleiche Sitzung, die Ihre Next.js-App durchführt. Keine Doppelanmeldung, keine Proxy-Hacks.

WC Cart / Checkout / Meine Kontoblöcke werden gegen die reale Sitzung des Benutzers gerendert.
Cart-Token, das zwischen der nächsten App und dem gerenderten Block geteilt wird @woographql/session-utils.
Produktblöcke, Filter, Minikarren — derselbe WPGraphQL-Endpunkt, keine parallele REST-Oberfläche.
Block-Level-Mutationen (zum Warenkorb hinzufügen, Coupon anwenden) Rundreise durch WooGraphQL.

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

// proxyByWCR (NextPress Middleware) leitet den Cart-Token weiter
// Cookie zu WordPress für passende URIs, so der WP-Renderer
// Lesen Sie die gleiche Sitzung wie Ihre nächste App.
// Mein konto und produktblöcke alle render gegen den nutzer.
// Echter Warenkorb — kein withSession Wrapper erforderlich.
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]}
    />
  )
}

Bauen Sie mit NextPress

Installation, Konfiguration, die Asset-Bridge-API und der vollständige Blockkatalog, den NextPress versteht – alles in den Dokumenten.

Lesen Sie die Docs

Ansicht auf GitHub