Jak do aplikace nebo webu přidat více jazyků

Pro přidání více jazyků do aplikace přesuňte veškerý text rozhraní do překladových souborů (jeden pro každý jazyk), načtěte je knihovnou pro i18n a přidejte přepínač jazyků, který si volbu zapamatuje. U veřejných stránek, které chcete najít ve vyhledávání, dejte každému jazyku vlastní adresu, například /fr/, a verze propojte značkami hreflang. Pak vyřešte části, na které se lidé zapomínají: data, čísla a měny, delší text v některých jazycích, písma psaná zprava doleva a obsah uložený v databázi.

Pojmy, se kterými se setkáte

• Internacionalizace (i18n): příprava kódu na podporu libovolného jazyka. Žádné texty napevno, formátování podle místního nastavení, pružné rozložení. Číslo 18 udává počet písmen mezi i a n.
• Lokalizace (l10n): přizpůsobení aplikace konkrétnímu jazyku nebo trhu, hlavně překlad, někdy také měna, obrázky a právní texty.
• Locale (místní nastavení): jazyk a volitelně region, například en-GB nebo pt-BR.

Udělejte i18n jednou a přidání každého dalšího jazyka je pak hlavně práce s překladem.

Možnosti a kompromisy

Pro většinu aplikací je správným základem standardní knihovna i18n s překladovými soubory. Návrhy překladů můžete vytvořit strojově nebo pomocí AI, ale nechte je zkontrolovat plynulými mluvčími, zejména to, co zákazníci vidí nejčastěji.

Části vícejazyčné aplikace

Překladové soubory

Místo <h1>Welcome back</h1> kód říká t('dashboard.welcome') a každé místní nastavení má soubor s textem:

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

Pro proměnné používejte zástupné znaky místo skládání útržků vět, protože slovosled se mezi jazyky liší. A použijte pravidla pro množné číslo z knihovny: angličtina má dva tvary (1 položka, 2 položky), ale čeština má tři (1 položka, 2 položky, 5 položek) a některé jazyky mají čtyři nebo více.

Formátování dat, čísel a peněz

Neformátujte je ručně. Vestavěné API Intl v prohlížeči formátuje podle libovolného místního nastavení: 1,234.5 v angličtině je 1 234,5 v češtině a 1.234,5 v němčině; data se přepínají mezi formátem den-měsíc a měsíc-den; symboly měn se přesouvají. Data ukládejte v UTC a peníze jako čísla s kódem měny a formátujte je až pro zobrazení.

Rozložení, které se přizpůsobí

Přeložený text je často delší než angličtina, zejména němčina a finština. Vyhněte se tlačítkům s pevnou šířkou a useknutým popiskům a testujte s nejdelším jazykem.

Jazyky psané zprava doleva

Arabština, hebrejština, perština a urdština se čtou zprava doleva. U těchto místních nastavení nastavte na stránce dir="rtl" a použijte logické vlastnosti CSS (margin-inline-start místo margin-left; v Tailwindu ms-4 místo ml-4), aby se rozložení zrcadlilo samo. Směrové ikony, jako šipky, je také třeba otočit.

Přepínač jazyků a detekce

Zobrazte přepínač na každé stránce a každý jazyk pojmenujte v něm samotném („Deutsch“, „Français“, „العربية“), ne vlajkou. Vlajky označují země, ne jazyky. Při první návštěvě zjistěte preferovaný jazyk prohlížeče, abyste navrhli odpovídající verzi, ale výslovná volba návštěvníka má přednost a měla by se zapamatovat.

Adresy URL a SEO

U stránek, které chcete ve výsledcích vyhledávání, potřebuje každý jazyk vlastní adresu. Podle Googlu jsou k září 2026 pokyny pro vícejazyčné weby tyto:

• Oddělené adresy pro každý jazyk. Nejjednodušší jsou podsložky (example.com/fr/); fungují i subdomény a národní domény. Parametry v adrese (?lang=fr) se nedoporučují.
• Nepřepínejte jazyk jen pomocí cookie nebo nastavení prohlížeče. Prohledávač Googlu nemusí ostatní verze nikdy uvidět.
• Nepřesměrovávejte automaticky podle jazyka. Propojte verze odkazy.
• Použijte hreflang, aby Google věděl, které stránky jsou překlady jedna druhé. Každá verze musí uvádět sama sebe i všechny ostatní, jinak mohou být anotace ignorovány. Pro záložní stránku přidejte x-default.
• Google pozná jazyk stránky z viditelného obsahu, ne z atributu lang ani z hreflang. Přeložte tedy celou stránku, ne jen menu.

Na každou verzi přesto nastavte <html lang="fr">. Čtečky obrazovky ho používají k výběru správné výslovnosti, a to je požadavek přístupnosti.

Stránky aplikace, na které se lidé přihlašují, není třeba indexovat, takže u nich stačí uložit jazyk do profilu uživatele. Jak dostat veřejné stránky do vyhledávání, viz SEO pro weby vytvořené pomocí AI.

Obsah v databázi

Texty rozhraní jsou v souborech. Obsah, jako jsou názvy produktů, články na blogu a kategorie, je v databázi. Běžné jsou dva vzory:

• Tabulka překladů: product_translations (product_id, locale, name, description). Je přehledná a škáluje se na mnoho jazyků.
• Sloupec JSON pro každé pole: name: {"en": "...", "fr": "..."}. Je jednodušší pro několik jazyků.

Rozhodněte, co se stane, když překlad chybí. Obvykle se použije výchozí jazyk místo prázdného místa.

E-maily a oznámení

Ukládejte jazyk každého uživatele a používejte ho i pro e-maily, oznámení a PDF. Je snadné aplikaci přeložit a zapomenout, že uvítací e-mail stále přichází anglicky.

Prompty, které fungují

Přidej internacionalizaci pomocí react-i18next. Přesuň každý text viditelný uživateli do locales/en.json s jmennými prostory klíčů, použij interpolaci a pravidla pro množné číslo místo skládání řetězců a formátuj data, čísla a ceny pomocí Intl podle aktuálního místního nastavení. Zatím neměň žádné znění.

Přidej francouzštinu a němčinu. Veřejné marketingové stránky dostanou předpony /fr/ a /de/, angličtina zůstane v kořeni, na každé stránce budou odkazy hreflang (včetně odkazu na sebe a x-default) a html lang nastavené pro každou stránku. Přidej přepínač jazyků, který zobrazí každý jazyk vlastním názvem. Na stránky po přihlášení ulož jazyk do profilu uživatele.

Přidej arabštinu s podporou psaní zprava doleva: nastav dir="rtl" pro arabštinu, nahraď levé a pravé okraje a vnitřní odsazení logickými vlastnostmi, zrcadli směrové ikony a zkontroluj, že formuláře a tabulky se stále čtou správně.

Krok za krokem

1. Vyberte první další jazyk podle skutečné poptávky, tedy podle toho, kde jsou vaši návštěvníci nebo zákazníci.
2. Internacionalizujte kód: přesuňte texty do souborů a přidejte množná čísla a formátování přes Intl. Nasaďte to jen s angličtinou a ověřte, že se nic nezměnilo.
3. Rozhodněte o struktuře adres pro veřejné stránky a přidejte hreflang.
4. Přeložte: připravte návrh strojově nebo pomocí AI a nechte ho zkontrolovat plynulým mluvčím. Dejte překladatelům kontext. Slovo „Objednat“ může být na jedné obrazovce tlačítko a na jiné nadpis.
5. Přeložte obsah databáze a nastavte záložní jazyky.
6. Zlokalizujte zbytek: e-maily, chybová hlášení, právní stránky a obrázky s textem.
7. Otestujte každý jazyk na šířce telefonu a při psaní zprava doleva, pokud je potřeba.
8. Nastavte postup, aby nové funkce přicházely s překlady, ne o měsíce později.

Časté chyby

• Skládání vět ("Máte " + n + " zpráv"), které se v jiných jazycích rozbije.
• Texty napevno v komponentách, chybových hlášeních a validačních řetězcích.
• Ruční formátování dat a cen.
• Vlajky místo jazyků a automatická přesměrování, která lidi uvězní v nesprávné verzi.
• Jedna adresa pro všechny jazyky u stránek, které chcete indexovat.
• Chybějící zpětné odkazy hreflang, takže je Google ignoruje.
• Přeložené rozhraní, ale ne obsah, nebo naopak.
• Nezkontrolovaný strojový překlad na stránkách s cenami, právními texty a pokladnou.

Kontrolní seznam vícejazyčnosti

• Žádné texty viditelné uživateli nejsou napevno; použita pravidla pro množné číslo a zástupné znaky
• Data, čísla a měny formátovány přes Intl
• Přepínač jazyků s vlastními názvy na každé stránce; volba se pamatuje
• Oddělené adresy pro každý jazyk u veřejných stránek; žádná vynucená přesměrování
• hreflang na každé verzi, včetně odkazu na sebe a x-default
• html lang (a dir="rtl" tam, kde je potřeba) nastaveno na každé stránce
• Obsah databáze přeložen a se smysluplnými záložními jazyky
• E-maily a oznámení se odesílají v jazyce uživatele
• Texty pro zákazníky zkontroloval plynulý mluvčí

Více jazyků v Mythexu

V Mythexu přidáváte jazyky tak, že to napíšete do chatu. Žádný samostatný panel pro překlady neexistuje, takže výše uvedené prompty fungují beze změny. Nejdřív proveďte krok internacionalizace a zkontrolujte ho v Preview, než přidáte jazyky. Je to velké přepracování a kontrolní bod v chatu vám dá místo, kam se můžete vrátit, kdyby se něco rozbilo (chat a kontrolní body). Pokud chcete, aby aplikace překládala obsah automaticky pomocí AI nebo překladového API, použije se váš vlastní API klíč uložený v nastavení projektu (proměnné prostředí a tajné údaje). Jak používat LLM API vysvětluje náklady. Až budou nové jazyky připravené, publikujte znovu.

Otázky