E-commerce · migracja na Next.js
lululemon UAE: migracja sklepu z Angulara na Next.js
lululemon 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. W katalogu mody opartym na wyborze koloru, rozmiaru i kroju lululemon UAE potrzebowało pełnej kontroli nad renderowaniem i ścieżką produktu, przy zachowaniu SAP Commerce Cloud jako zaplecza.
Budujemy szybszą przyszłość dla lululemon 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 lululemon 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
Renderowanie po stronie serwera i routing
React JS
Interfejs oparty na komponentach
TypeScript
Typowany, łatwy w utrzymaniu kod
Redux
Przewidywalne zarządzanie stanem
Handel i integracje
SAP Commerce APIs
Katalog, koszyk i zamówienie
SmartEdit
Wizualne zarządzanie treścią
checkout.com
Płatności
OAuth
Bezpieczne uwierzytelnianie
Znaczniki i style
HTML5
Semantyczny, dostępny kod HTML
SCSS
Modularne style
Tailwind
CSS w podejściu utility-first
Zaangażowanie i bezpieczeństwo
Braze
Zaangażowanie klientów
GA4
Analityka i zdarzenia
Veracode
Skanowanie bezpieczeństwa
Sklep lululemon 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: czerwiec 2026 – listopad 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.02
Cumulative Layout Shift (CLS)
Dane laboratoryjne działającego sklepu (mobile), zmierzone Lighthouse 13.4 dnia 13 listopada 2026.
Najważniejsze widoki z przebudowy lululemon UAE
Bliższe spojrzenie na działający sklep Next.js: skróty do kategorii na stronie głównej i siatkę listy produktów – wszystko renderowane na serwerze i responsywne na każdym urządzeniu.
