Kako dodati više jezika u aplikaciju ili sajt

Da biste dodali više jezika aplikaciji, premestite ceo tekst interfejsa u fajlove sa prevodima (po jedan za svaki jezik), učitajte ih pomoću i18n biblioteke i dodajte prekidač jezika koji pamti izbor. Za javne stranice koje želite da se nalaze na pretrazi, dajte svakoj jezičkoj verziji sopstveni URL, npr. /fr/, i povežite verzije hreflang oznakama. Zatim obradite delove na koje ljudi zaborave: datume, brojeve i valute, duži tekst na nekim jezicima, pisma zdesna nalevo i sadržaj u bazi podataka.

Reči koje ćete čuti

• Internacionalizacija (i18n): priprema koda da podrži bilo koji jezik — bez tekstova upisanih direktno u kod, formatiranje prilagođeno lokalu i fleksibilan izgled. Broj „18” je broj slova između i i n.
• Lokalizacija (l10n): prilagođavanje aplikacije za određeni jezik ili tržište, uglavnom prevod, a ponekad i valuta, slike i pravni tekst.
• Lokal (locale): jezik i, opciono, region, npr. 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 sa fajlovima prevoda je pravi temelj. Ako želite, napravite nacrte prevoda mašinskim ili AI prevodom, pa neka ih govornik tekućeg jezika pregleda za tekst koji najviše vide kupci.

Delovi višejezične aplikacije

Fajlovi sa prevodima

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

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

Za promenljive koristite placeholder-e umesto spajanja fragmenata rečenica, jer se redosled reči razlikuje među jezicima. I koristite pravila za množine iz biblioteke: engleski ima dva oblika (1 item, 2 items), ali neki jezici imaju tri, četiri ili više oblika. Srpski ima tri oblika (1 stavka, 2 stavke, 5 stavki).

Formatiranje datuma, brojeva i novca

Nemojte ih formatirati ručno. Ugrađeni Intl API pregledača formatira za bilo koji lokal: 1,234.5 na engleskom je 1.234,5 na nemačkom; datumi se menjaju između dana-pa-meseca i meseca-pa-dana; simboli valuta se pomeraju. Čuvajte datume u UTC-u, a novac kao brojeve sa kodom valute, i formatirajte ih samo za prikaz.

Izgled koji se rasteže

Prevedeni tekst je često duži od engleskog — posebno nemačke i finske reči. Izbegavajte dugmad fiksne širine i skraćene oznake, i testirajte na najdužem jeziku.

Jezici zdesna nalevo

Arapski, hebrejski, persijski i urdu čitaju se zdesna nalevo. Postavite dir="rtl" na stranici za te lokale i koristite CSS logička svojstva (margin-inline-start umesto margin-left; u Tailwindu ms-4 umesto ml-4) da se izgled sam ogleda. Ikone koje impliciraju smer, poput strelica, takođe treba okrenuti.

Prekidač jezika i detekcija

Prikažite prekidač na svakoj stranici, s nazivom svakog jezika na njegovom sopstvenom jeziku („Deutsch”, „Français”, „العربية”), a ne zastavama — zastave predstavljaju države, a ne jezike. Pri prvoj poseti detektujte preferirani jezik pregledača da predložite verziju, ali neka izbor posetioca bude merodavan i neka se pamti.

URL-ovi i SEO

Za stranice koje želite u rezultatima pretrage, svaki jezik treba sopstveni URL. Od septembra 2026. godine, Googleovo uputstvo za višejezične sajtove glasi:

• Zasebni URL-ovi po jeziku — potfascikle (example.com/fr/) su najjednostavnije; poddomeni i domeni po državi takođe rade. URL parametri (?lang=fr) se ne preporučuju.
• Ne menjajte jezik samo kolačićem ili postavkom pregledača; Googleov crawler možda nikada neće videti druge verzije.
• Ne preusmeravajte automatski po jeziku; umesto toga povežite verzije.
• Koristite hreflang da Googlu kažete koje stranice su prevodi jedna druge. Svaka verzija mora navesti sebe i sve ostale, inače oznake mogu biti zanemarene. Dodajte x-default za rezervnu stranicu.
• Google određuje jezik stranice iz vidljivog sadržaja, a ne iz lang ili hreflang oznake — zato prevedite celu stranicu, a ne samo meni.

I dalje postavite <html lang="fr"> na svaku verziju: čitači ekrana ga koriste da izaberu ispravan izgovor, što je zahtev za pristupačnost.

Ekrani aplikacije za prijavljene korisnike ne moraju biti indeksirani, pa je za njih dovoljno da se jezik čuva u profilu korisnika. Pogledajte SEO za sajtove napravljene AI-jem da bi javne stranice bile prikupljene pretragom.

Sadržaj u bazi podataka

Tekst interfejsa živi u fajlovima; sadržaj poput naziva proizvoda, blog tekstova i kategorija živi u bazi podataka. Dva česta obrasca:

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

Odlučite šta se dešava kada prevod nedostaje — obično se vraćate na podrazumevani jezik umesto da prikazujete prazan prostor.

Emailovi i obaveštenja

Čuvajte jezik svakog korisnika i koristite ga i za emailove, obaveštenja i PDF-ove. Lako je prevesti aplikaciju i zaboraviti da email dobrodošlice i dalje stiže na engleskom.

Prompt-ovi koji rade

Dodajte internacionalizaciju uz react-i18next. Premestite svaki tekst vidljiv korisniku u locales/en.json sa imenovanim ključevima, koristite interpolaciju i pravila za množine umesto spajanja stringova, i formatirajte datume, brojeve i cene pomoću Intl sa trenutnim lokalom. Još ne menjajte nijednu reč.

Dodajte francuski i nemački. Javne marketinške stranice dobijaju prefikse URL-a /fr/ i /de/, a engleski ostaje u korenu, uz hreflang veze na svakoj stranici (uključujući samoreferencu i x-default) i html lang postavljen po stranici. Dodajte prekidač jezika koji prikazuje izvorni naziv svakog jezika. Za stranice prijavljenih korisnika sačuvajte jezik u profilu korisnika.

Dodajte arapski uz podršku za pisanje zdesna nalevo: postavite dir="rtl" za arapski, zamenite leve i desne margine i paddinge logičkim svojstvima, ogledajte ikone koje pokazuju smer i proverite da obrasci i tabele i dalje lepo izgledaju.

Korak po korak

1. Izaberite prvi dodatni jezik na osnovu stvarne potražnje — gde su vaši posetioci ili kupci.
2. Internacionalizujte kod: premestite stringove u fajlove, dodajte množine i Intl formatiranje. Isporučite sa samo engleskim i proverite da se ništa nije promenilo.
3. Odlučite strukturu URL-ova za javne stranice i dodajte hreflang.
4. Prevedite: napravite nacrt mašinskim ili AI prevodom, pa ga pregleda govornik jezika. Dajte prevodiocima kontekst — reč „Book” je imenica na jednom ekranu, a glagol na drugom.
5. Prevedite sadržaj iz baze i postavite rezervne jezike.
6. Lokalizujte ostalo: emailove, poruke o greškama, pravne stranice, slike sa tekstom.
7. Testirajte svaki jezik na širini telefona, i zdesna nalevo ako je relevantno.
8. Uspostavite proces da nove funkcije stižu sa prevodima, a ne mesecima kasnije.

Česte greške

• Spajanje rečenica ("You have " + n + " messages"), što se lomi u drugim jezicima.
• Tekst upisan direktno u komponente, poruke o greškama i stringovi za validaciju.
• Ručno formatiranje datuma i cena.
• Zastave za jezike i automatska preusmeravanja koja zarobljavaju ljude u pogrešnoj verziji.
• Jedan URL za sve jezike na stranicama koje želite da se indeksiraju.
• Nedostajuće hreflang povratne veze, pa Google ignoriše oznake.
• Prevođenje interfejsa, ali ne i sadržaja, ili obrnuto.
• Neproveren mašinski prevod na stranicama sa cenama, pravnim tekstom i plaćanjem.

Kontrolna lista za više jezika

• Nema tekstova vidljivih korisniku upisanih direktno u kod; koriste se pravila za množine i promenljive
• Datumi, brojevi i valute formatirani pomoću Intl
• Prekidač jezika sa izvornim nazivima na svakoj stranici; izbor se pamti
• Zasebni URL-ovi po jeziku za javne stranice; nema prinudnih preusmeravanja
• hreflang na svakoj verziji, uključujući samoreferencu i x-default
• html lang (i dir="rtl" gde treba) postavljen po stranici
• Sadržaj u bazi preveden, sa razumnim rezervama
• Emailovi i obaveštenja šalju se na jeziku korisnika
• Tekst namenjen kupcima pregledao je govornik jezika

Više jezika na Mythexu

Na Mythexu dodajete jezike tako što to tražite u četu — ne postoji poseban panel za prevođenje — pa gornji prompt-ovi rade kako su napisani. Prvo uradite korak internacionalizacije i proverite ga u Preview-u pre dodavanja jezika; to je velika preinaka, a checkpoint u četu daje tačku za povratak ako nešto pođe po zlu (četovi i checkpoint-i). Ako želite da aplikacija automatski prevodi sadržaj pomoću AI-ja ili API-ja za prevođenje, to koristi vaš sopstveni API ključ, sačuvan u podešavanjima projekta (promenljive okruženja i tajne); kako koristiti LLM API-je objašnjava troškove. Kada su novi jezici spremni, ponovo objavite aplikaciju.

Pitanja