プラグイン + JS パッケージサーバーレンダーグテンベルク、エスケープハッチなし

Render WordPress Gutenberg で Next.js — 1:1の

NextPressは、あなたのヘッドレスアプリにフルGutenbergの忠実性をもたらすWPGraphQL拡張とNext.jsパッケージです。 theme.json typography、レイヤーされたスタイルシート、ブロックサポートCSS、Interactive API —すべてのレンダリングされたサーバーサイド。

ドルaxistaylor/nextpress-wordpress が必要です

ドルnpm インストール @axistaylor/nextpress

// NextPressが何をしているのか

フルグテンベルク, 妥協しない。

Theme.json、アセット依存関係、ブロックサポートCSS、インターアクティブAPI — NextPressはスタック全体を処理しますので、ヘッドレスページはエディタのプレビューに正確にマッチします。

サーバーレンダリンググテンベルク

Async サーバーコンポーネント。 WordPress のブロック HTML は、クライアントの水和税なしでリクエスト時に Next.js ツリーに埋め込まれます。

テーマ.json 忠実度

パレット、フォントサイズ、間隔、流体タイポグラフィ — エディタが使用するトークンは、ヘッドレスページをCSS変数としてスレッド化します。

スタイル分離

@scope ([data-rendered]) WPのリセットを保ち、レンダリングされた領域内のスタイルをブロックします。そのため、アプリシェルは非接触を維持します。

インターアクティブAPI

スクリプトモジュール+インポートマップ type="module" グテンベルクの対話ブロック — カートドローダ、ナビゲーション、アコーディオンはすべてネイティブで動作します。

// 4つのステップ

ワイヤーで、ページをレンダリングします。

— 01 / インストール

プラグインをインストールする

アクティビティ templateByUri, globalStylesWPGraphQLエンドポイントのアセット・ブリッジ・クエリ

wp plugin install axistaylor-nextpress --activate
# ✓ NextPress アクティブ化・GraphQL 拡張登録

— 02 / プロキシ

プロキシの設定

Next.js を介してプロキシされた WP アセット URL を転送し、カートセッションをレンダリングされたページにスレッドします。

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はスタイルシート、スクリプト、およびインポートマップを出力します。

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] キャッチオールはワンライナーになります。 NextPressはテンプレートを解決し、ブロックツリーをフェッチし、一致する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はブロック名を気にしません。ブロックツリーを歩くと、同じサポートCSS WordPressが対応し、一致するReactを生成します。カスタムブロックは箱から動作します。

theme.jsonパレットGlobalStylesトークンコアブロックブロックサポートCSSスクリプトモジュールインターアクティブAPIカスタムブロック古典編集者 HTML再使用可能なブロックテンプレートパーツブロックパターン資産依存性注文

// と WooGraphQL

WooCommerceブロックを持参お問い合わせ

NextPressは、WooCommerceのブロックを含む任意のGutenbergブロックをレンダーします。 WooGraphQL でペアリング, ヘッドレスセッションはレンダリングされたブロックコンテキストにスレッド — WooCommerce カートに入れる, チェックアウト, 私のアカウントと製品ブロックは、Next.js アプリが同じセッションを読み込みます。二重サインインなし、プロキシハックなし。

WCカート/チェックアウト/マイアカウントブロックは、ユーザーの実際のセッションに対してレンダリングされます。
次のアプリとレンダリングされたブロック間で共有されるカートトークン @woographql/session-utilsお問い合わせ
製品ブロック、フィルタ、ミニカート — WPGraphQL エンドポイント、並列 REST 表面はありません。
ブロックレベルの変異(カートに追加、クーポンを適用)WooGraphQLによる往復。

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

// proxyByWCR (NextPressミドルウェア)は、カートトークンを転送します
// URIに一致するようにWordPressにクッキー、WPレンダラー
// 次のアプリと同じセッションを読みます。 WCカート、チェックアウト、
// 私のアカウント、およびプロダクトブロックはすべてのユーザーに対してレンダリングします
// 実際のカート — withSession wrapper は必要ありません。
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は、すべてのドキュメントを理解しています。

ドキュメントを読む

GitHubで見る