Leitfaden zur Block-Entwicklung

Block-Anatomie

Ein Cmssy-Block lebt in deinem eigenen Next.js-Repo als Ordner unter blocks/:

• block.ts — deklariert den Block mit defineBlock + fields (Typ, Label und editierbares Schema)
• src/index.tsx — die React-Komponente, die den Inhalt rendert

Registriere den Block in cmssy/blocks.ts. Der Editor liest das Schema jedes Blocks über die SDK-Bridge — fügst du einen Block zu einer Seite hinzu, wird aus deinen fields ein Editor-Formular gerendert.

---

Einen Block definieren

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 }),
  },
});

Feldtypen: singleLine, multiLine, richText, numeric, date, media, link, select, multiselect, boolean, color, repeater. Siehe Schema & Feldtypen.

---

Die Block-Komponente

Blöcke erhalten { content, context, data }. Der Inhalt ist bereits für die aktive Locale aufgelöst, du kannst Felder also direkt lesen.

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 trägt locale ({ current, default, enabled }) und isPreview, dazu forms, und — wenn config.auth gesetzt ist — auth ({ isAuthenticated, member }) und workspace ({ id, slug }). Locale-abhängige UI liest context.locale.enabled. Eigene Modelle oder Records lädst du über createCmssyClient; um während des SSR zu laden, füge einen loader hinzu und lies sein Ergebnis aus der data-Prop. Siehe Erweiterte Funktionen und Mitglieder-Authentifizierung.

---

Registrieren & ausliefern

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

Führe pnpm dev aus, öffne den Seiten-Editor, und dein Block erscheint im Picker. Deploye deine Next.js-App zum Ausliefern — es gibt keinen separaten Block-Build- oder Publish-Schritt.

---

Nächste Schritte

• Schema & Feldtypen — alle Feldtypen, Repeater, bedingte Felder, Gruppen
• Erweiterte Funktionen — Layout-Blöcke, Styling, Server-Loader