Guide de développement de blocs

Anatomie d'un bloc

Un bloc Cmssy vit dans votre propre repo Next.js sous forme de dossier dans blocks/ :

• block.ts — déclare le bloc avec defineBlock + fields (son type, son label et son schéma éditable)
• src/index.tsx — le composant React qui rend le contenu

Enregistrez le bloc dans cmssy/blocks.ts. L'éditeur lit le schéma de chaque bloc via le pont SDK : ajouter un bloc à une page génère un formulaire d'édition à partir de vos fields.

---

Définir un bloc

import type { ComponentType } from "react";
import { defineBlock, fields } from "@cmssy/react";
import Component from "./src";

export const heroBlock = defineBlock({
  type: "hero",
  label: "Hero",
  component: Component as unknown as ComponentType<{ content: Record<string, unknown> }>,
  props: {
    heading: fields.singleLine({ label: "Heading", defaultValue: "Welcome" }),
    body: fields.richText({ label: "Body" }),
    ctaUrl: fields.link({ label: "CTA URL", defaultValue: "/signup" }),
    showCta: fields.boolean({ label: "Show CTA", defaultValue: true }),
  },
});

Types de champs : singleLine, multiLine, richText, numeric, date, media, link, select, multiselect, boolean, color, repeater. Voir Schéma & types de champs.

---

Le composant de bloc

Les blocs reçoivent { content, context, data }. Le contenu est déjà résolu pour la locale active, lisez donc les champs directement.

import type { CmssyBlockContext } from "@cmssy/react";

export default function Hero({ content, context }: {
  content: Record<string, unknown>;
  context?: CmssyBlockContext;
}) {
  const locale = context?.locale.current ?? "en";
  const isPreview = context?.isPreview ?? false;
  return <section><h1>{String(content.heading ?? "")}</h1></section>;
}

context transporte locale ({ current, default, enabled }) et isPreview, plus forms, et — quand config.auth est défini — auth ({ isAuthenticated, member }) et workspace ({ id, slug }). Une UI sensible à la locale lit context.locale.enabled. Pour vos propres modèles ou enregistrements, récupérez via createCmssyClient ; pour récupérer pendant le SSR, ajoutez un loader et lisez son résultat dans la prop data. Voir Fonctionnalités avancées et Authentification des membres.

---

Enregistrer & livrer

// cmssy/blocks.ts
import { heroBlock } from "@/blocks/hero/block";
export const blocks = [heroBlock];

Lancez pnpm dev, ouvrez l'éditeur de page, et votre bloc apparaît dans le sélecteur. Déployez votre app Next.js pour livrer — il n'y a pas d'étape séparée de build ou de publication de bloc.

---

Prochaines étapes

• Schéma & types de champs — tous les types de champs, repeaters, champs conditionnels, groupes
• Fonctionnalités avancées — blocs de layout, style, loaders serveur