Перейти к содержимому
Антон ГончаровРазработчик ИИ-систем
RUEN

Сайт на Next.js · ИИ-перевод, SEO по языкам

Экспортный сайт на четырёх языках

Машинный перевод экспортного сайта ошибается предсказуемо: марка «Белуха» превращается в «белугу», крем-мёд — в крем для лица, а в описание пролезает «лечебный», за что на рынке ОАЭ или Китая снимут карточку. Здесь черновик нейросети не публикуется сразу: студия сверяет его с глоссарием, числами из оригинала, лимитами длины для поисковиков и списком запрещённых обещаний, исправляет всё однозначное сама и оставляет человеку только спорное. Покупатель из Дубая видит сайт справа налево, цены в дирхамах и сроки доставки морем, а менеджер получает заявку на русском со сводкой.

Сценарий: Медовая компания «Белуха» из Барнаула — вымышленная: шесть продуктов (мёд, крем-мёд, иван-чай, кедровый орех), отгрузки в Китай, Среднюю Азию, Монголию, ОАЭ, Саудовскую Аравию и Турцию.

Скриншот демо: Экспортный сайт на четырёх языках

Открыть демо

Открыть сайт

Язык выберется по настройкам браузера; студия перевода — ссылка в подвале сайта.

Заявки с демо-сайта видны только вам, в «Панели владельца»: сервер проверяет форму и ничего не хранит.

Что показывает демо

  • Четыре языка, включая арабский справа налево: свои шрифты, валюта, формат чисел и переведённые адреса страниц — /zh/chanpin, /ar/muntajat

  • Язык при первом заходе выбирается по настройкам браузера, выбор запоминается; если язык браузера другой — ненавязчивое предложение переключиться

  • SEO по языкам: hreflang и x-default на каждой странице и в sitemap, отдельные заголовки и описания, микроразметка Product и Organization

  • Калькулятор оптовой цены: продукт, фасовка, объём со скидкой, условия EXW, FCA или DAP, город доставки со сроком и любая из четырёх валют

  • Карта отгрузок: железная дорога в Китай, авто в Среднюю Азию, море через Новороссийск — со сроками по каждому направлению

  • Запрос цены и образцов из любой страны: международный телефон, проверка полей на языке посетителя ещё до отправки, параметры из калькулятора подставляются сами

  • Заявка приходит менеджеру на русском со сводкой: страна, продукт, объём, условия и язык, на котором клиент смотрел сайт

  • Студия перевода: глоссарий с типичными ошибками машинного перевода, проверка терминов, чисел (включая арабские цифры), длины заголовков, кириллицы и пунктуации

  • Автоисправление однозначного и утверждение перевода только после всех проверок; свой термин в глоссарии сразу начинает проверяться

  • Вкладка «SEO по языкам»: длина заголовков с учётом лимитов для иероглифов, сниппет в выдаче и готовый блок hreflang

Как попробовать

  1. Откройте на другом языке

    Переключите язык в шапке на 中文 или العربية: адрес страницы тоже переведётся, а арабская версия развернётся справа налево.

  2. Посчитайте поставку

    В калькуляторе выберите крем-мёд, 5 000 кг и DAP Дубай — увидите скидку за объём, доставку и срок. Нажмите «Запросить точную цену».

  3. Отправьте запрос

    Параметры из калькулятора уже в форме. Оставьте почту пустой — ошибка появится на языке страницы ещё до отправки.

  4. Проверьте перевод

    В подвале откройте «Студию перевода»: китайский черновик называет марку «белугой». Нажмите «Исправить автоматически», потом «Утвердить».

  5. Откройте панель владельца

    Заявка лежит во вкладке «Заявки» на русском — со страной, объёмом, условиями поставки и языком сайта.

Без платных нейросетей

Платных запросов к нейросетям нет: черновики перевода в студии заготовлены заранее, а проверки и автоисправление настоящие и работают в браузере. В продакшене черновик пишет языковая модель с глоссарием в запросе. Формы проверяются на сервере, но ничего не хранится: заявка возвращается в ваш браузер и видна только вам в «Панели владельца». Компания, цены и курсы валют — вымышленные.

Демо работает без API-ключей OpenAI, YandexGPT или GigaChat. Там, где рабочая система обращается к модели, стоит локальная заглушка с тем же интерфейсом — поэтому демо бесплатно, всегда доступно и ничего не выдумывает.

Что будет в рабочем проекте

  • Перевод языковой моделью (YandexGPT, GPT или DeepL) с глоссарием и памятью переводов в запросе; новые страницы переводятся при публикации
  • Проверки перед публикацией в CMS: тот же набор правил плюс вычитка носителем для спорных случаев
  • Курсы валют ЦБ и ставки перевозчиков — по расписанию, цены в калькуляторе всегда актуальные
  • Заявки в amoCRM или Битрикс24 с переводом сообщения клиента на русский, ответ менеджера — обратно на язык клиента
  • Поисковые системы по рынкам: Яндекс и Google, Baidu для Китая, отдельные счётчики и цели по языковым версиям

Стек

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • Server Actions

Основано на

Книги и дисциплины, идеи из которых работают в этом демо.

  • Книга · Джон Литтл

    Внутренний воин

    Сайт меняет форму под язык: четыре языка, включая арабский справа налево, со своими шрифтами, валютой и адресами страниц.

Комментарий от разработчика

Антон Гончаров

Разработчик ИИ-систем · Python

Для бизнеса

  • Иностранный закупщик видит сайт на своём языке, в своей валюте и со сроками доставки до своего города — и отправляет запрос, а не уходит к конкуренту с понятным сайтом.
  • Ошибки машинного перевода ловятся до публикации: марка не превращается в «белугу», а запрещённые для еды обещания не попадают на рынки ОАЭ и Китая.
  • Менеджер получает заявку на русском со всеми параметрами поставки и не переписывается три дня, уточняя объём и условия.

Для разработчиков

  • Корневой layout живёт в сегменте [lang]: у каждой версии свои lang и dir, шрифты для иероглифов и арабского грузятся только на своих страницах; адреса разделов и товаров переведены и сопоставляются через словарь.
  • Язык при первом заходе выбирает proxy.ts по cookie и Accept-Language; метаданные с hreflang и sitemap собираются из одного модуля SEO-данных.
  • Проверки перевода — чистые функции с тестами: глоссарий, нормализация чисел из разных систем записи, лимиты длины, запрещённые обещания, автоисправление однозначных ошибок.

Советы

  • Совет 01

    Переводите адреса страниц и связывайте версии через hreflang — иначе поисковик покажет китайцу английскую страницу или склеит версии как дубли.

  • Совет 02

    Держите глоссарий марки и терминов с первого дня: нейросеть переводит хорошо, но каждый раз по-разному.

Нужен такой же для вашего бизнеса?

Расскажите о задаче — отвечу, что из демо подойдёт вам, сколько это займёт и что понадобится с вашей стороны.

Написать в TelegramОставить заявку

Другие демо в этом разделе

Все демо

  • Сайт на Next.js · лендинг услуги

    работает

    Лендинг стоматологии

    Одностраничный сайт клиники, который приводит пациентов: квиз подбирает лечение, калькулятор считает план с рассрочкой, онлайн-запись показывает свободное время врачей, ИИ-консультант отвечает по прайсу. Заголовок проверяется A/B-тестом, заявки и цели видны в панели владельца.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · B2B, многостраничный

    работает

    Сайт производственной компании

    Многостраничный сайт завода металлоконструкций, который продаёт сам: калькулятор считает стоимость здания с живым чертежом, конструктор собирает техзадание, кейсы фильтруются по отрасли, на вакансии можно откликнуться с резюме, а поиск по сайту понимает запросы своими словами.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · каталог, карта, сравнение

    работает

    Каталог недвижимости с умным поиском

    Каталог квартир агентства недвижимости: напишите «двушка у метро до 12 млн» — поиск сам выставит фильтры, покажет квартиры на карте города, сравнит до четырёх и пришлёт новые в Telegram.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · кабинет, ИИ-помощник, Telegram

    работает

    Личный кабинет клиента

    Кабинет клиента типографии: заказы с этапами производства, согласование макета с правками прямо на макете, счета с оплатой по СБП, документы с электронной подписью, новый заказ с расчётом цены, чат с ИИ-помощником и менеджером, уведомления в Telegram.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · Python в браузере, ИИ-наставник

    работает

    Онлайн-школа с кабинетом ученика

    Онлайн-школа аналитики: лендинг с задачей на Python, которая проверяется прямо в браузере, тест уровня с персональной программой, рассрочка с расчётом налогового вычета, кабинет ученика с домашними заданиями и ИИ-ревью, ИИ-наставник по материалам курса и сертификат с проверкой по QR-коду.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · запись по госномеру, фотоотчёт, согласование

    работает

    Автосервис с записью и статусом ремонта

    Сайт автосервиса: запись по госномеру или VIN в свободные окна постов, разбор «что стучит?» с вероятными причинами и вилкой цены, статус ремонта с фотоотчётом, согласованием доп. работ и оплатой по ссылке, гараж с историей обслуживания и прогнозом следующего ТО.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · разбор ситуации, претензии, калькуляторы

    работает

    Юридическая компания с ИИ-разбором

    Сайт юрфирмы: ситуация своими словами прямо в шапке, ИИ-разбор с оценкой перспектив, претензия в Word, госпошлина, неустойка и срок давности, чек-лист документов, ход дела в личном кабинете, конструктор цены и запись к юристу.

    • Next.js
    • React
    • TypeScript

  • Сайт SaaS на Next.js · песочница, кабинет, API

    работает

    SaaS: ИИ-ответы на отзывы WB и Ozon

    Сайт и кабинет SaaS-сервиса, который отвечает на отзывы Wildberries и Ozon: песочница с разбором отзыва и проверками, автопилот по рейтингу, очередь с согласованием, аналитика тем, тарифы с калькулятором окупаемости, подключение магазина по ключу, счёт по ИНН и документация API с живой консолью.

    • Next.js
    • React
    • TypeScript

  • Сайт ресторана на Next.js · меню, бронь, доставка

    работает

    Ресторан с доставкой

    Сайт ресторана с доставкой: меню с фильтрами по аллергенам и диетам, ИИ-подбор ужина по обычной фразе, бронь стола по схеме зала со свободными столами на выбранное время, корзина с зонами доставки, минимальным заказом и промокодами, отслеживание заказа с курьером на карте.

    • Next.js
    • React
    • TypeScript

  • Сайт фитнес-студии на Next.js · запись, абонементы, кабинет

    работает

    Фитнес-студия

    Сайт фитнес-студии малых групп: расписание на неделю с местами и записью в два клика, лист ожидания с автоматическим переносом в группу, абонементы с заморозкой из кабинета, ИИ-план тренировок на 4 недели по пяти вопросам и личный кабинет со статистикой посещений.

    • Next.js
    • React
    • TypeScript

  • Сайт IT-конференции на Next.js · программа, билеты, нетворкинг

    работает

    Сайт конференции

    Сайт двухдневной конференции: программа по залам и трекам с личным расписанием, ИИ-подбор докладов без пересечений по роли и свободному тексту, билеты волнами с промокодами и скидкой команде, QR-код на каждого участника с проверкой на входе и нетворкинг с подбором собеседников и встречами в перерывах.

    • Next.js
    • React
    • TypeScript

  • Корпоративный сайт логистики на Next.js · калькулятор, трекинг, ИИ-заявка

    работает

    Сайт транспортной компании

    Корпоративный сайт транспортной компании: калькулятор, который сразу сравнивает сборный груз и отдельную машину, отслеживание груза с машиной на карте, ИИ-разбор заявки из письма или накладной с подсветкой пропущенных полей, карта складов и терминалов с расчётом хранения, анкета перевозчика с проверкой допуска и реквизиты с проверкой контрольных сумм.

    • Next.js
    • React
    • TypeScript