Plugin + paquet JSGutenberg rendu serveur, pas de trappes d’évacuation

Render WordPress Gutenberg dans Next.js — 1:1

NextPress est une extension WPGraphQL plus un paquet Next.js qui apporte la fidélité complète Gutenberg à votre application sans tête. theme.json typographie, feuilles de style superposées, supports de blocs CSS, l’API Interactivité, toutes rendues côté serveur.

$compositeur requirement axistaylor/nextpress-wordpress

$npm installer @axistaylor/nextpress

// Ce que fait NextPress

Plein Gutenberg, Pas de compromis.

Theme.json, les dépendances de l’actif, le support de bloc CSS, l’API Interactivité — NextPress gère toute la pile afin que vos pages sans tête correspondent exactement à l’aperçu de l’éditeur.

Serveur rendu Gutenberg

Composant serveur Async. WordPresss bloque HTML atterrit dans votre arbre Next.js à temps de demande sans taxe d’hydratation client.

Thème.json fidélité

Palettes, tailles de police, espacement, typographie fluide — les mêmes jetons que l’éditeur utilise, threaded à travers votre page sans tête comme variables CSS.

Isolation du style

@scope ([data-rendered]) garde les styles de réinitialisation et de blocage de WP dans la zone rendue, de sorte que votre shell d’application reste intact.

API Interactivité

Modules Script + carte d’importation pour type="module" Les blocs d’interactivité de Gutenberg — les tiroirs, la navigation, les accordéons fonctionnent tous nativement.

// quatre étapes

Faites-le entrer. rendre la page.

— 01 / Installation

Installez le plugin

Active templateByUri, globalStyles, et les requêtes asset-bridge sur votre terminal WPGraphQL.

wp plugin install axistaylor-nextpress --activate
# ✓ NextPress activé · Extensions GraphQL enregistrées

— 02 / Proxy

Configurer le proxy

Transférer les URL d’actifs WP proxiés par Next.js et thread la session du panier dans les pages rendues.

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

Filez la disposition

Baissez les fentes de la tête et du pied de page dans votre disposition racine. NextPress émet les feuilles de style, les scripts et la carte d’importation.

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 / Rendez-vous

Renvoyez la page

Votre [...uri] Catch-all devient un liner unique. NextPress résout le modèle, récupère l’arborescence des blocs, retourne le React correspondant.

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

// Couverture

Si WordPress peut le rendre, NextPress peut aussi.

NextPress ne se soucie pas des noms de blocs. Il marche sur l’arborescence de blocs, applique les mêmes supports que CSS WordPress et émet des React correspondants. Les blocs personnalisés fonctionnent hors de la boîte.

palettes theme.jsonglobalStyles jetonsblocs de cœursoutien de bloc CSSmodules de scriptAPI Interactivitéblocs personnalisésédition classique HTMLblocs réutilisablespièces du modèlemodèles de blocsordre de dépendance des actifs

// avec WooGraphQL

Apportez les blocs WooCommerce avec vous.

NextPress rend n’importe quel bloc de Gutenberg, y compris ceux de WooCommerce. Jumelé avec WooGraphQL, les fils de session sans tête dans le contexte de bloc rendu — donc le WooCommerce Panier, Départ, Mon dossier, et les blocs de produits lisent la même session que l’application Next.js. Pas de double signature, pas de hacks mandataires.

WC Cart / Checkout / Mon Compte bloque rendu contre la session réelle de l’utilisateur.
Jeton de panier partagé entre l’application suivante et le bloc rendu via @woographql/session-utils.
Blocs de produits, filtres, mini-cart — même paramètre WPGraphQL, pas de surface parallèle REST.
Mutations de niveau bloc (ajouter au panier, appliquer un coupon) aller-retour à travers WooGraphQL.

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

// proxyByWCR (NextPress middleware) avance le jeton-cart
// cookie vers WordPress pour les URI correspondants, donc le rendueur WP
// lit la même session que votre application suivante.
// Mon Compte, et les blocs de produits tous rendus contre l'utilisateur
// panier réel — pas d'emballage avecSession requis.
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]}
    />
  )
}

Construire avec NextPress

Installation, configuration, API de débragage des actifs, et le catalogue complet des blocs NextPress comprend — tout dans les docs.

Lire les documents

Vue sur GitHub