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

Progetto Renderer

Configurazione del progetto per il renderer

Installare il renderer

Importa il renderer nel tuo progetto:

npm i cms-renderer

Struttura del progetto

Decidi dove utilizzare il renderer nel tuo progetto:

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

Prossimi passi

  • Configura il routing parametrico per la gestione dinamica delle rotte
  • Estendi il registro con componenti personalizzati
  • Integra il pannello di amministrazione per l'editing live

Il nostro progetto Next.js è una semplice rotta catch-all

Per un sito web strutturato come una pagina di documentazione, page.tsx si presenta così

import NavbarBlock from '@/components/NavbarBlock';
Continue Reading
NextInstradamento parametrico›
import
UIContent
from
'@/components/UIContent'
;
import UIFooter from '@/components/UIFooter';
import UISidebar from '@/components/UISidebar'; // il nostro sistema di design agnostico rispetto a un CMS
import ParametricRoutePage from 'cms-renderer/lib/renderer'; // Le primitive di rendering di Profound CMS per consentire il rendering e le anteprime live
import type { BlockComponentRegistry } from 'cms-renderer/lib/types'; // I tipi TypeScript del registro dei blocchi
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 })}
/>
);
}

Poi iniziamo a creare le pagine; a questo punto dovrebbero funzionare sia le pagine parametriche sia quelle statiche.

Prossimi passi

  1. Configura l'importazione dei componenti Zod per convalidare il tipo del tuo componente rispetto allo stato più aggiornato del pannello di amministrazione remoto e mantenerlo sincronizzato.
  2. Configura pagine parametriche con i componenti nel pannello di amministrazione
  3. Integra il pannello di amministrazione come proxy per l'editing live

Ibrido

Progetto RendererInstradamento parametricoTipi Di ComponentiSseConfigura Proxy Pannello Di AmministrazioneRendering Statico Con Supporto Della Modalita Di ModificaScripting Nel Template BuilderCreate Profound Next

Senza testa

Avvio rapidoJson And Claude CodeComponent Zod Pull

Mcp

Mcp

funzionalità CMS

Feat Modello DocumentazioneFunzionalità Generatore Di ModelliFeat TraduttoreFeat Organizzazione

Motivazione

Il nostro approccio

Terminologia

Ibrido vs Headless