Как мы с нуля сделали многоязычный сайт на Next.js с оплатой через Stripe, а потом вернулись на проект на второй этап
Клиент делает суперапп под брендом известного футбольного клуба. Его разрабатывает партнёр клуба, который получил права на приложение. В одном продукте собраны четыре направления:
Фортех отвечал за веб. Наш фронтенд-разработчик подключился к команде заказчика, где работали техлид, бэкенд-разработчики, DevOps-инженеры, QA, аналитик и дизайнер. Первый этап длился около пяти месяцев и закончился летом 2025 года, когда у заказчика освободились штатные разработчики. В конце августа 2025 года заказчик возобновил работы над вебом и снова позвал Фортех, второй этап шёл два с половиной месяца.
Сделать с нуля веб-платформу, где болельщик покупает eSIM для нужной страны или региона: выбирает тарифный план, оплачивает онлайн и активирует связь. Кроме покупки, на сайте нужны были:
Проект начинался с чистого листа. Не было ни технического задания, ни полного макета, только несколько базовых компонентов. Интерфейс верстали по черновому дизайну и уточняли по ходу работы.
Требования менялись быстро: правки в один и тот же компонент могли приходить несколько раз за день.
Бэкенд отдал рабочие методы API за пару дней до запланированного релиза. Фронтенд к этому моменту должен был быть готов целиком, чтобы осталось только подключить данные.
Пакеты eSIM бэкенд отдавал по названию страны или региона, а не по идентификатору. Когда на сайте включили переводы, названия стали приходить на разных языках, и пакеты перестали находиться.
Next.js и два режима рендеринга. Сайт собрали на Next.js: информационные страницы генерируются статически и хорошо индексируются, а покупка eSIM работает как одностраничное приложение. На втором этапе для критически важных страниц добавили серверный рендеринг.
Единая тема интерфейса. Стили построены на теме Material UI: цвета, шрифты и отступы берутся из неё, поэтому частые правки дизайна не расползаются по компонентам. Код проверяют ESLint, Stylelint и Prettier, перед каждым коммитом срабатывают husky и lint-staged.
Покупка и оплата. Каталог тарифов и активация eSIM работают через методы провайдера Zetexa, оплата через Stripe. На втором этапе сайт научился корректно вести себя, когда Zetexa недоступна.
Многоязычность. Переводы подключены через i18next. На старте сайт работал на английском, испанском и каталонском, позже языков стало больше пяти. Чтобы пакеты eSIM не терялись при переводе названий, фронтенд сопоставляет их по идентификаторам.
Поддержка и аналитика. В чат встроен ИИ-бот для ответов клиентам. Подключены Google Analytics, Google Tag Manager, Amplitude для пользовательских событий и Sentry для ошибок. Согласие на cookies собирает Klaro, формы построены на React Hook Form.
Второй этап. Заказчик вернулся с бэклогом: новая структура адресов, где вместо «тарифов» стоит eSIM и название страны, региональная версия сайта /es, вход через соцсети, доработка QR-кода для веба, обновлённый раздел FAQ. Отдельным блоком шли ошибки локализации: длинные японские строки в поиске, непереведённые тексты на экране оплаты и в Terms of Use, сбой кодировки при загрузке переводов. Параллельно мы рефакторили UI-компоненты, настраивали серверный рендеринг и SEO и регулярно проводили код-ревью.
Основную часть сайта со всеми запланированными интеграциями собрали за первый месяц и вышли в релиз в срок. API бэкенда при этом появилось всего за пару дней до него.
Болельщик выбирает eSIM для своей страны или региона, оплачивает онлайн и получает ответы бота в чате. Сайт доступен на нескольких языках, информационные страницы индексируются, а ошибки и действия пользователей видны в Sentry и Amplitude.
После паузы заказчик вернулся к вебу и снова пригласил Фортех. На втором этапе мы разбирали бэклог, исправляли ошибки локализации и переводили важные страницы на серверный рендеринг.
Можно ли совместить SEO и интерактивную покупку в одном приложении?
Да. В Next.js информационные страницы отдаются статикой или рендерятся на сервере и индексируются, а сценарий покупки работает как обычное веб-приложение. Держать два отдельных сайта не нужно.
Как сделать сайт на нескольких языках и не сломать каталог?
Переводы подключаются через i18next, а товары и тарифы связываются по идентификаторам, а не по названиям. Иначе после перевода названий каталог перестаёт находить нужные позиции.
Что делать, если бэкенд не готов к релизу?
Собирать интерфейс заранее, а подключение данных оставлять последним шагом. На этом проекте интерфейс был готов к моменту, когда появилось API, поэтому его подключили за пару дней и вышли в релиз в срок.
Сколько длилась работа над веб-версией суперапп?
Около пяти месяцев на первом этапе в 2025 году и ещё два с половиной месяца на втором.
Как мы делали защищённый вход, регистрацию сотрудников и визуальный конструктор бизнес-процессов для финтех-сервиса
Как мы за пять месяцев собрали ядро магазина на NestJS: гибкие цены для трёх типов клиентов, обмен с 1С без дублей и поиск с русской морфологией
NFT-экосистема на блокчейне Solana с маркетплейсами, игровыми проектами и витринами для брендов и авторов
Как мы искали узкие места в каталоге на Strapi, наладили синхронизацию характеристик с 1С и проверяли, откуда в категориях берутся чужие бренды
