Traduire une application React ou Next.js en espagnol

Ce qui change quand l'interface passe en espagnol

Une chaîne espagnole est en général plus longue que sa source anglaise, d'une longueur proche du français. Dans une interface React, cela se voit d'abord sur les éléments courts : Save devient Guardar, Sign in devient Iniciar sesión, Settings devient Configuración. Un bouton à largeur fixe, un onglet ou une colonne de tableau peuvent déborder, ou être tronqués par un text-overflow: ellipsis.

• Ponctuation inversée : une question s'ouvre par ¿ et une exclamation par ¡. Delete this file? devient ¿Eliminar este archivo?. Si la phrase est découpée en deux clés assemblées dans le JSX, le signe d'ouverture tombe dans la mauvaise clé, ou disparaît.
• Majuscules : l'espagnol ne met pas de capitale à chaque mot d'un titre. Account Settings devient Configuración de la cuenta. Jours et mois s'écrivent en minuscules.
• Accord en genre : Welcome, {{name}} donne Bienvenido ou Bienvenida selon la personne. Une formule neutre comme Te damos la bienvenida, {{name}} évite le problème quand l'application ignore le genre de l'utilisateur.

Les caractères á, é, í, ó, ú, ñ et ü ne posent pas de difficulté si vos fichiers sont en UTF-8 et vos polices complètes. Vérifiez tout de même une police maison réduite à un sous-ensemble de caractères.

Pluriels : one, many, other selon la bibliothèque

Les règles CLDR de l'espagnol comptent trois catégories : one, many et other. Zéro prend la forme other : on écrit 0 archivos, au pluriel, là où le français dit « 0 fichier ». La catégorie many, récente, vise les grands nombres ronds comme un million, devant lesquels l'espagnol ajoute « de » (1 millón de usuarios). Intl.PluralRules la renvoie dans les navigateurs récents.

• react-intl et next-intl (syntaxe ICU) : {count, plural, one {# archivo} other {# archivos}} fonctionne, car ICU retombe sur other quand une branche manque. La structure du message est conservée ; seuls les textes des branches sont traduits et # reste en place.
• i18next (suffixes) : chaque forme est une clé distincte, items_one et items_other. Pour un nombre classé many, i18next cherche items_many. Si votre fichier source n'a que deux formes, le fichier espagnol rendu en aura deux, puisque les clés ne sont jamais modifiées. Ajoutez ensuite items_many en recopiant la valeur de items_other, ou testez avec count: 1000000.

Méfiez-vous des pluriels fabriqués dans le code, du type item{count > 1 ? 's' : ''} : l'espagnol accorde aussi l'article et l'adjectif (los archivos seleccionados), un « s » ajouté ne suffit pas.

Ce que Manuce rend exactement, et ce qu'il ne fait pas

Vous déposez le fichier JSON tel qu'il sort du projet : locales/en/common.json pour i18next, messages/en.json pour next-intl, ou le catalogue de react-intl. Manuce rend le même fichier, dans le même format : indentation, ordre des clés, guillemets, commentaires, fins de ligne, encodage et BOM sont conservés. Seules les valeurs changent ; les clés imbriquées restent intactes.

• Les interpolations {{name}}, les messages ICU et les balises (par exemple <bold> ou <1> d'un composant Trans) sont conservés. Chaque valeur traduite est comparée à la source ; en cas d'écart persistant sur une variable ou une balise, la valeur source est gardée et le rapport le dit.
• Ne sont pas traduits : les clés, les valeurs vides, les URL (un chemin comme /pricing reste tel quel), les adresses email, les nombres, les couleurs, les formats de date, les identifiants et tout ce qui est marqué non traduisible.
• Le rapport liste les chaînes traduites et celles laissées telles quelles, avec la raison.

Manuce n'ajoute aucune clé (donc pas de forme _many), ne touche ni à la configuration de routage de Next.js ni au code des composants, et ne renomme pas le fichier. Le prix porte sur les mots des valeurs, clés et balises exclues.

Espagne ou Amérique latine, tú ou usted

Il n'existe pas un espagnol d'interface unique. Le vocabulaire varie : ordenador en Espagne, computadora dans la plupart de l'Amérique latine ; móvil face à celular. Dans le projet, cela correspond à un choix de locale : es, es-ES ou es-419 (Amérique latine) dans la liste des locales de votre routage. Tranchez avant de commander : c'est vous qui nommez le fichier et le dossier.

Le registre compte autant. Beaucoup d'applications grand public tutoient (Guarda tus cambios), alors qu'un logiciel bancaire ou administratif emploie plutôt usted (Guarde sus cambios). En Argentine et en Uruguay, le voseo est courant (Guardá tus cambios). Mélanger les trois dans une même interface se remarque immédiatement.

L'extrait gratuit, un paragraphe du fichier traduit au niveau choisi avant de payer, permet de juger le registre et le vocabulaire obtenus. Pour une application publiée, le niveau Professionnel, réalisé par le spécialiste du domaine, vise des chaînes prêtes à transmettre.

Préparer les fichiers et vérifier après livraison

• Regroupez les phrases découpées en plusieurs clés : une seule clé avec variable (Delete {{file}}?) permet de placer ¿ au bon endroit et de réordonner les mots.
• Marquez comme non traduisibles les noms de marque, les codes d'erreur affichés et les termes produit que vous gardez tels quels.
• Vérifiez que le JSON est valide (pas de virgule finale) et encodé en UTF-8.
• Après livraison, placez le fichier dans locales/es/ ou messages/es.json, ajoutez les clés _many si vous utilisez i18next, puis parcourez les écrans les plus denses : barre de navigation, boutons, modales, messages de validation de formulaire.
• Laissez Intl mettre en forme nombres et dates plutôt que de les écrire dans les chaînes : en es-ES, 12345,5 s'affiche 12.345,5, alors que le Mexique utilise le point décimal (12,345.5).

Lisez enfin le rapport : une chaîne restée dans la langue source y figure avec sa raison, par exemple une variable qui ne correspondait plus.

En pratique

1. Exportez le fichier de langue source (par exemple messages/en.json) sans le retoucher.
2. Déposez-le : le devis est immédiat, calculé sur les mots des valeurs, et l'extrait gratuit montre le registre obtenu.
3. Récupérez le fichier espagnol et son rapport dans votre espace client.
4. Placez-le dans le dossier de la locale es, ajoutez les clés _many si vous utilisez i18next, puis testez les écrans.