Teraz z AI - twórz strony przez serwer MCP
Poradnik

Jak stworzyc blok listy postow

Stworz dynamiczny blok listy postow z danymi kolekcji, wyszukiwaniem, nieskoczonym przewijaniem i okladkami. Pelny przeglad kodu.

Z
Zespol Cmssy
15 min read

Jak stworzyc blok listy postow

Zbuduj blok we wlasnej aplikacji Next.js ktory pobiera i listuje posty z Cmssy przez delivery API, z wyszukiwaniem i paginacja.

Last updated: 15 marca 2026

Co budujemy

Blok listy postow ktory pobiera i wyswietla posty z Twojego workspace Cmssy przez delivery API. Cmssy to headless CMS z wizualnym edytorem: tresc mieszka w panelu Cmssy, a komponenty blokow w Twojej wlasnej aplikacji Next.js, ktora sam wdrazasz. Funkcje:

  • Posty pobierane przez createCmssyClient z @cmssy/react
  • Okladki z pola media
  • Wyszukiwanie po stronie klienta
  • Paginacja (wczytaj wiecej)
  • Filtrowanie po kategoriach
  • Tryb siatki i listy

Jak dzialaja bloki w podejsciu headless

Blok to po prostu komponent React plus schemat, oba w Twoim repo. Nie uruchamiasz CLI ani kroku publikacji. Przebieg:

  1. Zdefiniuj edytowalne pola bloku w blocks/blog-posts/block.ts przez defineBlock
  2. Napisz komponent React w blocks/blog-posts/src/
  3. Zarejestruj go w cmssy/blocks.ts
  4. Uruchom pnpm dev i blok pojawi sie w edytorze
  5. Wdroz aplikacje Next.js - tak wlasnie blok trafia na produkcje

Edytor osadza Twoja wdrozona (lub lokalna) strone i uczy sie schematu kazdego bloku przez most SDK, wiec nie ma nic do wgrywania osobno.

Krok 1: Zdefiniuj blok

Stworz blocks/blog-posts/block.ts z defineBlock i schematem fields: heading (singleLine), description (multiLine), postModel (singleLine - klucz API modelu z postami), postsPerPage (numeric), layout (select: grid/list), showSearch (boolean).

Dostepne typy pol: singleLine, multiLine, richText, numeric, date, media, link, select, multiselect, boolean, color i repeater. Tutaj edytor konfiguruje tylko sam blok - posty pochodza z modelu tresci pobieranego w czasie renderowania.

Krok 2: Poznaj propsy komponentu

Komponent dostaje { content, context }. content to wartosci pol z defineBlock; context opisuje srodowisko renderowania: locale (z polami current, default i enabled) oraz isPreview (true wewnatrz edytora). Uzyj context.locale.current do wyboru zlokalizowanych wartosci, a context.isPreview do zmiany zachowania w edytorze.

Krok 3: Pobierz posty przez delivery API

Posty zyja jako rekordy modelu tresci (tu modelu post) w Twoim workspace. Pobierz je przez createCmssyClient z @cmssy/react, ktory rozmawia z delivery API przez GraphQL. Wywolaj cmssy.records.list({ model, locale, search, limit, offset }) i otrzymasz items, total oraz hasMore. Kazdy rekord udostepnia pola zdefiniowane na modelu - zwykle tytul, zajawke, slug i pole media cover_image.

Krok 4: Zbuduj komponent

Stworz blocks/blog-posts/src/blog-posts.tsx: komponent klienta ktory tworzy klienta przez createCmssyClient, pobiera posty w useEffect przez cmssy.records.list uzywajac context.locale.current, i renderuje siatke kart z okladka (cover_image), tytulem i zajawka. Linkuj do /blog/{post.slug}.

Krok 5: Zarejestruj blok

Dodaj blok do cmssy/blocks.ts aby edytor i renderer go znaly - rozlozjesz schemat z defineBlock i dolaczasz component. To cale podlaczenie: zadnego wgrywania ani komendy publikacji - edytor czyta schemat z Twojej aplikacji przez most SDK.

Krok 6: Dodaj paginacje

Aby wczytac wiecej postow, trzymaj offset i dolaczaj wyniki gdy uzytkownik kliknie "Wczytaj wiecej" (albo gdy sentinel pojawi sie w widoku). Wywoluj cmssy.records.list z kolejnym offset i dopisuj do listy. W edytorze mozesz to skrocic przez context.isPreview.

Uruchom lokalnie

Uruchom aplikacje (pnpm dev) i blok od razu pojawi sie w edytorze. Otworz workspace w panelu Cmssy, upusc blok Blog Posts na strone - edytor osadzi Twoja lokalna strone, a lista wyrenderuje sie na zywo z delivery API.

Wdroz

Nie ma osobnego kroku wdrozenia bloku. Gdy wdrazasz aplikacje Next.js (na Vercel lub gdziekolwiek), nowy blok jedzie razem z nia. Edytor wskazuje na Twoj wdrozony URL do edycji wizualnej. Ustaw NEXT_PUBLIC_CMSSY_WORKSPACE i token delivery w srodowisku produkcyjnym i gotowe.

Konfiguracja modelu

Zanim blok bedzie mial co listowac, stworz model tresci w panelu Cmssy: model post z polami title (Single line), excerpt (Multi line), cover_image (Media), category (Select). Stworz rekordy dla kazdego postu i wygeneruj token delivery aby blok mogl je czytac.

Nastepne kroki

Jak stworzyc blok listy postow - Poradnik Cmssy