Payload CMS - O headless CMS (cz. 1)

Intro

Payload CMS to popularny wśród developerów JavaScript i TypeScript system do budowy nowoczesnych aplikacji, oparty o Next.js.

Łączy funkcję headless CMS z frameworkiem backendowym, dzięki czemu pozwala tworzyć zarówno warstwę zarządzania treścią, jak i zaplecze aplikacji w jednym projekcie.

W standardzie otrzymujemy m.in.:

• rozbudowany panel administracyjny,
• automatycznie generowane REST API i GraphQL,
• system autentykacji i zarządzania użytkownikami,
• obsługę uploadu plików,
• pełne wsparcie dla TypeScript.

W Lipcu 2025 Payload ogłosił na swoim blogu przejęcie przez Figmę. Payload is joining Figma. Daje to duże nadzieje dotyczące integracji narzędzi figmy z Payload (między innymi AI).

Być może niedługo stanie się defacto standardem jeśli chodzi o wybór headless CMS spośród wielu opcji oferowanych w środowisku Node.js.

Tradycyjny CMS vs Headless CMS

Istnieje kilka różnic (głównie od strony technicznej) dotyczących samych koncepcji tych dwóch podejść do zarządzania treścią.

Tradycyjny CMS

Klasyczne systemy CMS takie jak WordPress łączą system zarządzania treścią (panel administracyjny) z technologią przedstawiania zawartości serwisu (renderowanie contentu dla użytkownika końcowego). W przypadku wspomnianego WordPress'a technologią główną jest PHP + Baza Danych (MySQL lub MariaDB) + Serwer (Apache lub Ngnix).

Oddzielone warstwy frontend Panelu Administracyjnego i Motywu (prezentacji treści użytkownikowi końcowemu) współpracują ze sobą poprzez jedno źródło danych i wspólną technologię. Technologia jest wspólna, co powoduje ograniczenia dla developerów jeśli chodzi znajomość technologii głównej. Objaśniając - aby stworzyć motyw (Warstwę prezentacji), należy znać lub nauczyć się technologii głównej danego CMS'a.

Warto wspomnieć, że technologia headless CMS stała się na tyle popularna, że tradycyjne CMS-y mogą poprzez odpowiednią konfigurację stać się headless (udostępnić REST-API/GraphQL).

Headless CMS

Headless CMS to system zarządzania treścią, który zwykle oddziela aplikację CMS (w przypadku Payload CMS - panel administracyjny) - od aplikacji prezentującej content użytkownikowi końcowemu.

Aplikacje te zwykle komunikują się poprzez REST-API lub GraphQL. Daje to duże możliwości dla developerów, jeśli chodzi o dobór stosu technologicznego drugiej z wyżej wymienionych aplikacji (użytkownika końcowego).

Payload CMS jako Headless

Payload CMS jest napisany we frameworku Next.js. Do funkcjonowania samego Payload potrzebny jest Node.js oraz baza danych. Payload oferuje kilka adapterów umożliwiających dobór bazy danych.

Co więcej aplikacja Payload pozwala napisać aplikację użytkownika końcowego, wykorzystując już istniejącą aplikację Next.js, na której jest oparta logika Panelu Administracyjnego, REST-API oraz GraphQL.

Próg wejścia Payload CMS

Payload CMS nie posiada w tej chwili takiego zaplecza w postaci: prekonfiguracji, one-click setup, materiałów edukacyjnych oraz samych aplikacji użytkownika końcowego (nazwijmy je motywem), aby nie wymagały wiedzy z zakresu programowania.

W zakresie "postawienia" aplikacji Panelu Administratora potrzebna jest choćby średnio-zaawansowana wiedza z zakresu JavaScript/TypeScript, Node.js, wybranej bazy danych, oraz Next.js.

Jeśli chodzi o aplikację użytkownika końcowego - potrzebna jest wiedza w zakresie wybranego stosu technologicznego. Może to być m.in: JavaSript, C#, Java, Python.

Payload CMS nie jest narzędziem, które opanuje każdy. Brak materiałów dotyczących developmentu przy użyciu Payload CMS jest zniechęcająca. Myślę, że ten stan będzie się zmieniał z roku na rok, ponieważ framework ten jest warty uwagi, a przejęcie przez Figmę, powinno przyspieszyć proces szerszego wdrażania Payload.

Konkurenci Payload CMS

Będąc szczerym, konkurencja jest ogromna. Tak naprawdę, każdy system CMS jest konkurencją Payload. Zawężając mnogość systemów CMS, wymienię kilka CMSów typu Headless.

• Strapi
• Contentful
• Sanity
• Directus
• DatoCMS
• Ghost (częściowo)
• WordPress w trybie headless

Autor tego artykułu miał do tej pory styczność z trzyma CMS-ami z tej listy: WordPress, Sanity oraz Ghost. Z tej listy najbardziej przypominającym Payload, lecz nie dającym tylu możliwości customowej konfiguracji wydaje mi się Sanity.

Możliwości zastosowania Payload CMS

Jest ich bardzo dużo. To co wyróżnia i wpływa na możliwości zastosowań to takie cechy jak:

• podejście code-first
• pełna customizacja i rozszerzalność,
• kod open-source
• możliwość działania jako fullstack framework, a nie tylko CMS

Wymienię tylko kilka zastosowań, które przychodzą mi w tej w chwili do głowy.

• strona firmowa
• blog technologiczny
• portal newsowy
• baza wiedzy
• platforma edukacyjna

Co będziemy budować w tej serii

W tej serii zbudujemy platformę typu marketplace, na której organizację będą mogły sprzedawać swoje projekty stworzone w Payload CMS.

Dlaczego wybrałem ten temat? Jest mniej powszechny, a zarazem daje więcej okazji pokazania pełnego spektrum możliwości Payload CMS, niż np. strona firmowa lub blog technologiczny.

Technologie użyte w projekcie budowanym w tej serii

Seria ta nie jest przeznaczona dla żółtodziobów, dopiero zaczynających zabawę z webdevelopmentem. Niemniej zachęcam do lektury każdego.

Stos technologiczny projektu realizowanego w tej serii będzie następujący:

• JavaScript
• TypeScript
• Payload CMS (jako backend/headless CMS)
• Next.js
• Git + Github
• PostgreSQL (jako hosting wybierzemy Supabase)
• HTML
• CSS (Tailwind)
• Komponenty z biblioteki shadcn

Outro

W tym artykule poznaliśmy koncepcje headless CMS oraz przykładowe zastosowania Payload CMS. W kolejnej części przejdziemy do omówienia założeń tworzonej aplikacji i feature'ów w niej zawartych.

Jeśli interesuje Cię nowoczesny stack oparty o React, Node.js i TypeScript, ta seria będzie dobrym miejscem, żeby poznać Payload CMS od praktycznej strony.

Z developerskim pozdrowieniem! HOWGH!