Огляд
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 на PostgreSQL: сім сервісних сторінок на одному шаблоні, кожне поле двомовне й редаговане клієнтом
- 100/100 за Best Practices і SEO, 97 за доступністю — HSTS, гранульована cookie-згода, контраст за WCAG 2.2 перевірений в обох темах
Результат
П'ятнадцять двомовних маршрутів за один тиждень. На живому сайті Google PageSpeed показує 100 / 100 / 100 / 100 на комп'ютері та 99 продуктивності, 97 доступності, 100 best practices, 100 SEO на мобільному (заміряно 10 серпня 2026) — усі Core Web Vitals у «зеленій» зоні із запасом. Усі п'ятнадцять маршрутів у sitemap з hreflang uk/en, кожен має власну згенеровану картку прев'ю, і команда BEKAS редагує їх усі з Payload CMS, не торкаючись коду. Слайдер «до/після» вище показує, що змінилося візуально. Цифри показують, що змінилося під капотом.
