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

Projeto Renderizador

Configuração do projeto para o renderizador


Instalar o Renderer

Adicione o renderer ao seu projeto:

npm i cms-renderer

Estrutura do Projeto

Decida onde resolver o renderer no seu projeto:

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

Próximos Passos

  • Configure o roteamento paramétrico para lidar com rotas dinâmicas
  • Amplie o registro com componentes personalizados
  • Integre o painel administrativo para edição ao vivo

O nosso projeto Next.js é uma rota coringa simples

Para um site estruturado como uma página de documentação, o page.tsx fica assim
import NavbarBlock from '@/components/NavbarBlock';

Continue Reading
NextRoteamento Paramétrico›
import
UIContent
from
'@/components/UIContent'
;
import UIFooter from '@/components/UIFooter';
import UISidebar from '@/components/UISidebar'; // nosso sistema de design que é agnóstico em relação a um CMS
import ParametricRoutePage from 'cms-renderer/lib/renderer'; // primitivas do renderizador do Profound CMS para permitir renderização e visualizações ao vivo
import type { BlockComponentRegistry } from 'cms-renderer/lib/types'; // tipos TypeScript do registro de blocos
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 })}
/>
);
}

Em seguida, começamos a criar páginas; tanto as páginas paramétricas quanto as estáticas devem funcionar neste ponto.


Próximos passos

  1. Configure a importação de componentes do Zod para validar o tipo do seu componente em relação ao estado mais atualizado do painel administrativo remoto e mantê-los sincronizados.
  2. Configure páginas paramétricas com Componentes no painel administrativo
  3. Integre o painel administrativo como um proxy para edição ao vivo

Híbrido

Projeto RenderizadorRoteamento ParamétricoTipos De ComponentesSseConfigurar Proxy Do Painel AdministrativoRenderização estática com suporte ao modo de ediçãoScripting no Construtor de TemplatesCreate Profound Next

Sem interface

Início rápidoJson E Claude CodeComponente Zod Puxar

Mcp

Mcp

Recursos Do Cms

Recurso Modelo De DocumentosRecurso Construtor De ModelosTradutor De FuncionalidadesRecurso Organizacao

Motivação

Nossa Abordagem

Terminologia

Hibrido Vs Headless