Com afegir diversos idiomes a la teva app o web

Per afegir diversos idiomes a una app, mou tot el text de la interfície a fitxers de traducció (un per idioma), carrega'ls amb una biblioteca i18n i afegeix un selector d'idioma que recordi l'elecció. Per a les pàgines públiques que vols que es trobin en cercar, dona a cada idioma la seva pròpia URL, com /fr/, i enllaça les versions amb etiquetes hreflang. Després, ocupa't de les parts que la gent sol oblidar: dates, números i monedes, text més llarg en alguns idiomes, escriptures de dreta a esquerra i el contingut emmagatzemat a la base de dades.

Termes que sentiràs

• Internacionalització (i18n): preparar el codi perquè admeti qualsevol idioma —sense cadenes escrites directament, format segons la configuració regional i dissenys flexibles. El «18» és el nombre de lletres que hi ha entre la i i la n.
• Localització (l10n): adaptar l'app a un idioma o mercat concret, sobretot la traducció, i de vegades també la moneda, les imatges i el text legal.
• Configuració regional (locale): un idioma i, opcionalment, una regió, com en-GB o pt-BR.

Fes la i18n una sola vegada i afegir cada nou idioma serà sobretot feina de traducció.

Opcions i compromisos

Per a la majoria d'apps, una biblioteca i18n estàndard amb fitxers de traducció és la base correcta. Fes esborranys amb traducció automàtica o amb IA si vols i, després, fes que una persona que domini l'idioma revisi el que els clients veuen més.

Les parts d'una app multilingüe

Fitxers de traducció

En lloc de <h1>Welcome back</h1>, el codi diu t('dashboard.welcome'), i cada idioma té un fitxer amb el text:

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

Usa marcadors de posició per a les variables en lloc d'unir fragments de frase, perquè l'ordre de les paraules canvia d'un idioma a un altre. I fes servir les regles de plural de la biblioteca: l'anglès té dues formes (1 item, 2 items), però alguns idiomes en tenen tres, quatre o més.

Format de dates, números i diners

No ho formatis a mà. L'API Intl del navegador formata per a qualsevol configuració regional: 1,234.5 en anglès és 1.234,5 en alemany; les dates canvien entre dia primer i mes primer; els símbols de moneda es mouen. Guarda les dates en UTC i els diners com a números amb un codi de moneda, i formata només en el moment de mostrar-los.

Disseny que s'adapta

El text traduït sovint és més llarg que l'anglès —sobretot l'alemany i el finès. Evita botons d'amplada fixa i etiquetes retallades, i prova-ho amb l'idioma més llarg que tinguis.

Idiomes de dreta a esquerra

L'àrab, l'hebreu, el persa i l'urdú es llegeixen de dreta a esquerra. Posa dir="rtl" a la pàgina per a aquestes configuracions regionals i fes servir propietats lògiques de CSS (margin-inline-start en lloc de margin-left; amb Tailwind, ms-4 en lloc de ml-4) perquè el disseny es reflecteixi sol. Les icones que indiquen una direcció, com les fletxes, també s'han de girar.

Selector d'idioma i detecció

Mostra un selector a cada pàgina, etiquetat amb el nom de cada idioma en el seu propi idioma («Deutsch», «Français», «العربية») en lloc de banderes: les banderes representen països, no idiomes. Detecta l'idioma preferit del navegador en la primera visita per suggerir una versió, però deixa que l'elecció explícita del visitant prevalgui i recorda-la.

URL i SEO

Per a les pàgines que vols que surtin als resultats de cerca, cada idioma necessita la seva pròpia URL. A partir del setembre de 2026, la guia de Google per als llocs multilingües és aquesta:

• URL separades per idioma: els subdirectoris (example.com/fr/) són l'opció més senzilla; els subdominis i els dominis de país també funcionen. Els paràmetres d'URL (?lang=fr) no es recomanen.
• No canviïs d'idioma només amb una cookie o la configuració del navegador: el rastrejador de Google podria no veure mai les altres versions.
• No facis redireccions automàtiques per idioma; enllaça les versions entre si.
• Fes servir hreflang per indicar a Google quines pàgines són traduccions les unes de les altres. Cada versió ha d'incloure's a si mateixa i a totes les altres, o les anotacions es poden ignorar. Afegeix x-default per a la pàgina de reserva.
• Google detecta l'idioma d'una pàgina pel seu contingut visible, no pel lang ni per hreflang; per tant, tradueix tota la pàgina, no només el menú.

Tot i així, posa <html lang="fr"> a cada versió: els lectors de pantalla l'usen per triar la pronunciació correcta, cosa que és un requisit d'accessibilitat.

Les pantalles de l'app amb sessió iniciada no necessiten indexar-se, així que per a aquestes és correcte guardar l'idioma al perfil de l'usuari. Consulta SEO per a webs creades amb IA per aconseguir que els rastrejadors visitin les pàgines públiques en primer lloc.

Contingut a la base de dades

El text de la interfície viu en fitxers; el contingut, com els noms de productes, les entrades del blog i les categories, viu a la base de dades. Dos patrons habituals:

• Una taula de traduccions: product_translations (product_id, locale, name, description). És neta i escala a molts idiomes.
• Una columna JSON per camp: name: {"en": "...", "fr": "..."}. És més senzilla per a pocs idiomes.

Decideix què passa quan falta una traducció: normalment, cal recórrer a l'idioma per defecte en lloc de mostrar un espai en blanc.

Correus electrònics i notificacions

Guarda l'idioma de cada usuari i fes-lo servir també per als correus, les notificacions i els PDF. És fàcil traduir l'app i oblidar que el correu de benvinguda continua arribant en anglès.

Indicacions que funcionen

Afegeix la internacionalització amb react-i18next. Mou tota cadena visible per a l'usuari a locales/en.json amb claus amb espai de noms, fes servir interpolació i regles de plural en lloc de concatenar cadenes, i formata dates, números i preus amb Intl segons la configuració regional actual. De moment, no canviïs cap redacció.

Afegeix el francès i l'alemany. Les pàgines de màrqueting públiques tindran els prefixos d'URL /fr/ i /de/, amb l'anglès a l'arrel; enllaços hreflang a cada pàgina (incloent l'autoreferència i x-default), i html lang definit per pàgina. Afegeix un selector d'idioma que mostri el nom nadiu de cada idioma. Per a les pàgines amb sessió iniciada, guarda l'idioma al perfil de l'usuari.

Afegeix l'àrab amb suport de dreta a esquerra: posa dir="rtl" per a l'àrab, substitueix els marges i els farcits esquerra/dreta per propietats lògiques, reflecteix les icones direccionals i comprova que els formularis i les taules continuen llegint-se bé.

Pas a pas

1. Tria el primer idioma addicional segons la demanda real: on són els teus visitants o clients.
2. Internacionalitza el codi: mou les cadenes a fitxers, afegeix plurals i formatació amb Intl. Publica-ho només amb anglès i comprova que no ha canviat res.
3. Decideix l'estructura d'URL per a les pàgines públiques i afegeix hreflang.
4. Tradueix: fes un esborrany amb traducció automàtica o amb IA i després revisa'l amb una persona que domini l'idioma. Dona context als traductors: una paraula com «Book» és un substantiu en una pantalla i un verb en una altra.
5. Tradueix el contingut de la base de dades i defineix les alternatives.
6. Localitza la resta: correus, missatges d'error, pàgines legals, imatges amb text.
7. Prova cada idioma a l'amplada d'un telèfon i, si cal, amb dreta a esquerra.
8. Crea un procés perquè les noves funcions es publiquin amb traduccions i no mesos després.

Errors habituals

• Concatenar frases ("You have " + n + " messages"), cosa que es trenca en altres idiomes.
• Text escrit directament als components, missatges d'error i cadenes de validació.
• Formatar dates i preus a mà.
• Banderes per representar idiomes, i redireccions automàtiques que atrapen la gent en la versió equivocada.
• Una sola URL per a tots els idiomes a les pàgines que vols indexades.
• Falten els enllaços de retorn hreflang, cosa que fa que Google ignori les anotacions.
• Traduir la interfície però no el contingut, o al revés.
• Traducció automàtica sense revisar a les pàgines de preus, legals i de pagament.

Llista de comprovació multilingüe

• No hi ha cadenes visibles per a l'usuari escrites directament; s'usen regles de plural i marcadors de posició
• Dates, números i monedes formatats amb Intl
• Selector d'idioma amb noms nadius a cada pàgina; l'elecció es recorda
• URL separades per idioma a les pàgines públiques; sense redireccions forçades
• hreflang a cada versió, incloent l'autoreferència i x-default
• html lang (i dir="rtl" quan calgui) definit per pàgina
• Contingut de la base de dades traduït amb alternatives sensates
• Correus i notificacions enviats en l'idioma de l'usuari
• Text per als clients revisat per una persona que domini l'idioma

Diversos idiomes a Mythex

A Mythex, afegeixes idiomes demanant-ho al xat; no hi ha cap panell de traducció separat, de manera que les indicacions de dalt funcionen tal com estan escrites. Fes primer el pas d'internacionalització i comprova-ho a la Vista prèvia abans d'afegir idiomes: és una refactorització important, i un punt de control del xat et dona un punt al qual tornar si alguna cosa es trenca (xat i punts de control). Si vols que l'app tradueixi contingut automàticament amb una IA o una API de traducció, això fa servir la teva pròpia clau d'API, guardada a la configuració del projecte (variables d'entorn i secrets); com fer servir les API de LLM explica els costos. Torna a publicar quan els nous idiomes estiguin a punt.

Preguntes