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

Híbrido

Proyecto RenderizadorEnrutamiento ParamétricoTipos De ComponentesSseConfigurar Proxy Del Panel De AdministraciónRenderizado Estatico Con Soporte De Modo De EdicionProgramación en el generador de plantillasCreate Profound Next

Sin cabeza

Inicio rápidoJson Y Claude CodeComponente Zod Pull

Mcp

Mcp

Características Cms

Feat Docs TemplateCaracterística Constructor De PlantillasFuncionalidad TraductorFeat Organización

Motivación

Nuestro enfoque

Terminología

Hibrido Vs Headless

Proyecto Renderizador

Configuración del proyecto para el renderizador

Instalar el renderizador

Incorpora el renderizador en tu proyecto:

npm i cms-renderer

Estructura del proyecto

Decide dónde resolver el renderizador en tu proyecto:

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

Próximos pasos

  • Configura el enrutamiento paramétrico para gestionar rutas dinámicas
  • Amplía el registro con componentes personalizados
  • Integra el panel de administración para la edición en vivo

Nuestro proyecto de Next.js es una ruta comodín simple

Para un sitio web estructurado como una página de documentación, el archivo page.tsx se ve así

import NavbarBlock from '@/components/NavbarBlock';
Continue Reading
NextEnrutamiento Paramétrico›
import
UIContent
from
'@/components/UIContent'
;
import UIFooter from '@/components/UIFooter';
import UISidebar from '@/components/UISidebar'; // nuestro sistema de diseño agnóstico a un CMS
import ParametricRoutePage from 'cms-renderer/lib/renderer'; // Primitivas del renderizador de Profound CMS para permitir el renderizado y las previsualizaciones en vivo
import type { BlockComponentRegistry } from 'cms-renderer/lib/types'; // tipos de TypeScript para el registro de bloques
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 })}
/>
);
}

Luego empezamos a crear páginas; tanto las páginas paramétricas como las estáticas deberían funcionar en este punto.

Próximos pasos

  1. Configura la extracción de componentes con Zod para validar el tipo de tu componente frente al estado más actualizado del panel de administración remoto y mantenerlo sincronizado.
  2. Configura páginas paramétricas con Componentes en el panel de administración
  3. Integra el panel de administración como un proxy para la edición en vivo