System bloków

Jak działają bloki w modelu headless - defineBlock, instancje, komponent, context i loader danych.

29 czerwca 2026

Przegląd

Bloki to jednostki budulcowe każdej strony Cmssy. W modelu headless blok to komponent React w Twoim repozytorium Next.js, zadeklarowany przez defineBlock i schemę fields. Admin Cmssy pozwala edytorom umieszczać i konfigurować instancje bloków; Twoja strona renderuje je przez SDK. Blok ma trzy części:

  • Schema (fields) — edytowalne pola pokazywane w adminie
  • Komponent — komponent React renderujący treść
  • Rejestracja — blok dodany do tablicy cmssy/blocks.ts

Definiowanie bloku

Blok deklarujesz przez defineBlock i schemat fields, a jego komponent wyprowadza propsy z tego samego schematu przez BlockProps<typeof props> - dzięki temu pole ma nazwę dokładnie w jednym miejscu. Tworzenie bloków prowadzi przez całość; Schema i typy pól wymienia wszystkie typy pól.


Instancje bloków

Gdy edytor doda Twój blok do strony, Cmssy zapisuje instancję bloku:

{
  id: string;    // unikalny UUID tej instancji
  type: string;  // pasuje do `type` bloku (np. "hero")
  content: Record<string, unknown>;  // wartości pól per język
}

Treść jest zapisana per język ({ en: {...}, pl: {...} }); SDK rozwiązuje aktywny język przed przekazaniem content do komponentu, więc czytasz pola bezpośrednio.


Komponent, context i dane

Twój komponent dostaje { content, context, data }. content jest już rozwiązany dla aktywnego języka i otypowany z Twojego schematu; context niesie locale i isPreview, a także forms oraz auth / workspace, gdy Twoja aplikacja poda je przez buildBlockContext; data to wynik loadera serwerowego.

Rejestracja to jedna tablica, cmssy/blocks.ts, i to ona jest jedynym źródłem prawdy: napędza renderowanie, a edytor uczy się z niej schematu każdego bloku przez most SDK, więc picker zawsze odpowiada temu, co Twój serwis potrafi wyrenderować. Bloki jadą na produkcję razem z deployem aplikacji - nie ma osobnego kroku budowania ani publikowania.


Bloki layoutu

Header, footer i inne współdzielone regiony to bloki layoutu — takie same jak bloki strony, ale oznaczone layoutPositions (np. ["header"]) i renderowane przez CmssyServerLayout per pozycja.


Internacjonalizacja

Treść jest kluczowana językiem w CMS i rozwiązywana per żądanie. Routing jest przez prefiks ścieżki (/pl/*), domyślny język używa czystych URL-i. Czytaj aktywny i włączone języki z context.locale.


Następne kroki