All Systems Operational
Powered By
profound-logo

Renderer Project

Projectconfiguratie voor de renderer


Renderer installeren

Voeg de renderer toe aan je project:

npm i cms-renderer

Projectstructuur

Bepaal waar je de renderer in je project wilt plaatsen:

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

Volgende stappen

  • Stel parametrische routing in voor dynamische routeafhandeling
  • Breid het register uit met aangepaste componenten
  • Integreer het beheerpaneel voor live bewerking

Ons Next.js-project is een eenvoudige catch-all-route

Voor een website die is gestructureerd als een documentatiepagina ziet de page.tsx er als volgt uit
import NavbarBlock from '@/components/NavbarBlock';

Continue Reading
NextParametrische Routering›
import
UIContent
from
'@/components/UIContent'
;
import UIFooter from '@/components/UIFooter';
import UISidebar from '@/components/UISidebar'; // ons designsysteem dat agnostisch is ten opzichte van een CMS
import ParametricRoutePage from 'cms-renderer/lib/renderer'; // Profound CMS-rendererprimitieven om rendering en live previews mogelijk te maken
import type { BlockComponentRegistry } from 'cms-renderer/lib/types'; // TypeScript-typen voor blokregister
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 })}
/>
);
}

Daarna beginnen we pagina's te maken; zowel parametrische als statische pagina's zouden op dit moment moeten werken.


Volgende stappen

  1. Stel Zod-component pull in om het type van je component te valideren tegenover de meest recente staat van het externe beheerpaneel om gesynchroniseerd te blijven.
  2. Stel parametrische pagina's in met componenten in het beheerpaneel
  3. Integreer het beheerpaneel als proxy voor live bewerking

Hybride

Renderer ProjectParametrische RouteringComponenttypenSseInstellen Beheerderspaneel ProxyStatische Rendering Met Ondersteuning Voor BewerkmodusScripting In SjabloonbouwerCreate Profound Next

Koploos

SnelstartJson En Claude CodeComponent Zod Ophalen

Mcp

Mcp

Cms Functies

Feat Docs TemplateFeat SjabloonbouwerFeat VertalerFeat Organisatie

Motivatie

Onze Aanpak

Terminologie

Hybride Vs Headless
profound-logoProfound CMS
⌘K
Admin