Как да добавите няколко езика към вашето приложение или сайт

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

Термини, които ще чуете

• Интернационализация (i18n): подготовка на кода да поддържа всеки език — без твърдо записани низове, форматиране според локала и гъвкави оформления. Числото „18“ е броят на буквите между i и n.
• Локализация (l10n): адаптиране на приложението за даден език или пазар — най-вече превод, понякога и валута, изображения и правен текст.
• Локал (locale): език и, по избор, регион, например en-GB или pt-BR.

Направете i18n веднъж и добавянето на всеки нов език става предимно превод.

Подходи и компромиси

За повечето приложения стандартна i18n библиотека с преводни файлове е правилната основа. Направете чернови с машинен или AI превод, ако желаете, след което накарайте говорители с добро владеене да прегледат това, което клиентите виждат най-често.

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

Преводни файлове

Вместо <h1>Добре дошли отново</h1>, кодът пише t('dashboard.welcome'), а всеки локал има файл с текста:

{
  "dashboard": {
    "welcome": "Добре дошли отново, {{name}}",
    "items_one": "{{count}} елемент",
    "items_other": "{{count}} елемента"
  }
}

Използвайте placeholder-и за променливите, вместо да свързвате части от изречения — редът на думите се различава между езиците. И използвайте правилата за множествено число на библиотеката: в английския има две форми (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. Според указанията на Google за многоезични сайтове към септември 2026 г.:

• Отделни URL адреси за всеки език — поддиректориите (example.com/fr/) са най-простото решение; работят и поддомейни и държавни домейни. URL параметрите (?lang=fr) не се препоръчват.
• Не сменяйте езика само чрез бисквитка или настройка на браузъра; crawler-ът на Google може никога да не види другите версии.
• Не пренасочвайте автоматично по език; свържете версиите чрез връзки.
• Използвайте hreflang, за да кажете на Google кои страници са преводи една на друга. Всяка версия трябва да изброява себе си и всички останали, иначе анотациите може да бъдат игнорирани. Добавете x-default за резервната страница.
• Google определя езика на страницата от видимото съдържание, а не от lang или hreflang — затова преведете цялата страница, а не само менюто.

Все пак задайте <html lang="fr"> на всяка версия: екранните четци го използват, за да изберат правилното произношение, а това е изискване за достъпност.

Екраните на приложението след вход не е нужно да се индексират, затова за тях е достатъчно езикът да се съхранява в потребителския профил. Вижте SEO за сайтове, изградени с AI, за да стигнете до публичните страници с обхождане.

Съдържание в базата данни

Текстът на интерфейса е във файлове; съдържанието, като имена на продукти, блог публикации и категории, е в базата данни. Два често срещани модела:

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

Решете какво да става, когато липсва превод — обикновено се връща към езика по подразбиране, вместо да се показва празно място.

Имейли и известия

Съхранявайте езика на всеки потребител и го използвайте и за имейлите, известията и PDF файловете. Лесно е да преведете приложението и да забравите, че имейлът за добре дошли все още пристига на английски.

Подсказки, които работят

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

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

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

Стъпка по стъпка

1. Изберете първия допълнителен език според реалното търсене — къде са посетителите или клиентите ви.
2. Интернационализирайте кода: преместете низовете във файлове, добавете правила за множествено число и Intl форматиране. Пуснете го само на английски и проверете, че нищо не се е променило.
3. Определете URL структурата за публичните страници и добавете hreflang.
4. Преведете: направете чернова с машинен или AI превод, след което прегледайте с говорител с добро владеене. Дайте на преводачите контекст — думата „Book“ може да е съществително на един екран и глагол на друг.
5. Преведете съдържанието в базата данни и задайте резервни стойности.
6. Локализирайте останалото: имейли, съобщения за грешки, правни страници, изображения с текст върху тях.
7. Тествайте всеки език на ширина на телефон и, ако е нужно, с писане отдясно наляво.
8. Създайте процес, така че новите функции да излизат с преводи, а не месеци по-късно.

Чести грешки

• Слепване на изречения ("You have " + n + " messages"), което се чупи в други езици.
• Твърдо записан текст в компонентите, съобщенията за грешки и валидационните низове.
• Ръчно форматиране на дати и цени.
• Знамена за езици и автоматични пренасочвания, които затварят хората в грешната версия.
• Един URL за всички езици на страниците, които искате да се индексират.
• Липсващи обратни hreflang връзки, така че Google игнорира анотациите.
• Превод на интерфейса, но не и на съдържанието, или обратното.
• Непрегледан машинен превод на страниците за цени, правни текстове и плащане.

Контролен списък за многоезичност

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

Многоезичност в Mythex

В Mythex добавяте езици, като ги поискате в чата — няма отделен панел за превод — затова подсказките по-горе работят така, както са написани. Направете стъпката за интернационализация първа и я проверете в Preview, преди да добавяте езици; това е голямо преструктуриране, а контролната точка в чата ви дава възможност за връщане назад, ако нещо се счупи (чат и контролни точки). Ако искате приложението да превежда съдържание автоматично с AI или API за превод, това използва вашия собствен API ключ, съхранен в настройките на проекта (променливи на средата и тайни); как да използвате LLM API обяснява разходите. Публикувайте отново, когато новите езици са готови.

Въпроси