Огляд
BEKAS LOGISTICS, митно-брокерська та експедиторська компанія з Києва, працює з 1998 року. За рік це понад 1 200 митних операцій і 9,9 млн кілограмів вантажів, а ще 150+ авто зі США щомісяця. Перший сайт компанії ми зробили у 2018 році на WordPress. У 2026-му перебудували його з нуля на Next.js 16, Payload CMS і PostgreSQL. Ідея нового сайту проста: брокер із досвідом із 1998 року, який працює як tech-компанія 2026-го.
Виклик
Старий сайт став проблемою. Шаблон рівня 2015 року зі стоковими фото, копірайт у футері завмер на «1998–2021», контент не оновлювався п'ять років. Конкуренти на українському ринку митних брокерів сидять на таких самих шаблонах, тому планку ми задавали за глобальними форвардерами: Flexport, Maersk, DSV. Аудиторія сайту, B2B-імпортери та автодилери, проводить день у дашбордах, тож повноцінна темна тема була базовою вимогою. Сайту потрібні сім напрямів послуг двома мовами, і клієнт мав зберегти повний контроль над кожним рядком тексту.
Рішення
Сайт працює на Next.js 16 з App Router. Кожна сторінка є React Server Component, тому весь текст, телефони й цифри (9 900 000 кг вантажів, 1 200 митних операцій) є в HTML ще до запуску JavaScript. Контент живе в Payload CMS на PostgreSQL. Клієнт редагує кожен рядок, ціну та пункт FAQ двома мовами без розробника.
Кожен із 15 маршрутів генерує власне Open Graph зображення через Next.js ImageResponse. Так з'явилися 30 унікальних карток 1200×630 на дві мови, зібраних із живих даних CMS замість ручного малювання. Посилання на будь-яку сервісну сторінку коректно розгортається в Telegram, Viber, LinkedIn і Messenger.
SEO налаштоване на рівні фреймворка. Є hreflang для uk та en з x-default і згенерований sitemap. У JSON-LD LocalBusiness стоїть на головній, а Service і BreadcrumbList на кожній сервісній сторінці. Дизайн-система живе в коді одним файлом токенів. Саме завдяки цьому три теми (світла, системна, темна) застосовуються до першого рендера без спалаху неправильних кольорів. Моушн обмежений однією сценою на сторінку, і кожна сцена спрощується до звичайного fade, якщо користувач увімкнув prefers-reduced-motion.
Ключові можливості
- PageSpeed 99 на мобільному і 100 на комп'ютері, заміряно на живому сайті: LCP 1,8 с і 0,5 с, CLS 0,018 і 0,004, TBT 50 мс і 0 мс.
- 30 Open Graph зображень генеруються з контенту CMS, по одному на кожен маршрут кожною мовою, без ручного етапу дизайну.
- Увесь текст сторінок, контакти й цифри є в серверному HTML, тож пошукові системи та AI-краулери читають сайт без виконання JavaScript.
- Кожен шаблон має структуровані дані: LocalBusiness, Service, BreadcrumbList і FAQ.
- Сім сервісних сторінок працюють на одному шаблоні в Payload CMS, і кожне поле двомовне та редагується клієнтом.
- Сайт має 100 за Best Practices і SEO та 97 за доступністю, з HSTS, гранульованою cookie-згодою і контрастом за WCAG 2.2, перевіреним в обох темах.
Результат
П'ятнадцять двомовних маршрутів вийшли за один тиждень. На живому сайті Google PageSpeed показує 100 в усіх чотирьох категоріях на комп'ютері. На мобільному це 99 за продуктивність, 97 за доступність, 100 за best practices і 100 за SEO (заміряно 10 серпня 2026). Усі Core Web Vitals у «зеленій» зоні із запасом. Усі п'ятнадцять маршрутів є в sitemap з hreflang uk та en, і кожен має власну картку прев'ю. Команда BEKAS редагує їх у Payload CMS, не торкаючись коду. Слайдер «до/після» вище показує, що змінилося візуально.
