All Systems Operational
Powered By
profound-logo
profound-logoProfound CMS
⌘K
Admin

Renderer-Projekt

Projekteinrichtung für den Renderer


Renderer installieren

Holen Sie den Renderer in Ihr Projekt:

npm i cms-renderer

Projektstruktur

Legen Sie fest, wo der Renderer in Ihrem Projekt aufgelöst werden soll:

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

Nächste Schritte

  • Richten Sie parametriertes Routing für die dynamische Routenverarbeitung ein
  • Erweitern Sie die Registry mit benutzerdefinierten Komponenten
  • Integrieren Sie das Admin-Panel für die Live-Bearbeitung

Unser Next.js-Projekt ist eine einfache Catch-All-Route.

Für eine Website, die wie eine Dokumentationsseite strukturiert ist, sieht die page.tsx so aus
import NavbarBlock from '@/components/NavbarBlock';

Continue Reading
NextParametrisches Routing›
import
UIContent
from
'@/components/UIContent'
;
import UIFooter from '@/components/UIFooter';
import UISidebar from '@/components/UISidebar'; // Unser Designsystem, das unabhängig von einem CMS ist
import ParametricRoutePage from 'cms-renderer/lib/renderer'; // Profound-CMS-Renderer-Primitiven für Rendering und Live-Vorschauen
import type { BlockComponentRegistry } from 'cms-renderer/lib/types'; // Block-Registry-TypeScript-Typen
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 })}
/>
);
}

Dann beginnen wir damit, Seiten zu erstellen; sowohl parametrische als auch statische Seiten sollten an diesem Punkt funktionieren.


Nächste Schritte

  1. Richten Sie den Zod-Komponentenabruf ein, um den Typ Ihrer Komponente mit dem aktuellsten Stand des Remote-Admin-Panels abzugleichen.
  2. Richten Sie parametrische Seiten mit Komponenten im Admin-Panel ein.
  3. Integrieren Sie das Admin-Panel als Proxy für die Live-Bearbeitung

Hybrid

Renderer-ProjektParametrisches RoutingKomponententypenSseAdmin Panel Proxy EinrichtenStatisches Rendering mit Edit-Modus-UnterstützungSkripterstellung im Template-BuilderCreate Profound Next

Kopflos

SchnellstartJson Und Claude CodeKomponente-Zod-Abruf

Mcp

Mcp

Cms Funktionen

Feat Docs TemplateFeat Vorlagen BuilderFeat TranslatorFeature-Organisation

Motivation

Unser Ansatz

Terminologie

Hybrid vs. Headless