플러그인 + JS 패키지Server-rendered Gutenberg, 탈출구

워드 프레스 Gutenberg 에서 Next.js — 1:1문의

NextPress는 WPGraphQL 확장 플러스 Next.js 패키지로 머리없는 응용 프로그램에 가득 찬 Gutenberg fidelity를 제공합니다. theme.json 타이그래피, 레이어링 스타일 시트, 블록 지원 CSS, Interactivity API — 모든 렌더링 서버 측.

$ 6,000 원작곡가는 axistaylor/nextpress-wordpress를 요구합니다

$ 6,000 원npm @axistaylor/nextpress 설치

// NextPress가 무엇인가요?

전체 Gutenberg, 타협 없음.

Theme.json, 자산 의존성, 블록 지원 CSS, Interactivity API – NextPress는 전체 스택을 처리하므로 헤드리스 페이지는 편집기 미리보기를 정확히 일치시킵니다.

서버 렌더링 Gutenberg

Async 서버 구성 요소. Next.js 트리에 있는 워드프레스의 블록 HTML 토지는 클라이언트 수화 세금 없이 요청 시간에.

테마.json fidelity

Palettes, 글꼴 크기, 간격, 유체 타이그래피 — 같은 토큰 편집기 사용, CSS 변수로 헤드리스 페이지를 통해 스레드.

작풍 고립

@scope ([data-rendered]) WP의 리셋 및 블록 스타일을 렌더링 한 영역 내에서 유지하므로 앱 쉘은 터치되지 않습니다.

상호작용 API

Script 모듈 + 가져오기 맵 type="module" Gutenberg 상호 작용 블록 – 손수레 서랍, 네비게이션, 아코디언 모든 작업이 기본적으로.

// 4단계

그것에 철사, 자주 묻는 질문

— 01 / 설치

플러그인 설치

지원하다 templateByUri· globalStylesWPGraphQL 엔드포인트의 자산 브리지 쿼리.

wp plugin install axistaylor-nextpress --activate
# ✓ NextPress 활성화 · GraphQL 확장 등록

— 02 / 프록시

프록시 구성

forward proxied WP Asset URL through Next.js and thread the cart session into 렌더링 된 페이지.

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 / 와이어

철사 배치

머리와 발기 슬롯을 루트 레이아웃으로 드롭하십시오. NextPress는 stylesheets, 스크립트 및 가져오기 맵을 방출합니다.

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 / 렌더링

자주 묻는 질문

내 계정 [...uri] catch-all은 한 라이너가됩니다. NextPress는 템플릿을 해결하고 블록 트리를 fetches, 일치하는 React를 반환합니다.

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

// 적용

WordPress가 렌더링 할 수 있다면, NextPress도 할 수 있습니다.

NextPress는 블록 이름에 대해 걱정하지 않습니다. 블록 트리를 걸어, 동일한 지원 CSS WordPress가 적용되며, 일치하는 React를 방출합니다. 상자에서 주문 구획 일.

theme.json 팔레트GlobalStyles 토큰핵심 구획블록 지원 CSS스크립트 모듈상호작용 API사용자 정의 블록클래식 편집 HTMLreusable 구획템플릿 부품블록 패턴자산 의존성 순서

// WooGraphQL로

WooCommerce 블록 가져 오기 이름 *

NextPress는 WooCommerce를 포함한 Gutenberg 블록을 렌더링합니다. WooGraphQL과 결합 된 헤드리스 세션 스레드는 렌더링 된 블록 컨텍스트로 – 그래서 WooCommerce 제품정보· 이용안내· 내 계정, 그리고 제품 블록은 다음.js 앱과 동일한 세션을 읽습니다. 두 배 로그인 없음, 프록시 해킹 없음.

WC Cart / Checkout / 사용자의 실제 세션에 대한 내 계정 블록 렌더링.
다음 앱과 렌더링 블록 사이에 공유되는 카트 토큰 @woographql/session-utils·
제품 블록, 필터, 미니 카르트 – 같은 WPGraphQL 엔드 포인트, 평행한 REST 표면.
Block-level mutations ( 카트 추가, 쿠폰 적용) WooGraphQL을 통해 라운드 스트립.

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

// proxyByWCR (NextPress Middleware)는 카트 토큰을 전달합니다.
// URI와 일치하는 WordPress에 쿠키, 그래서 WP 렌더링
// 다음 앱과 같은 세션을 읽습니다. WC 카트, 체크 아웃,
// 내 계정 및 제품 블록 모든 사용자에 대한 렌더링
// 실제 카트 — withSession 래퍼가 필요하지 않습니다.
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]}
    />
  )
}

NextPress로 빌드

설치, 구성, 자산 브리징 API, 그리고 블록의 전체 카탈로그 NextPress 이해 — 모두 docs.

문서 읽기

GitHub에서 보기