Plugin + pacchetto JSGutenberg, senza chiavi di fuga

Render WordPress Gutenberg in Next.js — 1:1

NextPress è un’estensione WPGraphQL più un pacchetto Next.js che porta piena fedeltà Gutenberg alla vostra app senza testa. theme.json tipografia, fogli di stile a strati, block-support CSS, l’API di Interattività — tutto reso lato server.

!compositore richiedono assetaylor/nextpress-wordpress

!npm install @axistaylor/nextpress

// che cosa fa NextPress

Full Gutenberg, Nessun compromesso.

Theme.json, dipendenze di asset, block-supports CSS, l’API di Interattività — NextPress gestisce l’intero stack in modo che le pagine senza testa corrispondono esattamente all’anteprima dell’editor.

Gutenberg, proprietario del server

Componente server asincastro. WordPress blocco HTML atterra nel tuo Next.js albero a richiesta tempo senza tassa di idratazione client.

Teme.json fedeltà

Palette, dimensioni del carattere, spaziatura, tipografia fluida — gli stessi gettoni che l’editor utilizza, filettato attraverso la tua pagina senza testa come variabili CSS.

isolamento stile

@scope ([data-rendered]) mantiene gli stili di reset e blocco di WP all’interno dell’area resid, così il guscio dell’app rimane intatto.

API di interattività

Moduli script + mappa di importazione per type="module" Blocchi di interattività di Gutenberg — cassetti del carrello, navigazione, fisarmonica tutti lavorano in nativo.

// quattro passi

Infilalo dentro, rendere la pagina.

— 01 / Installazione

Installare il plugin

Attivazione templateByUri♪ globalStyles, e le domande di asset-bridge sul vostro endpoint WPGraphQL.

wp plugin install axistaylor-nextpress --activate
# ✓ NextPress attivato · Prolunghe GraphQL registrate

— 02 / Proxy

Configurare il proxy

Avanti proxied WP URL di asset attraverso Next.js e filettare la sessione del carrello in pagine rese.

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

Filare il layout

Getta la testa e le fessure di piè di pagina nel tuo layout radice. NextPress emette i fogli di stile, gli script e la mappa di importazione.

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 pagina

Il tuo [...uri] catch-all diventa un one-liner. NextPress risolve il modello, fetches l’albero del blocco, restituisce il React corrispondente.

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

// copertura

Se WordPress può renderlo, NextPress può anche.

NextPress non si preoccupa dei nomi dei blocchi. Cammina l’albero del blocco, applica lo stesso supporto CSS WordPress sarebbe, e emette corrispondenza React. I blocchi personalizzati funzionano fuori dalla scatola.

tavolozze tema.jsonGlobalStyles gettoniblocchi di nucleoblock-supports CSSmoduli di scriptAPI di interattivitàblocchi personalizzaticlassico editor HTMLblocchi riutilizzabiliparti di modellomodelli di bloccoasset-dipendenza ordine

// con WooGraphQL

Portare i blocchi WooCommerce con te.

NextPress rende qualsiasi blocco Gutenberg, compresi quelli WooCommerce. Abbinato a WooGraphQL, i filetti di sessione senza testa nel contesto del blocco reso — così il WooCommerce Carrello♪ Checkout♪ Il mio account, e blocchi di prodotto leggere la stessa sessione che l’app Next.js fa. Niente doppio accesso, niente hack proxy.

WC Cart / Checkout / I blocchi del mio account rendono la sessione reale dell’utente.
Token del carrello condiviso tra l’app Next e il blocco reso via @woographql/session-utils.
Blocchi di prodotto, filtri, mini-cart — stesso endpoint WPGraphQL, nessuna superficie REST parallela.
Mutazioni a livello di blocco (add to cart, applicare coupon) andata e ritorno attraverso WooGraphQL.

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

// proxyByWCR (NextPress middleware) inoltra il cart-token
// cookie a WordPress per URI corrispondenti, quindi il renderer WP
// legge la stessa sessione della tua prossima app. WC Cart, Checkout,
// Il mio account e il prodotto blocca tutti i render contro l'utente
// vero carrello — no conInvolucro di isolamento richiesto.
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]}
    />
  )
}

Costruisci con NextPress

Installazione, configurazione, l’API di asset-bridging, e il catalogo completo di blocchi NextPress comprende – tutto nel doc.

Leggi i documenti

Vista su GitHub