Traduire une application React ou Next.js en allemand

Ce que l’allemand change dans une interface React

L’allemand est souvent 20 à 35 % plus long que l’anglais, et l’écart se concentre sur les libellés courts, ceux qui occupent des boutons, des onglets ou des en-têtes de colonnes. Les mots composés aggravent le problème : « Gestion des droits d’accès » devient Zugriffsrechteverwaltung, un seul mot qui ne se coupe pas tout seul. « Notifications par e-mail » donne E-Mail-Benachrichtigungen.

• Césure : la propriété CSS hyphens: auto ne coupe correctement les mots allemands que si l’élément ou la page porte lang="de". Dans Next.js, vérifiez que l’attribut lang de la balise <html> suit bien la langue active.
• Majuscules : tous les noms prennent une majuscule, et seulement eux. Pas de majuscule à chaque mot comme en anglais : Neues Projekt erstellen, pas Neues Projekt Erstellen.
• Registre : le vouvoiement Sie est la norme en contexte professionnel (« Speichern Sie Ihre Änderungen »). Beaucoup d’applications grand public tutoient (« Speichere deine Änderungen »). Décidez avant, puis contrôlez le registre sur l’extrait gratuit.
• Ponctuation et formats : guillemets „…“, dates au format 31.12.2025, nombres en 1.234,56 et montants écrits « 12,90 € ». Pas d’espace avant le point d’interrogation : « Passwort vergessen? ».

Pluriels, variables et ordre des mots : les pièges de l’allemand

L’allemand n’a que deux catégories de pluriel CLDR, one et other. Avec i18next, cela donne :

"files_one": "{{count}} Datei"
"files_other": "{{count}} Dateien"

En ICU (react-intl, next-intl) : {count, plural, one {# Datei} other {# Dateien}}.

Deux différences avec le français à connaître :

• Zéro est au pluriel en allemand : « 0 Dateien », alors que le français écrit « 0 fichier ». La bibliothèque choisit la bonne forme à l’exécution, mais testez count = 0.
• Si votre source française contient des clés _many, elles restent dans le fichier allemand, car la structure n’est pas modifiée. Elles ne seront jamais sélectionnées en allemand et ne gênent pas.

Le vrai danger vient des chaînes assemblées dans le code. t('delete') + ' ' + t('file') donne « Löschen Datei », alors que l’allemand met le verbe à la fin : Datei löschen. De même, « Le {{item}} a été supprimé » exige der, die ou das selon le genre du mot inséré. Préférez une phrase entière par clé (« {{item}} wurde gelöscht ») ou un select ICU.

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

Vous récupérez le même fichier, dans le même format, prêt à placer dans locales/de/ ou messages/de.json. L’indentation, l’ordre des clés, les guillemets, les commentaires, les fins de ligne, l’encodage et le BOM sont conservés. Seules les valeurs changent.

• Les clés imbriquées, les interpolations {{name}}, les arguments ICU et les balises comme <0>…</0> de Trans ou <b> de react-intl sont conservés.
• Chaque valeur traduite est comparée à la source, variables et balises comprises. En cas d’écart persistant, la valeur source est gardée et le rapport le signale.
• Ne sont pas traduits : les clés, les valeurs vides, les URL, les adresses e-mail, les nombres, les couleurs, les formats de date, les identifiants et ce qui est marqué non traduisible. Une valeur « 9.99 » reste « 9.99 » : le format allemand doit venir de Intl.NumberFormat('de-DE') ou du formateur de next-intl.
• Le rapport liste les chaînes traduites, celles laissées telles quelles et la raison.

Manuce ne traduit pas le texte écrit en dur dans vos composants JSX ou TSX. Il ne configure pas le routage de la locale de et ne retouche pas votre CSS. Il ne produit pas non plus de traduction assermentée : pour des CGV ou un Impressum, faites valider le contenu juridique par un professionnel. Le prix porte sur les mots des valeurs, clés et balises exclues.

Préparer les fichiers avant le dépôt

• Rassemblez tout le texte dans les JSON. Cherchez les chaînes restées en dur dans les composants, les metadata de Next.js et les messages d’erreur de formulaire.
• Supprimez les concaténations repérées plus haut. Une clé doit contenir une phrase complète, avec ses variables.
• Validez le JSON : une virgule finale ou un guillemet non échappé dans fr.json se retrouverait dans de.json.
• Donnez du contexte par les clés. button.save plutôt que save : « Speichern » et « Gespeichert » ne se traduisent pas pareil.
• Un fichier par namespace (common.json, checkout.json) : le rapport sera plus lisible.

Vérifier dans l’application après livraison

1. Basculez sur de et parcourez d’abord les écrans denses : navigation, onglets, boutons d’action, en-têtes de tableaux, en largeur mobile.
2. Repérez les débordements : un « Abbrechen » ou un « Einstellungen » coupé révèle une largeur fixe à remplacer par min-width.
3. Testez les pluriels avec 0, 1 et 2 éléments.
4. Lisez le rapport et traitez les valeurs gardées en langue source.
5. Si vous avez choisi Sie, cherchez « du », « dein » et « deine » pour repérer un tutoiement isolé, et inversement.

En pratique

1. Exportez les fichiers JSON de la langue source (un par namespace).
2. Déposez-les sur Manuce, lisez le devis et l’extrait gratuit pour contrôler le registre.
3. Récupérez le fichier allemand et le rapport.
4. Placez le fichier dans le dossier de la locale de et testez les écrans denses et les pluriels.