@ cmssy/ next

Next.js (App 路由器) 绑定 a 学问 无头站. 一条通通的路由会让您发布 cmsy 内容与本地块 组件,在其中构建活版编辑-模式预览。 与 @cmssy/react (块+数据).

pnpm add @cmssy/next @cmssy/react

翻出每一页

// app/[[...path]]/page.tsx
import { createCmssyPage } from "@cmssy/next/server";
import { cmssy } from "@/cmssy/config";
import { blocks } from "@/cmssy/blocks";
import { CmssyEditor } from "@/cmssy/editor";

export default createCmssyPage(cmssy, blocks, { editor: CmssyEditor });

// cmssy/config.ts
import { defineCmssyConfig } from "@cmssy/next";

// defineCmssyConfig validates the required env vars and throws a clear error if
// any is missing - never mask them with `?? ""` (an empty org/slug builds a
// broken delivery URL like `/public//graphql`).
export const cmssy = defineCmssyConfig({
  org: process.env.CMSSY_ORG_SLUG,
  workspaceSlug: process.env.CMSSY_WORKSPACE_SLUG,
  draftSecret: process.env.CMSSY_DRAFT_SECRET, // edit-mode preview handshake
  // apiUrl + editorOrigin default to cmssy cloud; set them only for self-host/staging.
  // Locales come from the workspace site config - no need to repeat them here.
});

createCmssyPage 获取请求路径的已发布的页面并制作 它; 未出版的一页回答 404. 它不处理编辑器 - 这需要 下面的编辑路径和代理。 一个出版的建筑确实 没有 需求 editorOrigin。 。 。 .

让编辑器设定您的网站

Cmsy 编辑器以 ?cmssyEdit=1&cmssySecret=<draft secret>代理验证该秘密 将请求重写到 /cmssy-edit/...,使草案内容与  editor。需要两个文件;没有这两个文件,编辑会报告: 预览没有响应.

// app/cmssy-edit/[[...path]]/page.tsx
import { createCmssyEditPage } from "@cmssy/next/server";
import { cmssy } from "@/cmssy/config";
import { blocks } from "@/cmssy/blocks";
import { CmssyEditor } from "@/cmssy/editor";

export const dynamic = "force-dynamic";

export default createCmssyEditPage(cmssy, blocks, { editor: CmssyEditor });

// proxy.ts (Next.js 16) - on Next.js 15 name it middleware.ts and export `middleware`
import { createCmssyProxy } from "@cmssy/next/middleware";
import { cmssy } from "@/cmssy/config";

export const proxy = createCmssyProxy(cmssy);
export const config = { matcher: ["/((?!_next/|api/|.*\\..*).*)"] };

proxy.ts 坐在旁边 app/ (单位:千美元) src/ 当应用程序是 src/app) (中文(简体) ). 设定 工作空间预览 URL 到精确的部署来源, 例如 . https://my-site.vercel.app。 。 。 .

预览草稿

// app/api/draft/route.ts
import { createDraftRoute } from "@cmssy/next/server";
export const GET = createDraftRoute(cmssy);

缓存,并在发布时过期

// app/[[...path]]/page.tsx
export const revalidate = 3600;
const cache = { revalidate };
export default createCmssyPage(cmssy, blocks, { editor: CmssyEditor, cache });

// app/api/revalidate/route.ts
import { createCmssyRevalidateRoute } from "@cmssy/next/server";
export const POST = createCmssyRevalidateRoute({
  secret: process.env.CMSSY_WEBHOOK_SECRET,
});

cache 将 SDK 发布的读取到下一个数据缓存 cmssy-content 标签; 已验证的路由过期 content.changed (原始内容存档于2017-10-21). webhook. 草稿模式和编辑器总是在现场阅读.

编辑模式 CSP

createCmssyProxy 已经设置在编辑器请求中 。 对于一个手写代理, applyCmssyCsp(response, { editorOrigin: cmssy.editorOrigin }) 从 @cmssy/next/middleware 让 cmsy 编辑器设定响应.

本地化导航(路径前缀)

活动地块生活在 URL 路径前缀中(/en/about; 默认区域 保持裸体). createCmssyPage 解决它,并揭露它通过 CmssyLocaleProvider。 。 。 . 内部链接必须带有前缀 前缀为您自己 localizeHref 将结果传递给 next/link数字 :

// any block component
import Link from "next/link";
import { localizeHref } from "@cmssy/next";

<Link href={localizeHref("/about", locale)}>About</Link>; // → /en/about while EN is active

根版式无法读取路径, 因此代理从 : 路径前缀: createCmssyProxy 从编辑部分已经做了.

localizeHref(href, locale) 编辑 CMSSY_LOCALE_HEADER 常数为 从 @cmssy/next (和 @cmssy/core) (中文(简体) ).

出口

@cmssy/next/server数字 : createCmssyPage, (中文(简体) ), createCmssyEditPage, (中文(简体) ), createDraftRoute, (中文(简体) ), createCmssyRevalidateRoute, (中文(简体) ), createCmssyBlockDataRoute, (中文(简体) ), CmssyLayoutSlot, (中文(简体) ), resolveCmssyLayout, (中文(简体) ), isCmssyEditMode。 。 。 . @cmssy/next/middleware数字 : createCmssyProxy, (中文(简体) ), cmssyEditRewrite, (中文(简体) ), applyCmssyCsp, (中文(简体) ), isCmssyEditRequest。 。 。 . 根 : defineCmssyConfig, (中文(简体) ), localizeHref, (中文(简体) ), nextRetryMode, (中文(简体) ), cmssyCachedFetch, (中文(简体) ), CMSSY_CONTENT_TAG 和类型。 完整名单,有签名,在 文献/参考资料/sdk-api.md。 。 。 .

版本: 此软件包, 不是 API

固定此套件不会将它所讲的API 绑起 . 软件包版本 包括这个客户 - 其出口及其行为,正常的铸币. 阴道 aPI是一个主机服务,其GraphQL计划可以在任何部署上改变, 在这儿没有释放权.

API 版本没有日期标注; 发送端没有版本 部分。 今天保护你的是 断裂的策略改变不能合并 沉默地 - 它被一个能验证SDK自身操作的门抓住 无论如何,运输一个需要记录 批准 - 而我们打算 删除已标记 @deprecated 先说 没有保证的折旧窗口 并且没有最低的通知期。 详细情况 @cmssy/core。 。 。 .

许可证

麻省理工学院