Как добавить несколько языков в приложение или сайт

Чтобы добавить несколько языков в приложение, вынесите весь текст интерфейса в файлы переводов (по одному на каждый язык), подключите библиотеку i18n и добавьте переключатель языка, который запоминает выбор. Для публичных страниц, которые должны находиться в поиске, дайте каждому языку собственный URL, например /fr/, и свяжите версии тегами hreflang. Затем займитесь тем, что обычно упускают: датами, числами и валютами, более длинным текстом в некоторых языках, письмом справа налево и контентом в базе данных.

Термины, которые вы будете встречать

• Интернационализация (i18n): подготовка кода к поддержке любого языка — никаких жёстко заданных строк, форматирование с учётом региона, гибкая верстка. Цифры «18» означают количество букв между i и n.
• Локализация (l10n): адаптация приложения под конкретный язык или рынок — в основном перевод, иногда также валюта, изображения и юридические тексты.
• Локаль: язык и, при необходимости, регион, например en-GB или pt-BR.

Сделайте i18n один раз, и добавление каждого нового языка станет в основном работой переводчика.

Варианты и компромиссы

Для большинства приложений хорошая основа — стандартная библиотека i18n с файлами переводов. Черновики можно сделать машинным или ИИ-переводом, а затем показать носителю языка то, что клиенты видят чаще всего.

Части многоязычного приложения

Файлы переводов

Вместо <h1>Welcome back</h1> в коде пишется t('dashboard.welcome'), а в файле каждой локали лежит текст:

{
  "dashboard": {
    "welcome": "С возвращением, {{name}}",
    "items_one": "{{count}} элемент",
    "items_few": "{{count}} элемента",
    "items_many": "{{count}} элементов"
  }
}

Для переменных используйте плейсхолдеры, а не склеивание фрагментов предложения: порядок слов в разных языках различается. И используйте правила множественного числа библиотеки: в английском две формы (1 item, 2 items), а в русском их три, в других языках — четыре и больше.

Форматирование дат, чисел и денег

Не форматируйте их вручную. Встроенный в браузер API Intl форматирует под любую локаль: 1,234.5 в английском становится 1.234,5 в немецком; даты переключаются между порядком «день — месяц» и «месяц — день»; знак валюты меняет положение. Храните даты в UTC, а деньги — как числа с кодом валюты, и форматируйте только для показа.

Верстка, которая растягивается

Переведённый текст часто длиннее английского — особенно немецкий и финский. Избегайте кнопок фиксированной ширины и обрезанных подписей, проверяйте на самом длинном языке.

Языки, которые пишутся справа налево

Арабский, иврит, персидский и урду пишутся справа налево. Для этих локалей установите на странице dir="rtl" и используйте логические CSS-свойства (margin-inline-start вместо margin-left; в Tailwind — ms-4 вместо ml-4), чтобы верстка зеркалилась сама. Иконки, подразумевающие направление, например стрелки, тоже нужно отразить.

Переключатель языка и определение

Показывайте переключатель на каждой странице с названием каждого языка на нём самом («Deutsch», «Français», «العربية»), а не флагами: флаги обозначают страны, а не языки. При первом визите определите предпочитаемый язык браузера, чтобы предложить версию, но явный выбор посетителя важнее, и его нужно запомнить.

URL и SEO

Для страниц, которые должны попадать в результаты поиска, каждому языку нужен собственный URL. По состоянию на сентябрь 2026 года рекомендации Google для многоязычных сайтов такие:

• Отдельные URL для каждого языка — самый простой вариант — подкаталоги (example.com/fr/); поддомены и доменные зоны стран тоже работают. Параметры в URL (?lang=fr) не рекомендуются.
• Не переключайте язык только через cookie или настройки браузера: краулер Google может так и не увидеть другие версии.
• Не делайте автоматических редиректов по языку; вместо этого ссылайтесь между версиями.
• Используйте hreflang, чтобы сообщить Google, какие страницы являются переводами друг друга. Каждая версия должна указывать саму себя и все остальные, иначе аннотации могут быть проигнорированы. Добавьте x-default для страницы по умолчанию.
• Google определяет язык страницы по видимому содержимому, а не по lang или hreflang, поэтому переводите всю страницу, а не только меню.

Всё равно указывайте <html lang="fr"> для каждой версии: по этому атрибуту программы чтения с экрана выбирают правильное произношение, а это требование доступности.

Экраны залогиненных пользователей в приложении не нужно индексировать, поэтому для них достаточно хранить язык в профиле пользователя. О том, как добиться, чтобы публичные страницы вообще сканировались, см. SEO для сайтов, созданных с ИИ.

Контент в базе данных

Текст интерфейса хранится в файлах, а контент — названия товаров, посты блога, категории — в базе данных. Два распространённых подхода:

• Таблица переводов: product_translations (product_id, locale, name, description). Аккуратно и масштабируется на много языков.
• JSON-колонка для каждого поля: name: {"en": "...", "fr": "..."}. Проще, если языков немного.

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

Письма и уведомления

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

Промпты, которые работают

Добавь интернационализацию с react-i18next. Вынеси каждую строку, которую видит пользователь, в locales/en.json с именованными ключами, используй подстановки и правила множественного числа вместо склеивания строк, а даты, числа и цены форматируй через Intl с текущей локалью. Пока не меняй формулировки.

Добавь французский и немецкий. Публичные маркетинговые страницы получают префиксы URL /fr/ и /de/, English остаётся в корне; hreflang-ссылки на каждой странице (включая ссылку на себя и x-default); html lang задаётся для каждой страницы. Добавь переключатель языка с родными названиями. Для залогиненных страниц сохраняй язык в профиле пользователя.

Добавь арабский с поддержкой письма справа налево: задай dir="rtl" для арабского, замени левые и правые отступы логическими свойствами, отрази направленные иконки и проверь, что формы и таблицы читаются правильно.

Пошагово

1. Выберите первый дополнительный язык исходя из реального спроса — там, где находятся ваши посетители или клиенты.
2. Сделайте код интернационализированным: вынесите строки в файлы, добавьте множественные числа и форматирование через Intl. Выпустите это только с английским и проверьте, что ничего не изменилось.
3. Определите структуру URL для публичных страниц и добавьте hreflang.
4. Переведите: сделайте черновик машинным или ИИ-переводом, затем проверьте с носителем языка. Дайте переводчикам контекст: слово «Book» на одном экране существительное, а на другом глагол.
5. Переведите контент из базы данных и настройте запасные варианты.
6. Локализуйте остальное: письма, сообщения об ошибках, юридические страницы, изображения с текстом.
7. Проверьте каждый язык на ширине телефона, а при необходимости — справа налево.
8. Настройте процесс, чтобы новые функции выходили сразу с переводами, а не через несколько месяцев.

Частые ошибки

• Склеивание предложений ("You have " + n + " messages"), которое ломается в других языках.
• Жёстко заданный текст в компонентах, сообщения об ошибках и строки валидации.
• Ручное форматирование дат и цен.
• Флаги вместо языков и автоматические редиректы, которые загоняют людей в не ту версию.
• Один URL для всех языков на страницах, которые нужно индексировать.
• Отсутствие обратных ссылок hreflang, из-за которых Google игнорирует аннотации.
• Перевод интерфейса без контента или наоборот.
• Непроверенный машинный перевод на страницах с ценами, юридическими текстами и оплатой.

Чек-лист многоязычности

• Нет жёстко заданных строк, которые видит пользователь; используются правила множественного числа и плейсхолдеры
• Даты, числа и валюты форматируются через Intl
• Переключатель языка с родными названиями на каждой странице; выбор запоминается
• Отдельные URL для каждого языка на публичных страницах; без принудительных редиректов
• hreflang на каждой версии, включая ссылку на себя и x-default
• html lang (и dir="rtl" где нужно) задан для каждой страницы
• Контент в базе переведён, с разумными запасными вариантами
• Письма и уведомления отправляются на языке пользователя
• Тексты для клиентов проверены носителем языка

Несколько языков в Mythex

В Mythex языки добавляются запросом в чате — отдельной панели переводов нет, поэтому промпты выше работают как есть. Сначала сделайте шаг интернационализации и проверьте его в Preview, прежде чем добавлять языки: это крупный рефакторинг, а контрольная точка в чате даёт возможность откатиться, если что-то сломалось (чат и контрольные точки). Если вы хотите, чтобы приложение автоматически переводило контент через ИИ или API перевода, понадобится ваш собственный API-ключ, сохранённый в настройках проекта (переменные окружения и секреты); расходы описаны в как использовать LLM API. Когда новые языки будут готовы, опубликуйте приложение снова.

Вопросы