All Systems Operational
Powered By
profound-logo

Проект Рендерера

Настройка проекта для рендерера


Установите Renderer

Подключите рендерер к своему проекту:

npm i cms-renderer

Структура проекта

Определите, где в проекте будет подключаться рендерер:

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

Следующие шаги

  • Настройте параметрическую маршрутизацию для обработки динамических маршрутов
  • Расширьте реестр пользовательскими компонентами
  • Интегрируйте панель администрирования для редактирования в реальном времени

Наш проект Next.js — это простой маршрут catch-all

Для веб-сайта, структурированного как страница документации, файл page.tsx выглядит так
import NavbarBlock from '@/components/NavbarBlock';

Continue Reading
NextПараметрическая Маршрутизация›
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. Интегрируйте панель администратора как прокси для редактирования в реальном времени

Гибрид

Проект РендерераПараметрическая МаршрутизацияТипы КомпонентовSseНастройка Прокси Админ ПанелиСтатическая отрисовка с поддержкой режима редактированияСкриптинг в конструкторе шаблоновCreate Profound Next

Безголовый

Быстрый стартJson И Claude КодКомпонент Zod Pull

Mcp

Mcp

Возможности CMS

Feat Docs TemplateFeat Конструктор ШаблоновFeat ПереводчикFeat Организация

Мотивация

Наш подход

Терминология

Гибрид Против Headless
profound-logoProfound CMS
⌘K
Admin