Три мови на сайті за 1 день через vibe-coding
Контекст
Ринок агентства — не лише одна мова: частині клієнтів комфортніше читати українською чи англійською. Довгі переклади «потім» відкладаються нескінченно, тому ми заклали мультимовність у першу версію лендингу й вклалися в короткий спринт. Обмеження було простим: без CMS на старті, тексти в репозиторії, передбачувані URL для SEO й реклами.
Підхід
Ми обрали JSON-словники за локаллю й єдиний тип Dictionary у TypeScript, щоб IDE підказувала ключі й не було друкарських помилок у продакшені. Структура сторінок — сегмент [locale] в App Router, список локалей у config, перевірка isLocale на вході. Для дефолтної російської версії URL без префікса /ru, для ua та en — префікси в шляху — це відповідає очікуванням користувачів і спрощує шаринг посилань.
Middleware вирішує дві задачі: нормалізує запити без префікса до внутрішнього ru і віддає заголовок з локаллю для HTML-атрибута lang. Перемикач мови будує шлях через helper localizedPath, щоб не дублювати логіку в кнопках.
Що прискорило «vibe-coding»
По-перше, жорстка дисципліна: один джерело правди для текстів, без копіпасти секцій між файлами. По-друге, автоматизація рутини — генерація метаданих і sitemap з тих самих локалей, щоб не забути альтернативні мови. По-третє, узгоджені компоненти: DictionaryProvider на клієнті для header і CTA, серверні сторінки для SEO-тексту.
Обмеження
Статичні JSON не підходять для частих правок без деплою — для блогу й контенту ми додаємо MDX у репо, а для великого редакційного процесу пізніше можна підключити CMS. Але для лендингу агентства зв’язка «код + словники» виявилася швидшою за інтеграцію headless CMS на першому етапі.
Підсумок
Три мови за день — не про магію, а про заздалегідь обрані патерни й відсутність спірних абстракцій. Наступний крок — наповнити блог кейсами на всіх локалях у міру готовності перекладів.
Хочете такого ж підходу до локалізації? Забронюйте стратегічний розбір — розберемо ваш стек і пріоритети.
