Désormais avec création de pages par IA via le serveur MCP

Système de blocs

Comment fonctionnent les blocs dans le modèle headless - defineBlock, instances, le composant, le context et le data loader.

29 juin 2026

Vue d'ensemble

Les blocs sont les unités de construction de chaque page Cmssy. Dans le modèle headless, un bloc est un composant React dans votre propre dépôt Next.js, déclaré avec defineBlock et un schéma fields. L'admin Cmssy permet aux éditeurs de placer et configurer des instances de blocs ; votre site les affiche avec le SDK. Un bloc a trois parties :

  • Schéma (fields) — les champs éditables affichés dans l'admin
  • Composant — le composant React qui affiche le contenu
  • Enregistrement — le bloc ajouté à votre tableau cmssy/blocks.ts

Définir un bloc

Un bloc se déclare avec defineBlock et un schéma fields, et son composant dérive ses props de ce même schéma via BlockProps<typeof props> - un champ n'est donc nommé qu'à un seul endroit. Développement de blocs détaille tout le parcours ; Schéma & types de champs liste tous les types.

Instances de blocs

Quand un éditeur ajoute votre bloc à une page, Cmssy stocke une instance de bloc :

{
  id: string;    // unique UUID for this instance
  type: string;  // matches your block's `type` (e.g. "hero")
  content: Record<string, unknown>;  // language-keyed field values
}

Le contenu est stocké par langue ({ en: {...}, pl: {...} }) ; le SDK résout la locale active avant de passer content à votre composant, vous lisez donc les champs directement.

Le composant, le context & les données

Votre composant reçoit { content, context, data }. content est déjà résolu pour la locale active et typé depuis votre schéma ; context porte locale et isPreview, plus forms, et auth / workspace quand votre application les fournit via buildBlockContext ; data est ce qu'a renvoyé un loader serveur.

L'enregistrement tient dans un tableau, cmssy/blocks.ts, et c'est l'unique source de vérité : il pilote le rendu, et l'éditeur y apprend le schéma de chaque bloc via le pont SDK, si bien que le sélecteur correspond toujours à ce que votre site sait afficher. Les blocs partent en production avec le déploiement de votre application - il n'y a pas d'étape séparée de build ou de publication.

Blocs de layout

Le header, le footer et les autres zones partagées sont des blocs de layout — identiques aux blocs de page mais marqués avec layoutPositions (par ex. ["header"]) et rendus par CmssyServerLayout par position.

Internationalisation

Le contenu est stocké par langue dans le CMS et résolu à chaque requête. Le routage se fait par préfixe de chemin (/pl/*), la locale par défaut utilisant des URL propres. Lisez la locale active et les locales activées depuis context.locale.

Étapes suivantes