2024
Next.js
WordPress
Multilingual

WEB DEVELOPMENT / WIELOJĘZYCZNE PUBLIKOWANIE

Ekosystem Trans.info

Produkty redakcyjne dla europejskiej logistyki

10+
Wersji językowych
Next.js
Frontend
WordPress
Publikowanie
Europa
Rynek
Ciągłość produktu i modernizacja działającej publikacji

Dołączyłem do pracy przy Trans.info podczas krytycznej zmiany zespołu i pomogłem utrzymać duży europejski portal logistyczny w ruchu, gdy zmieniała się jego technologia i kierunek wizualny.

Praca wyszła poza utrzymanie: objęła migrację Next.js, redesign, nowe rynki językowe, analitykę, reklamy i dalszy rozwój innych serwisów Trans.eu. Frontend działał obok WordPressa, Elasticsearcha i procesów redakcyjnych, więc każda zmiana miała więcej niż jedną granicę techniczną.

To nie był projekt greenfield. Najważniejszą umiejętnością było rozpoznanie, co trzeba zmienić, co można odłożyć, a co musi pozostać działające dla redakcji, czytelników, wyszukiwarek i reklamy.

CIĄGŁOŚĆ

Działająca publikacja nie może zatrzymać się na czas przepisywania

Redakcja, czytelnicy, wyszukiwarki i reklamy nadal zależą od platformy, kiedy pod spodem zachodzą zmiany inżynierskie. Migracja musiała zachować publikowanie i pomiar, zamiast traktować system jak pusty projekt.

  • Wsparcie istniejącej pracy redakcyjnej
  • Dokończenie wybranego zakresu migracji
  • Zachowanie wielojęzycznych URL-i i relacji treści

MIGRACJA

Stan docelowy nie wystarcza bez planu przejściowego

Kiedy dołączyłem do projektu, migracja z Next.js 12 do 14 była już rozpoczęta, ale do końca było daleko. W idealnych warunkach kolejne strony i endpointy przenosilibyśmy stopniowo z Pages Routera do App Routera. Ta decyzja nie została jednak podjęta na początku, co zwiększyło koszt późniejszego porządkowania zakresu.

Dzięki alignmentowi i wspólnej pracy ograniczyliśmy migrację: część funkcji została tymczasowo wycięta, żeby dokończyć podstawę, a następnie zrealizować je osobno. Z perspektywy zarządzania był to mismanagement, a nie dowód, że migracja etapowa jest niemożliwa. Developer musi mieć przestrzeń, żeby przedstawić odważniejszą, mniejszą i odwracalną opcję — także wtedy, gdy wymaga ona dodatkowych adapterów, pomiaru i równoległego utrzymania.

  • Pages Router i App Router jako osobne granice migracji
  • Mniejszy zakres zamiast udawania kompletnego przepisania
  • Wspólne decyzje, które pozwalają bezpiecznie domknąć etap

WYDAJNOŚĆ

Szybki frontend wymaga współpracy z warstwą treści

Po wdrożeniu pierwszych wersji optymalizację grafik przenieśliśmy do WordPressa, a później poprawiliśmy ich przekazywanie przez Next.js. Pamięć podręczna działała wielopoziomowo: po stronie WordPressa, Elasticsearcha i Next.js. Większość rozwiązania była plikowa, bo rozbudowa stosu byłaby zbyt kosztowna i niedopuszczona w tym środowisku.

Dopiero po około dwóch latach pojawił się problem z niektórymi statusami wpisów, które nie odświeżały się wystarczająco szybko. Dodaliśmy mechanizmy wymuszonego odświeżania konkretnych danych. To nie przekreślało cache — pokazało, że wydajność musi mieć zaprojektowaną drogę powrotu do aktualnego stanu.

  • Optymalizacja grafik poza serwerem Next.js
  • Warstwy WordPress, Elasticsearch i Next.js
  • Rewalidacja jako część utrzymania, nie awaryjny dodatek

ODBIORCY

Widok desktopowy nie opisuje całego produktu

Przy prototypach widoków zdarzało się, że projektowano tylko szeroki ekran. Zwracałem uwagę, że wersja mobilna jest częścią produktu, szczególnie gdy ruch z Google Discover potrafił dawać jej zaskakująco dobre rezultaty. Nie traktuję tego jako statystyki dla każdego serwisu, tylko jako lekcję: sprawdzaj własnych odbiorców, zanim uznasz desktop za domyślny przypadek.

EKSPANSJA

Nowe rynki potrzebują więcej niż tłumaczenia etykiet

Wersje hiszpańska, włoska i francuska wymagały współpracy pipeline'ów treści, konfiguracji WordPressa, routingu frontendu, analityki i monetyzacji. PolyTrans stał się częścią tej infrastruktury wydawniczej.

DALSZA PRACA

Współpraca rozszerzyła się na cały ekosystem

Praca była kontynuowana przy serwisach WordPress, implementacji designu, analityce i innych inicjatywach technologicznych Trans.eu. Dłuższy kontekst pozwala zmieniać pojedyncze elementy bez utraty obrazu całego systemu wydawniczego.

Obszary odpowiedzialności

Modernizacja Next.js

Praca frontendowa i ograniczanie zakresu migracji na działającej platformie.

Planowanie etapów

Rozdzielenie zmian na granice, które można obserwować, domknąć i w razie potrzeby wycofać.

Warstwy cache

Optymalizacja grafik, przekazywanie przez Next.js i pamięć podręczna w kilku warstwach.

Ekspansja rynkowa

Wersje językowe połączone z publikowaniem, routingiem i monetyzacją.

Pomiar i odbiorcy

Analityka, reklamy i sprawdzanie doświadczenia mobilnego w realnym ruchu.

Czy Trans.info było projektem greenfield?

Nie. Praca odbywała się wewnątrz ustalonej, wielojęzycznej publikacji z aktywnymi wymaganiami redakcyjnymi, wyszukiwarkowymi i reklamowymi.

Jak PolyTrans wiąże się z Trans.info?

PolyTrans wspiera część wielojęzycznego procesu wydawniczego, a szersza praca przy Trans.info obejmuje również frontend, platformę, analitykę i design.

Czy migracja Next.js została zaplanowana etapami od początku?

Nie. Projekt był już w trakcie migracji z Next.js 12 do 14, gdy do niego dołączyłem. Później ograniczyliśmy zakres, wycinając część funkcji do osobnej realizacji. Lekcja dotyczy zarządzania migracją: etapowy wariant powinien zostać nazwany i rozważony wcześniej.

Dlaczego szybki cache wymagał później rewalidacji?

Treści były przechowywane w kilku warstwach, głównie plikowo. Po około dwóch latach niektóre zmiany statusów wpisów nie odświeżały się wystarczająco szybko, więc dodaliśmy możliwość wymuszenia odświeżenia konkretnych danych.

BAZA WIEDZY

Powiązane artykuły

MODERNIZACJA PLATFORMY

Działający produkt musi się zmienić bez zatrzymania?

Możemy oddzielić to, co musi pozostać stabilne, od tego, co warto zastąpić, a następnie dostarczać migrację użytecznymi etapami.

Porozmawiajmy o platformie