Kako dodati više jezika u svoju aplikaciju ili web stranicu

Da biste aplikaciji dodali više jezika, sav tekst sučelja premjestite u datoteke s prijevodima (jednu po jeziku), učitajte ih pomoću biblioteke za i18n i dodajte preklopnik jezika koji pamti izbor. Za javne stranice koje želite pronaći na pretraživaču, svaki jezik dajte vlastiti URL, na primjer /fr/, i verzije povežite hreflang oznakama. Zatim obradite dijelove koje ljudi često zaborave: datume, brojeve i valute, dulji tekst na nekim jezicima, pisma zdesna nalijevo te sadržaj pohranjen u bazi podataka.

Pojmovi koje ćete čuti

• Internacionalizacija (i18n): priprema koda za podršku bilo kojem jeziku: bez tekstova upisanih u kod, s formatiranjem prilagođenim lokalnim postavkama i fleksibilnim rasporedom. Broj „18” označava broj slova između i i n.
• Lokalizacija (l10n): prilagodba aplikacije za određeni jezik ili tržište, uglavnom prijevod, a ponekad i valuta, slike i pravni tekst.
• Lokalna postavka (locale): jezik i, po želji, regija, na primjer en-GB ili pt-BR.

Napravite i18n jednom, pa je dodavanje svakog novog jezika uglavnom posao prijevoda.

Mogućnosti i kompromisi

Za većinu aplikacija standardna biblioteka za i18n s datotekama prijevoda prava je osnova. Nacrte prijevoda možete napraviti strojnim ili AI prijevodom, a zatim neka izvorni govornici pregledaju ono što korisnici najčešće vide.

Dijelovi višejezične aplikacije

Datoteke s prijevodima

Umjesto <h1>Welcome back</h1>, kod kaže t('dashboard.welcome'), a svaka lokalna postavka ima datoteku s tekstom:

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

Za varijable koristite oznake (placeholdere), a ne spajanje dijelova rečenica, jer se redoslijed riječi razlikuje među jezicima. Koristite i pravila za množinu iz biblioteke: engleski ima dva oblika (1 item, 2 items), ali neki jezici imaju tri, četiri ili više oblika.

Formatiranje datuma, brojeva i novca

Ne formatirajte ih ručno. Ugrađeni API preglednika Intl formatira za bilo koju lokalnu postavku: 1,234.5 na engleskom je 1.234,5 na njemačkom; datumi se mijenjaju između dana na prvom mjestu i mjeseca na prvom mjestu; simboli valuta se pomiču. Datume spremajte u UTC, a novac kao brojeve s kodom valute, i formatirajte ih tek za prikaz.

Raspored koji se prilagođava

Prevedeni tekst često je duži od engleskog, osobito njemačke i finske riječi. Izbjegavajte gumbe fiksne širine i skraćene oznake te testirajte s najdužim jezikom.

Jezici zdesna nalijevo

Arapski, hebrejski, perzijski i urdu pišu se zdesna nalijevo. Za te lokalne postavke na stranici postavite dir="rtl" i koristite logička CSS svojstva (margin-inline-start umjesto margin-left; u Tailwindu ms-4 umjesto ml-4) kako bi se raspored sam zrcalio. Ikone koje podrazumijevaju smjer, poput strelica, također treba okrenuti.

Preklopnik jezika i otkrivanje jezika

Prikažite preklopnik na svakoj stranici, s nazivom svakog jezika na njegovom vlastitom jeziku („Deutsch”, „Français”, „العربية”), a ne zastavama. Zastave predstavljaju države, a ne jezike. Pri prvom posjetu otkrijte željeni jezik preglednika kako biste predložili verziju, ali neka posjetiteljev izričit izbor ima prednost i neka se pamti.

URL-ovi i SEO

Za stranice koje želite u rezultatima pretraživanja, svaki jezik treba vlastiti URL. Od rujna 2026. Googleove smjernice za višejezične stranice su sljedeće:

• Zasebni URL-ovi za svaki jezik: najjednostavnije su poddirektoriji (example.com/fr/); rade i poddomene i domene po državama. URL parametri (?lang=fr) se ne preporučuju.
• Nemojte mijenjati jezik samo putem kolačića ili postavki preglednika; Googleov robot možda nikada neće vidjeti druge verzije.
• Nemojte automatski preusmjeravati po jeziku; umjesto toga povežite verzije.
• Koristite hreflang kako biste Googleu rekli koje su stranice prijevodi jedna druge. Svaka verzija mora navesti sebe i sve ostale, inače oznake mogu biti zanemarene. Dodajte x-default za zadasnu stranicu.
• Google prepoznaje jezik stranice po vidljivom sadržaju, a ne po lang ili hreflang oznaci, pa prevedite cijelu stranicu, a ne samo izbornik.

Ali na svakoj verziji i dalje postavite <html lang="fr">: čitači zaslona to koriste za ispravan izgovor, a to je zahtjev pristupačnosti.

Za ekrane prijavljenih korisnika indeksiranje nije potrebno, pa je dovoljno jezik spremiti u korisnički profil. Pogledajte SEO za web stranice izrađene AI-jem kako bi javne stranice uopće bile obrađene.

Sadržaj u bazi podataka

Tekst sučelja živi u datotekama; sadržaj poput naziva proizvoda, objava na blogu i kategorija živi u bazi podataka. Dva uobičajena obrasca:

• Tablica prijevoda: product_translations (product_id, locale, name, description). Čisto je i skalira se na mnogo jezika.
• JSON stupac po polju: name: {"en": "...", "fr": "..."}. Jednostavnije je za nekoliko jezika.

Odlučite što se događa kad prijevod nedostaje; obično se vraćate na zadani jezik umjesto da prikažete prazno mjesto.

E-pošta i obavijesti

Spremite jezik svakog korisnika i koristite ga i za e-poštu, obavijesti i PDF-ove. Lako je prevesti aplikaciju i zaboraviti da i dalje dobrodošlica stiže na engleskom.

Upute koje dobro funkcioniraju

Dodaj internacionalizaciju pomoću react-i18next. Premjesti svaki tekst vidljiv korisniku u locales/en.json s imenskim ključevima, koristi interpolaciju i pravila za množinu umjesto spajanja nizova te formatiraj datume, brojeve i cijene pomoću Intl prema trenutnoj lokalnoj postavci. Još ne mijenjaj nijednu formulaciju.

Dodaj francuski i njemački. Javne marketinške stranice dobivaju prefikse /fr/ i /de/ dok engleski ostaje u korijenu, hreflang veze na svakoj stranici (uključujući samoreferencu i x-default) te html lang postavljen po stranici. Dodaj preklopnik jezika koji prikazuje naziv svakog jezika na njegovom jeziku. Za stranice prijavljenih korisnika spremi jezik u korisnički profil.

Dodaj arapski s podrškom za pisanje zdesna nalijevo: postavi dir="rtl" za arapski, zamijeni lijeve i desne margine i razmake logičkim svojstvima, zrcali ikone sa smjerom i provjeri da obrasci i tablice i dalje čitljivo izgledaju.

Korak po korak

1. Odaberite prvi dodatni jezik prema stvarnoj potražnji, gdje su vaši posjetitelji ili kupci.
2. Internacionalizirajte kod: premjestite tekstove u datoteke, dodajte množinu i formatiranje pomoću Intl. Isporučite to samo na engleskom i provjerite da se ništa nije promijenilo.
3. Odlučite strukturu URL-ova za javne stranice i dodajte hreflang.
4. Prevedite: napravite nacrt strojnim ili AI prijevodom, zatim neka pregleda izvorni govornik. Dajte prevoditeljima kontekst: riječ „Book” je imenica na jednom zaslonu, a glagol na drugom.
5. Prevedite sadržaj iz baze podataka i postavite zamjenske jezike.
6. Lokalizirajte ostalo: e-poštu, poruke o greškama, pravne stranice, slike s tekstom.
7. Testirajte svaki jezik na širini telefona te zdesna nalijevo ako je to relevantno.
8. Uspostavite proces da nove značajke stižu s prijevodima, a ne mjesecima kasnije.

Česte greške

• Spajanje rečenica ("You have " + n + " messages"), što se u drugim jezicima raspada.
• Tekst upisan izravno u komponente, poruke o greškama i tekstovi validacije.
• Ručno formatiranje datuma i cijena.
• Zastave kao oznake jezika te automatska preusmjeravanja koja zarobljavaju ljude u pogrešnoj verziji.
• Jedan URL za sve jezike na stranicama koje želite indeksirati.
• Nedostajuće povratne hreflang veze, zbog kojih Google zanemaruje oznake.
• Prevođenje sučelja, ali ne i sadržaja, ili obrnuto.
• Strojni prijevod bez pregleda na stranicama s cijenama, pravnim tekstom i plaćanjem.

Kontrolni popis za višejezičnost

• Nema tekstova vidljivih korisniku upisanih izravno u kod; koriste se pravila za množinu i oznake
• Datumi, brojevi i valute formatirani pomoću Intl
• Preklopnik jezika s nazivima na izvornom jeziku na svakoj stranici; izbor se pamti
• Zasebni URL-ovi po jeziku za javne stranice; nema prisilnih preusmjeravanja
• hreflang na svakoj verziji, uključujući samoreferencu i x-default
• html lang (i dir="rtl" gdje treba) postavljen po stranici
• Sadržaj u bazi preveden, uz razumne zamjenske jezike
• E-pošta i obavijesti šalju se na jeziku korisnika
• Tekst koji vide kupci pregledao je izvorni govornik

Više jezika na Mythexu

Na Mythexu jezike dodajete tako da to zatražite u chatu; ne postoji zasebna ploča za prijevode, pa upute iznad rade kako su napisane. Prvo napravite korak internacionalizacije i provjerite ga u pregledu prije dodavanja jezika; riječ je o velikom preuređivanju, a checkpoint u chatu daje vam točku za povratak ako nešto pođe po zlu (chat i checkpointi). Ako želite da aplikacija automatski prevodi sadržaj pomoću AI-ja ili API-ja za prijevod, to koristi vaš vlastiti API ključ, pohranjen u postavkama projekta (varijable okruženja i tajne); kako koristiti LLM API-je objašnjava troškove. Kad su novi jezici spremni, objavite aplikaciju ponovno.

Pitanja