Як додати кілька мов до вашого застосунку або сайту

Щоб додати кілька мов до застосунку, перенесіть увесь текст інтерфейсу у файли перекладів (по одному на кожну мову), завантажуйте їх за допомогою бібліотеки i18n і додайте перемикач мови, який запам'ятовує вибір. Для публічних сторінок, які мають знаходитися в пошуку, дайте кожній мові власний URL, наприклад /fr/, і пов'яжіть версії тегами hreflang. Потім опрацюйте те, що часто забувають: дати, числа та валюти, довший текст в одних мовах, письмо справа наліво та контент, який зберігається у вашій базі даних.

Терміни, які ви почуєте

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

Зробіть i18n один раз — і додавання кожної нової мови стане переважно роботою з перекладом.

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

Для більшості застосунків основою є стандартна бібліотека i18n з файлами перекладів. За бажанням створіть чернетки перекладу машинним або ШІ-перекладом, а потім перегляньте з носіями мови те, що найчастіше бачать клієнти.

Частини багатомовного застосунку

Файли перекладів

Замість <h1>Welcome back</h1> у коді пишеться t('dashboard.welcome'), а кожна локаль має файл із текстом:

{
  "dashboard": {
    "welcome": "Welcome back, {{name}}",
    "items_one": "{{count}} item",
    "items_other": "{{count}} items"
  }
}

Для змінних використовуйте плейсхолдери, а не склеюйте фрагменти речень, бо порядок слів відрізняється між мовами. І застосовуйте правила множини бібліотеки: в англійській є дві форми (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 з namespace-ключами, використовуй інтерполяцію і правила множини замість склеювання рядків, а дати, числа та ціни форматуй через Intl з поточною локаллю. Поки що не змінюй жодного формулювання.

Додай французьку та німецьку. Публічні маркетингові сторінки отримують префікси /fr/ і /de/ з англійською в корені, 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, що зберігається в налаштуваннях проєкту (змінні середовища та секрети); як використовувати API LLM пояснює витрати. Опублікуйте знову, коли нові мови будуть готові.

Запитання