Ako pridať viac jazykov do aplikácie alebo webu

Ak chcete pridať viac jazykov do aplikácie, presuňte každý text rozhrania do prekladových súborov (jeden na jazyk), načítajte ich pomocou i18n knižnice a pridajte prepínač jazykov, ktorý si zapamätá voľbu. Pri verejných stránkach, ktoré chcete nájsť vo vyhľadávaní, dajte každému jazyku vlastnú URL, napríklad /fr/, a verzie prepojte značkami hreflang. Potom riešte veci, na ktoré ľudia zabúdajú: dátumy, čísla a meny, dlhší text v niektorých jazykoch, písma sprava doľava a obsah uložený v databáze.

Pojmy, ktoré budete počuť

• Internacionalizácia (i18n): príprava kódu na podporu ľubovoľného jazyka — žiadne pevne zapísané reťazce, formátovanie podľa miestneho nastavenia, flexibilné rozloženia. Číslo „18“ je počet písmen medzi i a n.
• Lokalizácia (l10n): prispôsobenie aplikácie pre konkrétny jazyk alebo trh, hlavne preklad, niekedy aj mena, obrázky a právne texty.
• Locale (miestne nastavenie): jazyk a prípadne región, napríklad en-GB alebo pt-BR.

Urobte i18n raz a pridanie každého ďalšieho jazyka bude hlavne práca s prekladom.

Možnosti a kompromisy

Pre väčšinu aplikácií je správnym základom štandardná i18n knižnica s prekladovými súbormi. Koncepty prekladov si môžete vygenerovať strojovým alebo AI prekladom a potom nechajte plynulého rečníka skontrolovať to, čo zákazníci vidia najčastejšie.

Časti viacjazyčnej aplikácie

Prekladové súbory

Namiesto <h1>Vitajte späť</h1> kód hovorí t('dashboard.welcome') a každé miestne nastavenie má súbor s textom:

{
  "dashboard": {
    "welcome": "Vitajte späť, {{name}}",
    "items_one": "{{count}} položka",
    "items_other": "{{count}} položiek"
  }
}

Na premenné používajte zástupné znaky namiesto skladania fragmentov viet — poradie slov sa v jazykoch líši. A používajte pravidlá množného čísla knižnice: angličtina má dva tvary (1 item, 2 items), ale niektoré jazyky majú tri, štyri alebo viac tvarov, a slovenčina je jedna z nich.

Formátovanie dátumov, čísel a peňazí

Tieto veci neformátujte ručne. Vstavané API Intl v prehliadači formátuje pre akékoľvek miestne nastavenie: 1,234.5 v angličtine je 1.234,5 v nemčine; dátumy sa prepínajú medzi formátom deň–mesiac a mesiac–deň; symboly mien sa presúvajú. Dátumy ukladajte v UTC a peniaze ako čísla s kódom meny a formátujte ich až na zobrazenie.

Rozloženie, ktoré sa roztiahne

Preložený text je často dlhší ako v angličtine — najmä nemčina a fínčina. Vyhnite sa tlačidlám s pevnou šírkou a skráteným popiskom a testujte s najdlhším jazykom.

Jazyky sprava doľava

Arabčina, hebrejčina, perzština a urdčina sa čítajú sprava doľava. Pre tieto miestne nastavenia nastavte na stránke dir="rtl" a používajte logické CSS vlastnosti (margin-inline-start namiesto margin-left; v Tailwinde ms-4 namiesto ml-4), aby sa rozloženie samo zrkadlilo. Smerové ikony, ako sú šípky, treba tiež otočiť.

Prepínač jazykov a detekcia

Zobrazte prepínač na každej stránke s menom každého jazyka v ňom samotnom („Deutsch“, „Français“, „العربية“), nie vlajky — vlajky predstavujú krajiny, nie jazyky. Pri prvej návšteve môžete podľa jazyka prehliadača navrhnúť verziu, ale explicitná voľba návštevníka má prednosť a mala by sa zapamätať.

URL a SEO

Pri stránkach, ktoré chcete vo výsledkoch vyhľadávania, potrebuje každý jazyk vlastnú URL. Podľa odporúčaní Googlu pre viacjazyčné weby platí od septembra 2026 toto:

• Samostatné URL pre každý jazyk — podadresáre (example.com/fr/) sú najjednoduchšie; fungujú aj subdomény a domény krajín. URL parametre (?lang=fr) sa neodporúčajú.
• Nemeňte jazyk len cez cookie alebo nastavenie prehliadača; crawler Googlu nemusí nikdy vidieť ostatné verzie.
• Neuskutočňujte automatické presmerovanie podľa jazyka; prepojte verzie odkazmi.
• Použite hreflang, aby Google vedel, ktoré stránky sú navzájom preklady. Každá verzia musí uviesť seba a všetky ostatné, inak môžu byť anotácie ignorované. Pre záložnú stránku pridajte x-default.
• Google zisťuje jazyk stránky z viditeľného obsahu, nie z atribútov lang ani hreflang — preložte preto celú stránku, nie len menu.

Na každej verzii stále nastavte <html lang="fr">: čítačky obrazovky ho používajú na výber správnej výslovnosti, čo je požiadavka prístupnosti.

Obrazovky aplikácie po prihlásení nemusia byť indexované, takže pre ne stačí uložiť jazyk do profilu používateľa. Ako dostať verejné stránky do vyhľadávania, nájdete v článku SEO pre weby vytvorené AI.

Obsah v databáze

Text rozhrania je v súboroch; obsah ako názvy produktov, blogové príspevky a kategórie je v databáze. Dva bežné vzory:

• Tabuľka prekladov: product_translations (product_id, locale, name, description). Čisté a škáluje na mnoho jazykov.
• Stĺpec JSON pre každé pole: name: {"en": "...", "fr": "..."}. Jednoduchšie pre niekoľko jazykov.

Rozhodnite, čo sa stane, keď preklad chýba — zvyčajne sa použije predvolený jazyk namiesto prázdneho miesta.

E-maily a notifikácie

Uložte jazyk každého používateľa a použite ho aj pre e-maily, notifikácie a PDF. Ľahko sa preloží aplikácia a zabudne sa, že uvítací e-mail stále príde po anglicky.

Prompty, ktoré fungujú

Pridajte internacionalizáciu pomocou react-i18next. Presuňte každý text viditeľný pre používateľa do locales/en.json s menovanými kľúčmi, na premenné a množné čísla použite interpoláciu a pravidlá namiesto spájania reťazcov a dátumy, čísla a ceny formátujte pomocou Intl podľa aktuálneho jazyka. Zatiaľ nemeňte žiadne znenie.

Pridajte francúzštinu a nemčinu. Verejné marketingové stránky dostanú predpony URL /fr/ a /de/ s angličtinou v koreni, odkazy hreflang na každej stránke (vrátane vlastného odkazu a x-default) a html lang nastavené pre každú stránku. Pridajte prepínač jazykov, ktorý zobrazí natívny názov každého jazyka. Pre stránky po prihlásení uložte jazyk do profilu používateľa.

Pridajte arabčinu s podporou sprava doľava: nastavte dir="rtl" pre arabčinu, nahraďte ľavé a pravé okraje a odsadenia logickými vlastnosťami, zrkadlite smerové ikony a skontrolujte, že formuláre a tabuľky sa stále čítajú správne.

Postup krok za krokom

1. Vyberte prvý ďalší jazyk podľa skutočného dopytu — kde sú vaši návštevníci alebo zákazníci.
2. Internacionalizujte kód: presuňte reťazce do súborov, pridajte množné čísla a formátovanie Intl. Nasaďte to len s angličtinou a overte, že sa nič nezmenilo.
3. Rozhodnite štruktúru URL pre verejné stránky a pridajte hreflang.
4. Prekladajte: vygenerujte koncepty strojovým alebo AI prekladom a potom ich nechajte skontrolovať plynulým rečníkom. Dajte prekladateľom kontext — slovo „Book“ je na jednej obrazovke podstatné meno a na inej sloveso.
5. Preložte obsah databázy a nastavte záložné hodnoty.
6. Lokalizujte zvyšok: e-maily, chybové hlásenia, právne stránky, obrázky s textom.
7. Otestujte každý jazyk na šírke telefónu a pri písme sprava doľava, ak je to relevantné.
8. Nastavte proces, aby nové funkcie chodili s prekladmi, nie o mesiace neskôr.

Časté chyby

• Skladanie viet ("You have " + n + " messages"), čo sa v iných jazykoch rozpadne.
• Pevne zapísaný text v komponentoch, chybových hláseniach a validačných reťazcoch.
• Ručné formátovanie dátumov a cien.
• Vlajky ako symboly jazykov a automatické presmerovania, ktoré uväznia ľudí vo zlej verzii.
• Jedna URL pre všetky jazyky na stránkach, ktoré chcete indexovať.
• Chýbajúce spätné odkazy hreflang, takže ich Google ignoruje.
• Preložené rozhranie, ale nie obsah, alebo naopak.
• Nekontrolovaný strojový preklad na stránkach s cenami, právnymi textami a pokladňou.

Kontrolný zoznam viacjazyčnosti

• Žiadne pevne zapísané texty viditeľné pre používateľa; použité pravidlá množného čísla a zástupné znaky
• Dátumy, čísla a meny formátované pomocou Intl
• Prepínač jazykov s natívnymi názvami na každej stránke; voľba sa pamätá
• Samostatné URL pre každý jazyk na verejných stránkach; žiadne vynútené presmerovania
• hreflang na každej verzii, vrátane vlastnej a x-default
• html lang (a dir="rtl" tam, kde treba) nastavené pre každú stránku
• Obsah databázy preložený s rozumnými záložnými hodnotami
• E-maily a notifikácie odosielané v jazyku používateľa
• Texty pre zákazníkov skontrolované plynulým rečníkom

Viacjazyčnosť na Mythex

Na Mythex pridávate jazyky v chate — nie je tu samostatný panel na preklad — takže vyššie uvedené prompty fungujú tak, ako sú napísané. Najprv urobte krok internacionalizácie a overte ho v náhľade, skôr než pridáte jazyky; je to veľká úprava a checkpoint v chate vám dá bod, ku ktorému sa môžete vrátiť, ak sa niečo pokazí (chat a checkpointy). Ak chcete, aby aplikácia prekladala obsah automaticky pomocou AI alebo prekladového API, použije sa váš vlastný API kľúč uložený v nastaveniach projektu (premenné prostredia a tajomstvá); ako používať LLM API vysvetľuje náklady. Keď sú nové jazyky pripravené, publikujte znova.

Otázky