Internationaliser un site React ou Next.js (next-intl) | We.Inc
Traduisez correctement un site React ou Next.js : fichiers de messages, routage par langue avec next-intl, formatage Intl des dates, des montants et des pluriels, mises en page de droite à gauche et balises hreflang.
Gardez toutes les chaînes dans un fichier de messages JSON par langue, donnez à chaque langue sa propre URL comme /de/about, et formatez les dates, les prix et les pluriels avec les API Intl intégrées au navigateur. Dans le Next.js App Router, next-intl relie le tout : un segment de route [locale], un proxy qui choisit la langue, et useTranslations dans les composants.
Les éléments d'un site traduit
Élément
Quoi utiliser
Chaînes
messages/en.json, messages/de.json, etc.
URL
Un préfixe de chemin par langue : /en/..., /de/...
Détection de la langue
createMiddleware de next-intl dans proxy.ts (middleware.ts avant Next.js 16)
Dates, nombres, montants
Intl.DateTimeFormat et Intl.NumberFormat
Pluriels
Syntaxe de messages ICU ou Intl.PluralRules
Moteurs de recherche
Liens hreflang pour chaque version linguistique, plus x-default
Traduire, ce n'est pas seulement remplacer des mots. L'ordre des mots change, les règles de pluriel diffèrent, l'arabe se lit de droite à gauche et chaque pays écrit les dates à sa façon. Essayez le sélecteur ci-dessous pour voir une petite fiche produit changer de langue, puis construisez la même chose dans votre application avec les fichiers de configuration et le générateur hreflang.
Choisissez une langue dans la démo. La fiche change ses messages, formate le prix et la date pour cette locale, et inverse le sens de lecture pour l'arabe.
Modifiez le nombre d'articles pour voir chaque langue choisir sa propre forme de pluriel.
Copiez les fichiers de configuration next-intl dans un projet Next.js App Router.
Saisissez votre domaine et vos langues dans le générateur hreflang, puis collez les balises, ou l'objet metadata, dans votre layout.
Ne construisez jamais de phrases en assemblant des fragments. Traduisez des phrases entières avec des placeholders comme {count}, car l'ordre des mots varie.
Prévoyez de la place dans votre mise en page, car un libellé traduit est souvent nettement plus long que l'anglais.
Définissez lang sur l'élément html pour chaque langue et dir="rtl" pour les langues de droite à gauche.
Évitez les drapeaux dans les sélecteurs de langue. Les drapeaux représentent des pays, et beaucoup de langues sont parlées dans plusieurs pays.
Laissez les gens changer de langue manuellement et mémorisez leur choix au lieu de vous fier uniquement aux réglages du navigateur.
Questions fréquentes
Quelle bibliothèque i18n utiliser avec React ?
Pour le Next.js App Router, next-intl est conçu exprès et prend en charge les Server Components. Pour une application React sans Next.js, choisissez une bibliothèque qui stocke les messages en JSON, pour qu'un passage ultérieur à une autre reste gérable.
Les langues doivent-elles être dans des sous-dossiers, des sous-domaines ou des domaines distincts ?
Les sous-dossiers comme example.com/de/ sont les plus simples à gérer, car un seul site et un seul domaine portent tout. next-intl prend aussi en charge le routage par domaine si vous avez besoin de de.example.com ou d'un domaine national.
Comment ajouter hreflang dans Next.js ?
Renvoyez alternates.languages depuis metadata ou generateMetadata, avec une entrée par URL de langue. Next.js génère une balise link rel="alternate" hreflang pour chacune. Chaque version linguistique doit lister toutes les autres et elle-même, sinon les moteurs de recherche risquent d'ignorer l'ensemble.
Puis-je traduire mon site automatiquement ?
Vous pouvez utiliser la traduction automatique comme premier jet, mais faites-la relire par une personne qui maîtrise la langue, surtout les titres, les prix et les textes juridiques. Des traductions pauvres ou non relues peuvent dérouter les lecteurs et affaiblir la confiance.
Des messages, pas des chaînes dans les composants
Chaque texte visible doit provenir d'un fichier de messages, avec une clé qui indique son sens, comme Cart.checkoutButton. Les développeurs modifient l'anglais, les traducteurs modifient les autres fichiers, et personne ne fouille les composants à la recherche de textes codés en dur.
Regrouper les clés par composant garde les fichiers lisibles. useTranslations('Cart') de next-intl vous donne alors t('checkoutButton') uniquement dans ce composant.
Laissez Intl s'occuper du formatage
Intl.NumberFormat écrit 1234.5 euros sous la forme 1.234,50 € pour un lecteur allemand, avec le symbole et les séparateurs placés comme cette locale l'attend. Intl.DateTimeFormat fait de même pour les dates, et Intl.PluralRules vous indique si un nombre prend la forme one, few, many ou other dans une langue donnée.
Ces API sont fournies dans tous les navigateurs modernes et dans Node : le formatage n'alourdit donc pas votre bundle et reste correct pour des langues que vous n'avez jamais étudiées.
Langues de droite à gauche
L'arabe, l'hébreu, le persan et l'ourdou se lisent de droite à gauche. Définir dir="rtl" sur l'élément html inverse l'alignement du texte et l'ordre du contenu inline, mais les valeurs left et right fixes en CSS ne bougent pas.
Utilisez des propriétés logiques comme margin-inline-start et padding-inline-end, ou les utilitaires ms- et pe- de Tailwind, pour que les espacements s'inversent automatiquement avec le sens de lecture.
Configuration de next-intl pour l'App Router
Installez avec npm install next-intl. Ces fichiers suivent la structure du guide de démarrage de next-intl pour le routage par locale.
Un fichier par langue, avec les mêmes clés dans chacun. La syntaxe ICU gère les pluriels à l'intérieur du message.
src/i18n/routing.ts et src/proxy.ts
Le routage liste vos locales une seule fois. Le proxy (appelé middleware.ts avant Next.js 16) redirige les visiteurs vers un préfixe de langue.
src/i18n/request.ts
Lit la locale depuis le segment [locale], rejette les locales inconnues et charge les messages de cette langue.
next.config.ts, layout et une page
Le plugin relie request.ts. Déplacez vos pages sous app/[locale]/ et lisez les messages avec useTranslations. next/root-params est activé par défaut à partir de Next.js 16.3 ; les versions antérieures nécessitent experimental.rootParams.
Formater sans bibliothèque
Intl en JavaScript pur
Fonctionne dans n'importe quelle application React, traduite ou non.
Les règles hreflang que vérifient les moteurs de recherche
Bien annoter les langues
Règle
Exemple
Utilisez des URL absolues complètes
Chaque version se liste elle-même et toutes les autres
La page allemande renvoie vers en, de, ar et x-default
Langue en ISO 639-1, région facultative en ISO 3166-1 alpha-2
de, en-GB, pt-BR
Jamais une région seule
be correspond au biélorusse, pas à la Belgique ; utilisez nl-BE ou fr-BE
x-default pour tous les autres
Pointe vers un sélecteur de langue ou votre version principale
Essayez : une fiche en cinq langues
Changez de langue et modifiez le nombre d'articles. Les chaînes viennent d'un objet de messages, et le prix, la date et la forme du pluriel viennent des API Intl du navigateur.
Langue
Articles dans le panier : {n}
Catégorie de pluriel choisie :
Sens :
La démo ne convertit aucune devise ; elle formate seulement le même nombre.
Générateur hreflang
Saisissez votre domaine, un chemin de page et vos codes de langue pour obtenir les balises link du head, ou l'objet alternates de Next.js.
Domaine
Chemin de la page
Codes de langue (séparés par des virgules)
Langue x-default
Codes invalides ignorés : {codes}. Utilisez une forme comme de ou en-GB.