Cum adaugi mai multe limbi în aplicația ta sau pe site-ul tău

Pentru a adăuga mai multe limbi într-o aplicație, mută tot textul interfeței în fișiere de traducere (câte unul pentru fiecare limbă), încarcă-le cu o bibliotecă i18n și adaugă un comutator de limbă care reține alegerea. Pentru paginile publice pe care vrei să le găsească motorul de căutare, dă fiecărei limbi propriul URL, de exemplu /fr/, și leagă versiunile între ele cu etichete hreflang. Apoi ocupă-te de lucrurile pe care oamenii le uită: datele, numerele și monedele, textul mai lung în unele limbi, scrierile de la dreapta la stânga și conținutul stocat în baza de date.

Termeni pe care îi vei auzi

• Internaționalizare (i18n): pregătirea codului ca să accepte orice limbă — fără șiruri scrise direct în cod, formatare care ține cont de locale, layout-uri flexibile. Cifra „18” înseamnă numărul de litere dintre i și n.
• Localizare (l10n): adaptarea aplicației pentru o anumită limbă sau piață, mai ales traducere, uneori și monedă, imagini și text juridic.
• Locale: o limbă plus, opțional, o regiune, de exemplu en-GB sau pt-BR.

Fă i18n o singură dată, și adăugarea fiecărei limbi noi devine în mare parte muncă de traducere.

Opțiuni și compromisuri

Pentru majoritatea aplicațiilor, o bibliotecă i18n standard cu fișiere de traducere este baza potrivită. Poți folosi traducerea automată sau cu AI pentru ciorne, apoi lasă vorbitori fluenți să verifice ce văd cel mai des clienții.

Părțile unei aplicații multilingve

Fișiere de traducere

În loc de <h1>Welcome back</h1>, codul spune t('dashboard.welcome'), iar fiecare locale are un fișier cu textul:

{
  "dashboard": {
    "welcome": "Bine ai revenit, {{name}}",
    "items_one": "{{count}} element",
    "items_other": "{{count}} elemente"
  }
}

Folosește placeholdere pentru variabile, în loc să lipești fragmente de propoziție, pentru că ordinea cuvintelor diferă între limbi. Și folosește regulile de plural ale bibliotecii: engleza are două forme (1 item, 2 items), dar unele limbi au trei, patru sau mai multe.

Formatarea datelor, numerelor și banilor

Nu le formata manual. API-ul încorporat al browserului, Intl, formatează pentru orice locale: 1,234.5 în engleză devine 1.234,5 în germană; datele trec de la ziua-prima la luna-prima; simbolurile monetare se mută. Stochează datele în UTC și banii ca numere cu un cod de monedă și formatează-le doar pentru afișare.

Layout care se întinde

Textul tradus este adesea mai lung decât în engleză, mai ales în germană și finlandeză. Evită butoanele cu lățime fixă și etichetele tăiate și testează cu cea mai lungă limbă.

Limbi de la dreapta la stânga

Arabă, ebraică, persană și urdu se citesc de la dreapta la stânga. Setează dir="rtl" pe pagină pentru aceste locale și folosește proprietățile logice CSS (margin-inline-start în loc de margin-left; în Tailwind, ms-4 în loc de ml-4), ca layout-ul să se oglindească singur. Iconițele care sugerează direcție, precum săgețile, trebuie și ele întoarse.

Comutatorul de limbă și detectarea

Afișează un comutator pe fiecare pagină, cu numele fiecărei limbi în limba respectivă („Deutsch”, „Français”, „العربية”), nu cu steaguri — steagurile reprezintă țări, nu limbi. Detectează limba preferată a browserului la prima vizită, ca să sugerezi o versiune, dar lasă alegerea explicită a vizitatorului să câștige și reține-o.

URL-uri și SEO

Pentru paginile pe care vrei să le găsească motoarele de căutare, fiecare limbă are nevoie de propriul URL. Din septembrie 2026, ghidul Google pentru site-urile multilingve arată așa:

• URL-uri separate pe limbă — subdirectoarele (example.com/fr/) sunt cele mai simple; subdomeniile și domeniile pe țară funcționează și ele. Parametrii URL (?lang=fr) nu sunt recomandați.
• Nu schimba limba doar prin cookie sau setarea browserului; crawlerul Google ar putea să nu vadă niciodată celelalte versiuni.
• Nu redirecționa automat după limbă; leagă versiunile între ele.
• Folosește hreflang ca să-i spui Google ce pagini sunt traduceri unele ale altora. Fiecare versiune trebuie să se listeze pe sine și pe toate celelalte, altfel adnotările pot fi ignorate. Adaugă x-default pentru pagina de rezervă.
• Google detectează limba unei pagini din conținutul vizibil, nu din lang sau hreflang — deci tradu toată pagina, nu doar meniul.

Totuși, pune <html lang="fr"> pe fiecare versiune: cititoarele de ecran îl folosesc ca să aleagă pronunția corectă, ceea ce ține de cerințele de accesibilitate.

Ecranele aplicației pentru utilizatorii autentificați nu trebuie indexate, deci pentru ele este suficient să stochezi limba în profilul utilizatorului. Vezi SEO pentru site-uri construite cu AI ca să afli cum ajungi ca paginile publice să fie parcurse în primul rând.

Conținutul din baza de date

Textul interfeței stă în fișiere; conținutul precum numele produselor, articolele de blog și categoriile stă în baza de date. Două modele comune:

• Un tabel de traduceri: product_translations (product_id, locale, name, description). Curat și se scalează la multe limbi.
• O coloană JSON pentru fiecare câmp: name: {"en": "...", "fr": "..."}. Mai simplu pentru câteva limbi.

Decide ce se întâmplă când lipsește o traducere — de obicei revii la limba implicită, în loc să lași spațiu gol.

Emailuri și notificări

Stochează limba fiecărui utilizator și folosește-o și pentru emailuri, notificări și PDF-uri. Este ușor să traduci aplicația și să uiți că emailul de bun venit ajunge tot în engleză.

Prompturi care funcționează

Adaugă internaționalizare cu react-i18next. Mută fiecare șir vizibil utilizatorului în locales/en.json, cu chei pe spații de nume, folosește interpolare și reguli de plural în loc de concatenarea șirurilor și formatează datele, numerele și prețurile cu Intl, folosind locale-ul curent. Nu schimba încă niciun cuvânt.

Adaugă franceza și germana. Paginile publice de marketing primesc prefixele de URL /fr/ și /de/, cu engleza la rădăcină, legături hreflang pe fiecare pagină (inclusiv auto-referința și x-default) și html lang setat pe fiecare pagină. Adaugă un comutator de limbă care arată numele nativ al fiecărei limbi. Pentru paginile pentru utilizatorii autentificați, stochează limba în profilul utilizatorului.

Adaugă araba cu suport de la dreapta la stânga: setează dir="rtl" pentru arabă, înlocuiește marginile și paddingurile din stânga/dreapta cu proprietăți logice, oglindește iconițele direcționale și verifică dacă formularele și tabelele se citesc în continuare corect.

Pas cu pas

1. Alege prima limbă suplimentară pe baza cererii reale — de unde vin vizitatorii sau clienții tăi.
2. Internaționalizează codul: mută șirurile în fișiere, adaugă pluralurile și formatarea Intl. Livrează asta doar în engleză și verifică dacă nimic nu s-a schimbat.
3. Decide structura URL-urilor pentru paginile publice și adaugă hreflang.
4. Traduce: fă o ciornă cu traducere automată sau cu AI, apoi verifică-o cu un vorbitor fluent. Dă traducătorilor context — un cuvânt precum „Book” este substantiv pe un ecran și verb pe altul.
5. Traduce conținutul din baza de date și setează valorile de rezervă.
6. Localizează restul: emailuri, mesaje de eroare, pagini juridice, imagini cu text.
7. Testează fiecare limbă la lățimea telefonului și, dacă e cazul, cu scriere de la dreapta la stânga.
8. Stabilește un proces ca funcționalitățile noi să vină cu traduceri, nu cu luni de întârziere.

Greșeli frecvente

• Concatenarea propozițiilor ("You have " + n + " messages"), care se strică în alte limbi.
• Text scris direct în componente, mesaje de eroare și șiruri de validare.
• Formatarea manuală a datelor și prețurilor.
• Steaguri pentru limbi și redirecționări automate care prind oamenii în versiunea greșită.
• Un singur URL pentru toate limbile pe paginile pe care vrei să le indexezi.
• Legături hreflang de întoarcere lipsă, deci Google ignoră adnotările.
• Interfața tradusă, dar nu și conținutul, sau invers.
• Traducere automată nerevizuită pe paginile de prețuri, juridice și de checkout.

Lista de verificare pentru multilingv

• Niciun text vizibil utilizatorului scris direct în cod; reguli de plural și placeholdere folosite
• Date, numere și monede formatate cu Intl
• Comutator de limbă cu numele native pe fiecare pagină; alegerea reținută
• URL-uri separate pe limbă pentru paginile publice; fără redirecționări forțate
• hreflang pe fiecare versiune, inclusiv auto-referința și x-default
• html lang (și dir="rtl" acolo unde e nevoie) setate pe fiecare pagină
• Conținutul din baza de date tradus, cu valori de rezervă sensibile
• Emailuri și notificări trimise în limba utilizatorului
• Textul pentru clienți verificat de un vorbitor fluent

Mai multe limbi pe Mythex

Pe Mythex, adaugi limbi cerându-le în chat — nu există un panou separat de traducere — așa că prompturile de mai sus funcționează ca atare. Fă pasul de internaționalizare primul și verifică-l în Preview înainte de a adăuga limbi; este o refactorizare mare, iar un checkpoint în chat îți dă un punct la care poți reveni dacă ceva se strică (chat și checkpoints). Dacă vrei ca aplicația să traducă automat conținutul cu un AI sau un API de traducere, se folosește propria ta cheie API, stocată în setările proiectului (variabile de mediu și secrete); cum folosești API-uri LLM explică costurile. Publică din nou după ce noile limbi sunt gata.

Întrebări