Kako dodati več jezikov v svojo aplikacijo ali spletno stran

Da aplikaciji dodate več jezikov, premaknite vse besedilo vmesnika v prevodne datoteke (po ena za vsak jezik), jih naložite s knjižnico i18n in dodajte preklopnik jezika, ki si zapomni izbiro. Za javne strani, ki naj jih iskalniki najdejo, dajte vsakemu jeziku svoj URL, na primer /fr/, in različice povežite z oznakami hreflang. Nato uredite dele, ki jih ljudje pogosto pozabijo: datume, števila in valute, daljše besedilo v nekaterih jezikih, pisave od desne proti levi ter vsebino v bazi podatkov.

Pojmi, ki jih boste slišali

• Internacionalizacija (i18n): priprava kode, da podpira poljuben jezik — brez trdo zapisanih nizov, oblikovanja, ki upošteva jezikovno okolje, prilagodljive postavitve. Številka „18“ pomeni število črk med i in n.
• Lokalizacija (l10n): prilagoditev aplikacije določenemu jeziku ali trgu, večinoma prevajanje, včasih tudi valuta, slike in pravna besedila.
• Lokal: jezik in po želji še regija, na primer en-GB ali pt-BR.

Ko enkrat opravite i18n, je dodajanje vsakega novega jezika večinoma le delo s prevajanjem.

Možnosti in kompromisi

Za večino aplikacij je pravilna osnova standardna knjižnica i18n s prevodnimi datotekami. Če želite, naredite osnutke prevodov s strojnim ali UI prevajanjem, nato pa naj tekoč govorec pregleda, kar stranke vidijo največkrat.

Deli večjezične aplikacije

Prevodne datoteke

Namesto <h1>Dobrodošli nazaj</h1> koda piše t('dashboard.welcome'), vsak jezik pa ima datoteko z besedilom:

{
  "dashboard": {
    "welcome": "Dobrodošli nazaj, {{name}}",
    "items_one": "{{count}} element",
    "items_other": "{{count}} elementov"
  }
}

Za spremenljivke uporabljajte nadomestne oznake in ne sestavljajte delčkov stavkov — besedni red se med jeziki razlikuje. Uporabite tudi pravila za množino knjižnice: angleščina ima dve obliki (1 element, 2 elementa), nekateri jeziki pa imajo tri, štiri ali več oblik.

Oblikovanje datumov, števil in denarja

Tega ne oblikujte ročno. Vgrajeni API brskalnika Intl oblikuje za poljubno jezikovno okolje: 1,234.5 v angleščini je v nemščini 1.234,5; datumi preklapljajo med obliko dan-mesec in mesec-dan; valutni simboli se premaknejo. Datume shranjujte v UTC, denar pa kot število s kodo valute, oblikujte pa samo za prikaz.

Postavitev, ki se raztegne

Prevedeno besedilo je pogosto daljše od angleškega — zlasti nemške in finske besede. Izogibajte se gumbom s fiksno širino in odrezanim napisom ter preizkusite z najdaljšim jezikom.

Jeziki, ki se pišejo od desne proti levi

Arabščina, hebrejščina, perzijščina in urdujščina se berejo od desne proti levi. Za te jezikovne različice na strani nastavite dir="rtl" in uporabite logične lastnosti CSS (margin-inline-start namesto margin-left; v Tailwindu ms-4 namesto ml-4), da se postavitev sama zrcali. Ikone, ki nakazujejo smer, kot so puščice, je treba prav tako obrniti.

Preklopnik jezika in zaznavanje

Preklopnik prikažite na vsaki strani, pri čemer je vsak jezik označen s svojim imenom („Deutsch“, „Français“, „العربية“), ne z zastavami — zastave predstavljajo države, ne jezikov. Ob prvem obisku zaznajte jezik brskalnika, da predlagate različico, toda obiskovalčeva izrecna izbira naj ima prednost in naj se shrani.

URL-ji in SEO

Za strani, ki naj bodo v iskalnikih, mora imeti vsak jezik svoj URL. Od septembra 2026 so smernice Googla za večjezične strani naslednje:

• Ločeni URL-ji za vsak jezik — najpreprosteje so podimenike (example.com/fr/); delujejo tudi poddomene in domene držav. URL-ji s parametri (?lang=fr) niso priporočeni.
• Ne preklapljajte jezika samo s piškotkom ali nastavitvijo brskalnika; pajek Googla morda nikoli ne vidi drugih različic.
• Ne preusmerjajte samodejno glede na jezik; povežite različice med seboj.
• Uporabite hreflang, da Googlu poveste, katere strani so prevodi druga drugi. Vsaka različica mora navesti sebe in vse druge, sicer lahko oznake spregleda. Za privzeto stran dodajte x-default.
• Google jezik strani zazna iz vidne vsebine, ne iz lang ali hreflang — zato prevedite celotno stran, ne le menija.

Na vsaki različici vseeno nastavite <html lang="fr">: bralniki zaslona ga uporabljajo za pravilno izgovarjavo, kar je zahteva dostopnosti.

Zaslonov prijavljenih uporabnikov ni treba indeksirati, zato je zanje dovolj, da jezik shranite v uporabnikov profil. Za to, kako doseči, da bodo javne strani sploh preiskane, glejte SEO za spletne strani, zgrajene z UI.

Vsebina v vaši bazi podatkov

Besedilo vmesnika je v datotekah; vsebina, kot so imena izdelkov, objave na blogu in kategorije, je v bazi podatkov. Dva pogosta vzorca:

• Tabela prevodov: product_translations (product_id, locale, name, description). Čisto in se razširi na številne jezike.
• Stolpec JSON za vsako polje: name: {"en": "...", "fr": "..."}. Preprostejše za nekaj jezikov.

Odločite, kaj se zgodi, ko prevod manjka — običajno naj se prikaže privzeti jezik, ne prazen prostor.

E-pošta in obvestila

Shranite jezik vsakega uporabnika in ga uporabite tudi za e-pošto, obvestila in PDF-je. Enostavno je prevesti aplikacijo in pozabiti, da pozdravno e-poštno sporočilo še vedno pride v angleščini.

Pozivi, ki delujejo

Dodaj internacionalizacijo s knjižnico react-i18next. Vsak niz, viden uporabnikom, premakni v locales/en.json z imenskimi ključi, uporabi interpolacijo in pravila za množino namesto sestavljanja nizov ter oblikuj datume, števila in cene s knjižnico Intl glede na trenutno jezikovno okolje. Zaenkrat ne spreminjaj besedila.

Dodaj francoščino in nemščino. Javne tržne strani dobijo predpono /fr/ in /de/, angleščina pa ostane v korenu; hreflang povezave na vsaki strani (vključno s samo-referenco in x-default) ter html lang nastavljen za vsako stran. Dodaj preklopnik jezika, ki prikaže ime vsakega jezika v tem jeziku. Za strani prijavljenih uporabnikov shrani jezik v uporabnikov profil.

Dodaj arabščino s podporo za pisavo od desne proti levi: za arabščino nastavi dir="rtl", leve/desne robove in odmike zamenjaj z logičnimi lastnostmi, zrcali smerne ikone in preveri, ali obrazci in tabele še vedno pravilno berljivi.

Korak za korakom

1. Izberite prvi dodatni jezik glede na dejansko povpraševanje — kje so vaši obiskovalci ali stranke.
2. Internacionalizirajte kodo: premaknite nize v datoteke, dodajte množine in oblikovanje z Intl. Objavite samo v angleščini in preverite, da se nič ni spremenilo.
3. Določite strukturo URL-jev za javne strani in dodajte hreflang.
4. Prevedite: pripravite osnutke s strojnim ali UI prevajanjem, nato pa pregled opravi tekoč govorec. Prevajalcem dajte kontekst — beseda „Book“ je na enem zaslonu samostalnik, na drugem glagol.
5. Prevedite vsebino v bazi podatkov in nastavite privzeta besedila.
6. Lokalizirajte še ostalo: e-pošto, sporočila o napakah, pravne strani, slike z besedilom.
7. Preizkusite vsak jezik pri širini telefona in, če je potrebno, pri pisavi od desne proti levi.
8. Vzpostavite postopek, da nove funkcije izidejo s prevodi, ne šele čez mesece.

Pogoste napake

• Sestavljanje stavkov ("Imate " + n + " sporočil"), ki se v drugih jezikih poruši.
• Trdo zapisano besedilo v komponentah, sporočilih o napakah in validacijskih nizih.
• Ročno oblikovanje datumov in cen.
• Zastave za jezike in samodejne preusmeritve, ki ljudi zaprejo v napačno različico.
• En URL za vse jezike na straneh, ki jih želite indeksirane.
• Manjkajoče povratne povezave hreflang, zaradi katerih Google oznake spregleda.
• Prevajanje vmesnika, ne pa vsebine, ali obratno.
• Strojno prevajanje brez pregleda na straneh s cenami, pravnimi besedili in blagajno.

Kontrolni seznam večjezičnosti

• Ni trdo zapisanih nizov, vidnih uporabnikom; uporabljena so pravila za množino in nadomestne oznake
• Datumi, števila in valute oblikovani z Intl
• Preklopnik jezika z imeni v lastnem jeziku na vsaki strani; izbira je shranjena
• Ločeni URL-ji za vsak jezik na javnih straneh; brez vsiljenih preusmeritev
• hreflang na vsaki različici, vključno s samo-referenco in x-default
• html lang (in dir="rtl", kjer je potrebno) nastavljen za vsako stran
• Vsebina v bazi podatkov prevedena z ustreznimi privzetimi besedili
• E-pošta in obvestila poslani v jeziku uporabnika
• Besedilo za stranke pregledal tekoč govorec

Več jezikov na Mythexu

Na Mythexu jezike dodajate tako, da to zahtevate v klepetu — ni ločene plošče za prevajanje — zato pozivi zgoraj delujejo kot so. Najprej naredite korak internacionalizacije in ga preverite v predogledu; gre za veliko prenovo, kontrolna točka v klepetu pa vam da mesto za vrnitev nazaj, če kaj odpove (klepet in kontrolne točke). Če želite, da aplikacija samodejno prevaja vsebino z UI ali prevajalskim API-jem, to uporablja vaš lasten API ključ, shranjen v nastavitvah projekta (spremenljivke okolja in skrivnosti); kako uporabljati API-je LLM pojasni stroške. Ko so novi jeziki pripravljeni, znova objavite aplikacijo.

Vprašanja