Kako dodati više jezika u aplikaciju ili web stranicu

Da biste aplikaciji dodali više jezika, premjestite sav tekst sučelja u datoteke s prijevodima (jednu po jeziku), učitajte ih pomoću i18n biblioteke i dodajte prekidač jezika koji pamti izbor. Za javne stranice koje želite da se nađu u pretrazi, dajte svakom jeziku njegov URL, na primjer /fr/, i povežite verzije hreflang oznakama. Zatim obradite dijelove koje ljudi obično zaborave: datume, brojeve i valute, duži tekst u nekim jezicima, pisma zdesna nalijevo i sadržaj pohranjen u bazi podataka.

Pojmovi koje ćete čuti

• Internacionalizacija (i18n): priprema koda da podrži bilo koji jezik — nema tekstova unesenih u kod, formatiranja prema lokalu, fleksibilnih rasporeda. Broj „18“ označava broj slova između i i n.
• Lokalizacija (l10n): prilagođavanje aplikacije za određeni jezik ili tržište, uglavnom prevođenje, ponekad i valuta, slike i pravni tekst.
• Lokal (locale): jezik i, opciono, regija, na primjer en-GB ili pt-BR.

Uradite i18n jednom, pa dodavanje svakog novog jezika postaje uglavnom posao prevođenja.

Opcije i kompromisi

Za većinu aplikacija, standardna i18n biblioteka s datotekama prijevoda je pravi temelj. Ako želite, napravite nacrte prijevoda mašinskim ili AI prevođenjem, zatim neka tečni govornici pregledaju ono što kupci najviše vide.

Dijelovi višejezične aplikacije

Datoteke s prijevodima

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

{
  "dashboard": {
    "welcome": "Dobro došli nazad, {{name}}",
    "items_one": "{{count}} stavka",
    "items_other": "{{count}} stavki"
  }
}

Koristite varijable (placeholdere) umjesto spajanja dijelova rečenica, jer se redoslijed riječi razlikuje među jezicima. I koristite pravila za množinu 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 koji lokal: 1,234.5 na engleskom je 1.234,5 na njemačkom; datumi prelaze između formata dan-mjesec i mjesec-dan; simboli valuta se pomjeraju. Čuvajte datume u UTC formatu i novac kao brojeve uz kod valute, a formatirajte samo za prikaz.

Raspored koji se rasteže

Prevedeni tekst je često duži nego na engleskom, posebno njemački i finski. Izbjegavajte dugmad fiksne širine i skraćene oznake, i testirajte s najdužim jezikom.

Jezici zdesna nalijevo

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

Prekidač jezika i detekcija

Prikažite prekidač na svakoj stranici, s nazivom svakog jezika na njegovom jeziku („Deutsch“, „Français“, „العربية“), a ne zastavama — zastave predstavljaju države, a ne jezike. Pri prvoj posjeti otkrijte preferirani jezik preglednika da predložite verziju, ali neka izričit izbor posjetioca ima prednost i neka se pamti.

URL-ovi i SEO

Za stranice koje želite u rezultatima pretrage, svaki jezik treba imati svoj URL. Od septembra 2026, Googleove smjernice za višejezične sajtove su:

• Zasebni URL-ovi po jeziku — poddirektoriji (example.com/fr/) su najjednostavniji; poddomene i domene po državi također rade. URL parametri (?lang=fr) se ne preporučuju.
• Ne mijenjajte jezik samo kolačićem ili postavkom preglednika; Googleov pretraživač možda nikada ne vidi ostale verzije.
• Ne preusmjeravajte automatski po jeziku; povežite verzije linkovima.
• Koristite hreflang da Google zna koje su stranice prijevodi jedna drugoj. Svaka verzija mora navesti sebe i sve ostale, inače oznake mogu biti zanemarene. Dodajte x-default za zadanu stranicu.
• Google prepoznaje jezik stranice po vidljivom sadržaju, a ne po lang ili hreflang oznakama — zato prevedite cijelu stranicu, a ne samo meni.

Ali i dalje postavite <html lang="fr"> na svakoj verziji: čitači ekrana ga koriste da odaberu ispravan izgovor, što je zahtjev pristupačnosti.

Ekrani prijavljenih korisnika ne moraju biti indeksirani, pa je za njih dovoljno da se jezik čuva u profilu korisnika. Pogledajte SEO za web stranice napravljene uz AI kako bi javne stranice uopće bile pretražene.

Sadržaj u bazi podataka

Tekst sučelja živi u datotekama; sadržaj poput naziva proizvoda, blog postova i kategorija živi u bazi podataka. Dva česta obrasca:

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

Odlučite šta se dešava kada prijevod nedostaje — obično se vraća na zadani jezik umjesto da se prikaže prazno mjesto.

E-pošta i obavještenja

Sačuvajte jezik svakog korisnika i koristite ga za e-poruke, obavještenja i PDF-ove. Lako je prevesti aplikaciju pa zaboraviti da i dobrodošlica e-poštom još uvijek stiže na engleskom.

Upiti koji rade

Dodaj internacionalizaciju s react-i18next. Premjesti svaki tekst vidljiv korisnicima u locales/en.json s ključevima po imenskim prostorima, koristi interpolaciju i pravila za množinu umjesto spajanja stringova, i formatiraj datume, brojeve i cijene pomoću Intl prema trenutnom lokalu. Još ne mijenjaj tekst.

Dodaj francuski i njemački. Javne marketinške stranice dobiju prefikse /fr/ i /de/ uz engleski u korijenu, hreflang veze na svakoj stranici (uključujući samoreferencu i x-default), i html lang postavljen po stranici. Dodaj prekidač jezika koji prikazuje naziv svakog jezika na njegovom jeziku. Za stranice prijavljenih korisnika sačuvaj jezik u profilu korisnika.

Dodaj arapski s podrškom za pisanje zdesna nalijevo: postavi dir="rtl" za arapski, zamijeni lijeve i desne margine i paddinge logičkim svojstvima, okreni ikone koje pokazuju smjer, i provjeri da obrasci i tabele i dalje čitljivo izgledaju.

Korak po korak

1. Izaberite prvi dodatni jezik na osnovu stvarne potražnje — gdje su vaši posjetioci ili kupci.
2. Internacionalizujte kod: premjestite stringove u datoteke, dodajte množinu i Intl formatiranje. Objavite ovo samo na engleskom i provjerite da se ništa nije promijenilo.
3. Odredite strukturu URL-ova za javne stranice i dodajte hreflang.
4. Prevedite: napravite nacrt mašinskim ili AI prevođenjem, zatim pregledajte s tečnim govornikom. Dajte prevodiocima kontekst — riječ „Book“ je imenica na jednom ekranu, a glagol na drugom.
5. Prevedite sadržaj iz baze i postavite zamjene.
6. Lokalizujte ostalo: e-poruke, poruke o greškama, pravne stranice, slike s tekstom na njima.
7. Testirajte svaki jezik na širini telefona, i zdesna nalijevo ako je relevantno.
8. Postavite proces da nove funkcije 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 unesen direktno u komponente, poruke o greškama i stringovi za validaciju.
• Ručno formatiranje datuma i cijena.
• Zastave umjesto jezika i automatska preusmjeravanja koja zarobe ljude u pogrešnoj verziji.
• Jedan URL za sve jezike na stranicama koje želite indeksirane.
• Nedostajuće povratne hreflang veze, pa Google ignoriše oznake.
• Prevođenje sučelja, ali ne i sadržaja, ili obrnuto.
• Neprovjereno mašinsko prevođenje na stranicama s cijenama, pravnim tekstom i plaćanjem.

Kontrolna lista za višejezičnost

• Nema tekstova vidljivih korisnicima unesenih u kod; koriste se pravila za množinu i varijable
• Datumi, brojevi i valute formatirani pomoću Intl
• Prekidač jezika s nazivima na njihovim jezicima na svakoj stranici; izbor se pamti
• Zasebni URL-ovi po jeziku za javne stranice; bez prisilnih preusmjeravanja
• hreflang na svakoj verziji, uključujući samoreferencu i x-default
• html lang (i dir="rtl" gdje treba) postavljeni po stranici
• Sadržaj baze preveden, s razumnim zamjenama
• E-poruke i obavještenja šalju se na jeziku korisnika
• Tekst za kupce pregledao tečan govornik

Višejezičnost na Mythexu

Na Mythexu jezike dodajete tako što to tražite u chatu — nema posebnog panela za prevođenje — pa upiti iznad rade kako su napisani. Prvo uradite korak internacionalizacije i provjerite ga u pregledu prije dodavanja jezika; to je velika prerada, a checkpoint u chatu vam daje tačku za povratak ako nešto pukne (chat i checkpointi). Ako želite da aplikacija automatski prevodi sadržaj pomoću AI ili API-ja za prevođenje, to koristi vaš vlastiti API ključ, pohranjen u postavkama projekta (varijable okruženja i tajne); kako koristiti LLM API-je objašnjava troškove. Objavite ponovo kada su novi jezici spremni.

Pitanja