Anatomia bloku

Blok Cmssy żyje w Twoim repozytorium Next.js jako folder w blocks/:

block.ts — deklaruje blok przez defineBlock + fields (typ, etykieta i edytowalna schema)
src/index.tsx — komponent React renderujący treść

Zarejestruj blok w cmssy/blocks.ts. Edytor czyta schema każdego bloku przez most SDK, więc dodanie bloku do strony renderuje formularz edycji z Twoich fields.

Zdefiniuj blok

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

Typy pól: singleLine, multiLine, richText, numeric, date, media, link, select, multiselect, boolean, color, repeater. Zobacz Schema i typy pól.

Komponent bloku

Bloki otrzymują { content, context, data }. Treść jest już rozwiązana dla aktywnego języka, więc czytaj pola bezpośrednio.

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 niesie locale ({ current, default, enabled }) i isPreview, a także forms, oraz — gdy config.auth jest ustawione — auth ({ isAuthenticated, member }) i workspace ({ id, slug }). UI zależne od języka czyta context.locale.enabled. Po własne modele lub rekordy pobieraj przez createCmssyClient; aby pobierać podczas SSR dodaj loader i czytaj jego wynik z propa data. Zobacz Zaawansowane funkcje i Uwierzytelnianie członków.

Zarejestruj i wdróż

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

Uruchom pnpm dev, otwórz edytor strony, a Twój blok pojawi się w wyborze bloków. Wdróż aplikację Next.js, aby opublikować — nie ma osobnego kroku budowania czy publikowania bloku.

Następne kroki

Schema i typy pól — wszystkie typy pól, repeatery, pola warunkowe, grupy
Zaawansowane funkcje — bloki layoutu, stylowanie, server loadery