插件+联署材料包服务器给Gutenberg, 没有逃生舱

(原始内容存档于2018-10-21) (英语). Render Word Press Gutenberg in Next.js—— 1:1 (中文(简体) ).

NextPress是WPGraphQL扩展件外加Next.js软件包,为您的无头应用程序带来完整的Gutenberg忠心. theme.json 打印、分层样式表、块支持 CSS、交互 API —— 都提供了服务器侧面。

(单位:美元)作曲需要轴taylor/nextpress-wordpress

(单位:美元)npm 安装 @ axistaylor/ nextpress

// 下个新闻做什么

完全古腾堡, 没有妥协。

主题.json, 资产依赖性, 块支持 CSS, 交互 API —— NextPress 处理整个堆栈, 所以您的无头页面完全匹配编辑器预览。

服务器交付的 Gutenberg

Async 服务器组件。 WordPress 的块 HTML 在您 Next. js 树上降落, 不征收客户水分税。

主题.json 忠诚

调色板,字体大小,间距,流体打字技术——编辑器使用的同一种符号,线程通过你的无头页面与 CSS 变量相同.

样式隔离

@scope ([data-rendered]) 将 WP 的重置和块样式保存在渲染区域内, 因此您的应用程序外壳不会受到影响。

交互 API

脚本模块 + 导入地图 type="module" 古腾堡互动区块——推车抽屉,通航,手风琴均在本土工作.

// 四个步骤

把它接进来, 翻译页面。

– 01 安装

安装插件

激活 templateByUri, (中文(简体) ). globalStyles,以及您WPGraphQL端点上的资产桥查询。

wp plugin install axistaylor-nextpress --activate
# \ 下个已激活的 Press \ 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/电线

连接布局

将头和脚的插槽放入根部布局。下一张新闻稿发布样式表、脚本和导入地图。

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] 所有人都变成一线人接下来的Press解析模板,取出块树,返回匹配的回放.

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能做出来下一个记者也可以。

接下来的媒体并不关心块名。它走行块树,应用同样的支持 CSS WordPress 会,并发布匹配的React. 自定义块在框外工作。

主题.json 调色板全球纹理符号核心块块支持 CSS脚本模块交互 API自定义块经典编辑器 HTML可重复使用的块模板部件块图案资产依赖令

// 与 WooGraphQL 连接

带上WooCommerce的块与你为伴.

下个Press让任何古腾堡区块,包括WooCommerce区块. Paired with WooGraphQL, 无头会话线条进入已渲染的块上下文—— 所以WooCommerce 圆筒, (中文(简体) ). 离职, (中文(简体) ). 我的账户,且产品块读取了您的 Next.js app 的同一会话。没有双重登录没有代理黑客

WC Cart / 取出 / My 账号块会与用户的真实会话相抗衡。
下个应用程序和已渲染块共享的 Cart 令牌 @woographql/session-utils。。。。
产品块,过滤器,迷你卡片——同为WPGraphQL端点,没有平行的REST表面.
块级突变(添加到推车上,应用出价券)通过WooGraphQL进行回转.

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

// 代理设备ByWCR( 下一步的按压中间软件) 转发推车键
// 用于匹配 URI 的 Cookie 到 WordPress, 所以WP 渲染器
// 读取与您的下一个应用程序相同的会话。 WC Cart, checkout,
// 我的账户,和产品块 全部渲染反对用户
// 真正的推车——不需要会议包装。
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]}
    />
  )
}

使用下个新闻构建

安装,配置,资产铺设的API,以及块的完整目录NextPress能理解——全部在文件中.

读取文件

在 GitHub 上查看