All Systems Operational
Powered By
profound-logo

Renderer Projet

Configuration du projet pour le renderer

Installer Renderer

Importez le renderer dans votre projet :

npm i cms-renderer

Structure du projet

Déterminez où résoudre le renderer dans votre projet :

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

Prochaines étapes

  • Configurer le routage paramétrique pour la gestion des routes dynamiques
  • Étendre le registre avec des composants personnalisés
  • Intégrer le panneau d'administration pour l'édition en direct

Notre projet Next.js est une simple route catch-all

Pour un site web structuré comme une page de documentation, le fichier page.tsx ressemble à

import NavbarBlock from '@/components/NavbarBlock';
Continue Reading
NextRoutage paramétrique›
import
UIContent
from
'@/components/UIContent'
;
import UIFooter from '@/components/UIFooter';
import UISidebar from '@/components/UISidebar'; // notre système de conception indépendant de tout CMS
import ParametricRoutePage from 'cms-renderer/lib/renderer'; // Primitives du renderer Profound CMS pour permettre le rendu et les aperçus en direct
import type { BlockComponentRegistry } from 'cms-renderer/lib/types'; // types TypeScript du registre de blocs
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 })}
/>
);
}

Nous commençons ensuite à créer des pages ; à ce stade, les pages paramétriques et statiques devraient fonctionner.

Prochaines étapes

  1. Configurer la récupération des composants Zod pour valider le type de votre composant par rapport à l'état le plus récent du panneau d'administration distant afin de rester synchronisé.
  2. Configurer des pages paramétriques avec des composants dans le panneau d'administration
  3. Intégrer le panneau d'administration comme proxy pour l'édition en direct

Hybride

Renderer ProjetRoutage paramétriqueTypes de composantsSseConfigurer Proxy Panneau AdminRendu statique avec prise en charge du mode éditionScripts dans le générateur de modèlesCreate Profound Next

Sans tête

Démarrage rapideJson Et Claude CodeRécupération du schéma Zod du composant

Mcp

Mcp

fonctionnalités du CMS

Feat Docs TemplateGénérateur de modèles de fonctionnalitéFonctionnalité TraducteurFonctionnalité Organisation

Motivation

Notre approche

Terminologie

Hybride Vs Sans Interface
profound-logoProfound CMS
⌘K
Admin