安装渲染器

将渲染器引入你的项目：

npm i cms-renderer

项目结构

决定在项目中解析渲染器的位置：

src/
    app/
        [...slug]/
            page.tsx

下一步

• 设置参数化路由，以处理动态路由
• 扩展注册表，添加自定义组件
• 集成管理面板以进行实时编辑

我们的 Next.js 项目是一个简单的通配路由

对于一个结构类似文档页面的网站，page.tsx 如下所示

import NavbarBlock from '@/components/NavbarBlock';
import UIContent from '@/components/UIContent';
import UIFooter from '@/components/UIFooter';
import UISidebar from '@/components/UISidebar'; // 我们与 CMS 无关的设计系统
import ParametricRoutePage from 'cms-renderer/lib/renderer'; // Profound CMS 渲染器原语，用于实现渲染和实时预览
import type { BlockComponentRegistry } from 'cms-renderer/lib/types'; // 块注册表的 TypeScript 类型

const registry: Partial<BlockComponentRegistry> = {
  header: NavbarBlock,
  uisidebar: UISidebar,
  uicontent: UIContent,
  uifooter: UIFooter,
};

interface PageProps {
  params: Promise<{ slug: string[] }>;
}

export default async function Page({ params }: PageProps) {
  const { slug } = await params;

  return (
    <ParametricRoutePage
      registry={registry}
      apiKey={cmsConfig.apiKey}
      websiteId={cmsConfig.websiteId}
      cmsUrl={cmsConfig.cmsUrl}
      params={Promise.resolve({ slug })}
    />
  );
}

接下来我们开始创建页面，此时参数化页面和静态页面都应当可以正常工作。

后续步骤

1. 设置 Zod 组件拉取机制，将你的组件类型与远程管理面板的最新状态进行校验，以保持同步。
2. 在管理面板中使用组件设置参数化页面
3. 集成管理面板作为实时编辑的代理