E-commerce · migracja na Next.js
Migracja Crate & Barrel UAE
na Next.js
Crate & Barrel 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. Dla katalogu mebli, dekoracji i akcesoriów stołowych z bogatymi w zdjęcia stronami produktów Crate & Barrel UAE potrzebowało pełnej kontroli nad renderowaniem, SEO i ścieżką zakupową, przy zachowaniu SAP Commerce Cloud jako zaplecza handlowego.
Budujemy szybszą przyszłość dla Crate & Barrel 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 Crate & Barrel 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
Next.js
SSR, routing, wydajność
React JS
Interfejs oparty na komponentach
TypeScript
Typowany, łatwy w utrzymaniu kod
HTML5 / SCSS
Znaczniki i style
Tailwind
CSS w podejściu utility-first
Redux
Przewidywalny stan aplikacji
SAP Commerce APIs
Katalog, koszyk, zamówienie
checkout.com
Płatności
OAuth
Bezpieczne uwierzytelnianie
Braze
Zaangażowanie klientów
GA4
Analityka i zdarzenia
Veracode
Skanowanie bezpieczeństwa
Sklep Crate & Barrel UAE z bliska
Strona główna
Lista produktów
Strona produktu
Koszyk · zrzut ekranu wkrótce
Zamówienie · zrzut ekranu wkrótce
Strona z treścią · zrzut ekranu wkrótce
Harmonogram migracji: wrzesień 2025 – styczeń 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
89
Wynik dostępności w Lighthouse
0.06
Cumulative Layout Shift (CLS)
Dane laboratoryjne działającego sklepu (mobile), zmierzone Lighthouse 13.4 dnia 13 listopada 2026.
Najważniejsze widoki z przebudowy Crate & Barrel UAE
Bliższe spojrzenie na działający sklep Next.js: redakcyjne sekcje strony głównej, siatkę listy produktów i układ strony produktu – wszystko renderowane na serwerze i responsywne na każdym urządzeniu.
