CB2 UAE: migracja sklepu z Angulara na Next.js
CB2 UAE przeszło z frontendu Angular i Spartacus na własną aplikację Next.js z pełnym renderowaniem po stronie serwera, nowymi funkcjami i SmartEdit.
Granice Angulara i Spartacusa
Frontend Angular i Spartacus utrudniał optymalizację wydajności i wdrażanie nowych funkcji bardziej, niż było to konieczne. CB2 to redakcyjna marka stawiająca na design, w której liczą się duże zdjęcia i wyselekcjonowane kolekcje, dlatego sklep potrzebował pełnej kontroli nad renderowaniem i układem, przy zachowaniu SAP Commerce Cloud jako zaplecza.
Budujemy szybszą przyszłość dla CB2 UAE
Celem nie była wyłącznie zmiana frameworka. Zastąpiliśmy frontend Angular i Spartacus własnym sklepem w Next.js, który dodaje nowe funkcje, renderuje każdą stronę na serwerze i integruje się z SmartEdit, dzięki czemu zespoły treści nadal edytują wizualnie, a klienci dostają szybsze strony.
Next.js, SSR i SmartEdit
Dzięki Next.js i Reactowi przebudowaliśmy warstwę frontendową z pełnym renderowaniem po stronie serwera, więc strona główna, kategorie i strony produktów trafiają do klientów i wyszukiwarek jako kompletny HTML. Architektura jest modułowa, ponownie wykorzystuje komponenty React w szablonach i zastępuje implementację Spartacus opartą na Angularze integracją z SmartEdit dla zespołów treści.
Co zdecydowało o sukcesie projektu
Przeniesienie CB2 UAE na Next.js oznaczało szybszy, czystszy i bardziej przyszłościowy sklep, a nie tylko nową technologię. Oto, co wyróżnia ten projekt i jakie korzyści przynosi klientom, zespołom treści i biznesowi.
Stos technologiczny
Frontend
Next.js
React JS
TypeScript
Redux
HTML5
SCSS
Tailwind
Handel
SAP Commerce APIs
SmartEdit
Integracje
checkout.com
OAuth
Braze
GA4
Bezpieczeństwo
Veracode
Sklep CB2 UAE z bliska
Sklep renderowany na serwerze
Strony kategorii i produktów trafiają do przeglądarki jako kompletny HTML, więc klienci i wyszukiwarki widzą treść natychmiast.
Technologie: Next.js, React JS, TypeScript i API SAP Commerce.
Treści zarządzane w SmartEdit
Zespoły merchandisingu nadal edytują strony wizualnie w SmartEdit, teraz połączonym ze sklepem Next.js zamiast ze Spartacusem.
Zrzut ekranu: wkrótce.
Szybko na każdym urządzeniu
Te same komponenty dopasowują się od desktopu do telefonu, z responsywnymi obrazami i lekkim kodem po stronie klienta.
Zrzut ekranu: wkrótce.
Harmonogram migracji: styczeń 2026 – czerwiec 2026
Fundamenty
Konfiguracja projektu Next.js z TypeScriptem, SCSS i Tailwindem oraz wspólne komponenty React i stan w Reduxie.
Ścieżki zakupowe
Strona główna, kategorie, produkty, koszyk i zamówienie zbudowane od nowa z renderowaniem po stronie serwera na bazie API SAP Commerce.
Integracje
Płatności checkout.com, logowanie OAuth, zaangażowanie klientów w Braze i analityka GA4 podłączone do nowego sklepu.
Bezpieczeństwo, QA i wdrożenie
Skany Veracode, testy i strojenie wydajności, a następnie przejście z Angulara i Spartacusa z treściami zarządzanymi w SmartEdit.
Wyniki Lighthouse działającego sklepu
92
Wynik SEO w Lighthouse
92
Wynik dostępności w Lighthouse
0
Cumulative Layout Shift (CLS)
Dane laboratoryjne działającego sklepu (mobile), zmierzone Lighthouse 13.4 dnia 13 listopada 2026.
Najważniejsze widoki z przebudowy CB2 UAE
Bliższe spojrzenie na działający sklep Next.js: redakcyjne kafelki strony głównej i układ strony produktu – wszystko renderowane na serwerze i responsywne na każdym urządzeniu.
