Plugin + Pacote JSGutenberg renderizado pelo servidor, sem escotilhas de escape

Render WordPress Gutenberg em Next.js — 1:1

NextPress é uma extensão WPGraphQL mais um pacote Next.js que traz fidelidade completa a Gutenberg para seu aplicativo sem cabeça. theme.json tipografia, folhas de estilo em camadas, suportes de bloco CSS, a API de Interatividade — tudo renderizado servidor-lado.

$compositor requer axistaylor/nextpress-wordpress

$npm install @ axistaylor/nextpress

// o que a NextPress faz

Full Gutenberg, Sem compromissos.

Theme.json, dependências de ativos, suportes de bloco CSS, a API de Interatividade — NextPress lida com toda a pilha para que suas páginas sem cabeça correspondam exatamente à visualização do editor.

Gutenberg renderizado no servidor

Componente do servidor de sincronização. WordPress bloco HTML terras em sua árvore Next.js no momento da solicitação sem cliente taxa de hidratação.

Theme.json fidelidade

Paletas, tamanhos de fontes, espaçamento, tipografia de fluidos — os mesmos símbolos que o editor usa, threaded através de sua página sem cabeça como variáveis CSS.

Isolamento de estilo

@scope ([data-rendered]) mantém os estilos de reset e bloqueio do WP dentro da área renderizada, então seu shell do aplicativo permanece intocado.

API de interatividade

Módulos de script + mapa de importação para type="module" Blocos de interatividade de Gutenberg — gavetas de carrinhos, navegação, acordeões todos trabalham nativamente.

// quatro passos

Liga-o. renderize a página.

— 01 / Instalação

Instalar o plug-in

Ativados templateByUri, globalStyles, e as consultas de ponte de ativos em seu endpoint WPGraphQL.

wp plugin install axistaylor-nextpress --activate
# 文 NextPress ativada · Extensões GraphQL registradas

— 02 / Proxy

Configurar o ‘proxy’

Encaminhar URLs de ativos WP proxied através de Next.js e colocar a sessão do carrinho em páginas renderizadas.

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

Ligar a disposição

Baixe os slots de cabeça e rodapé em seu layout de raiz. NextPress emite as folhas de estilo, scripts e mapa de importação.

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

Renderizar a página

Sua [...uri] catch-all torna-se uma linha única. NextPress resolve o modelo, obtém a árvore de blocos, retorna o React correspondente.

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

Se WordPress pode renderizá-lo, NextPress também pode.

NextPress não se importa com nomes de bloco. Ele caminha na árvore de bloco, aplica o mesmo suporta CSS WordPress faria, e emite correspondência React. Blocos personalizados funcionam fora da caixa.

paletas theme.jsonglobalStyles tokensblocos de núcleoBlock-suporta CSSmódulos de scriptAPI de interatividadeblocos personalizadosHTML de edição clássicablocos reutilizáveispeças do modelopadrões de bloqueioordem de dependência de ativos

// com WooGraphQL

Traga os blocos WooCommerce Contigo.

NextPress transforma qualquer bloco Gutenberg, incluindo os WooCommerce. Emparelhado com WooGraphQL, os threads de sessão sem cabeça no contexto de bloco renderizado — assim o WooCommerce Carrinho, Obtenção, Minha Conta, e blocos de produto ler a mesma sessão que seu app Next.js faz. Não há entrada dupla, nem hacks proxy.

WC Cart / Checkout / Minha Conta blocos renderizar contra a sessão real do usuário.
Token de carrinho compartilhado entre o aplicativo Next e o bloco renderizado via @woographql/session-utils.
Blocos de produto, filtros, minicarte — mesmo ponto de avaliação WPGraphQL, sem superfície REST paralela.
Mutações de nível de bloco (adicionar ao carrinho, aplicar cupom) ida e volta através WooGraphQL.

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

// proxyByWCR (NextPress middleware) encaminha a caixa de ferramentas
// cookie para WordPress para correspondência URIs, então o renderizador WP
// lê a mesma sessão que o seu próximo app. WC Cart, Checkout,
// Minha conta, e blocos de produto todos renderizar contra o usuário
// carrinho real — não com embrulho Session necessário.
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]}
    />
  )
}

Compilar com NextPress

Instalação, configuração, a API de ligação de ativos e o catálogo completo de blocos que a NextPress compreende — tudo nos documentos.

Leia os documentos

Ver no GitHub