Next.js en vietnamien : routage, ICU et formatage Intl

💡 Pour localiser une application Next.js ou React en vietnamien : organisez vos routes sous app/[lang]/, ajoutez un middleware proxy pour la détection Accept-Language, chargez des fichiers de messages JSON par locale et configurez Intl avec la locale vi-VN. Point clé : le vietnamien n'a qu'une seule catégorie de pluriel dans ICU MessageFormat, les messages se simplifient donc en une seule branche.

Que faut-il réellement pour localiser une application Next.js en vietnamien ?

La localisation d'une application Next.js couvre trois couches distinctes : le routage (quelle URL sert quelle langue), le chargement des messages (quelles chaînes s'affichent) et le formatage de locale (comment les dates, les nombres et la devise s'affichent). Les trois doivent être correctement configurés avant que votre version vietnamienne soit prête pour la production.

La couche de routage est une préoccupation de Next.js. La couche de messages est gérée par une bibliothèque telle que next-intl, next-i18next ou Lingui. La couche de formatage utilise l'API JavaScript Intl ou un wrapper de plus haut niveau. Chacune a un chemin de configuration clair pour le vietnamien, et les trois fonctionnent indépendamment, vous pouvez donc les adopter progressivement.

Quelle bibliothèque i18n choisir pour une application compatible vietnamien ?

Trois bibliothèques dominent l'écosystème i18n Next.js. Le bon choix dépend des contraintes de votre équipe et de la part de la surface i18n que vous souhaitez contrôler.

• next-intl : La recommandation actuelle de la communauté pour l'App Router. Fournit defineRouting, createMiddleware, createNavigation, le support ICU MessageFormat et des clés de traduction typées. Fonctionne avec les Server et Client Components. Recommandé pour les nouveaux projets App Router.
• next-i18next : Très utilisé à l'ère du Pages Router. Fonctionne toujours avec l'App Router via une couche de compatibilité, mais la configuration est plus lourde. Un bon choix si votre équipe utilise déjà react-i18next.
• Modèle de dictionnaire intégré Next.js : La documentation officielle Next.js montre une approche minimaliste avec getDictionary() sans bibliothèque tierce. Suffisant pour les petites applications avec des chaînes simples, mais ne fournit pas de formatage ICU ni de gestion des pluriels.

Pour le vietnamien spécifiquement, le support ICU de next-intl est important car il gère la conscience des pluriels par locale à l'exécution, donnant le bon comportement pour la catégorie de pluriel unique du vietnamien sans configuration supplémentaire.

Comment les messages ICU fonctionnent-ils quand le vietnamien n'a pas de pluriel ?

L'anglais a deux catégories de pluriel CLDR : one (singulier) et other (tous les autres nombres). Le vietnamien n'en a qu'une : other. Tous les nombres correspondent à other en vietnamien, car le vietnamien utilise des classificateurs nominaux et le contexte plutôt que la flexion morphologique pour le pluriel.

En pratique, cela signifie que le vietnamien n'a jamais besoin d'une chaîne de message singulier dédiée. Un message anglais pluralisé tel que :

{count, plural, one {# result} other {# results}}

devient, dans votre fichier de messages vietnamien :

{count, plural, other {# kết quả}}

Les locuteurs vietnamiens disent "1 kết quả", "2 kết quả" avec la même forme, s'appuyant sur le nombre lui-même pour la quantité. Les sélecteurs de correspondance exacte =0 et =1 restent disponibles quand vous avez besoin de messages spécifiques pour l'état vide ou des cas particuliers.

Le formatage des dates et des heures utilise des squelettes ICU ou des styles prédéfinis dans next-intl. Pour le vietnamien, passez locale: 'vi' ou locale: 'vi-VN'. L'API DateTimeFormat retourne DD/MM/YYYY pour les dates courtes dans la locale vietnamienne.

Dates, nombres et devise en vietnamien : comment configurer Intl

L'API JavaScript Intl avec la locale vi-VN gère le formatage vietnamien correctement sans code personnalisé. Voici les modèles à configurer dans votre application :

• Dates : new Intl.DateTimeFormat('vi-VN').format(date) retourne DD/MM/YYYY. Utilisez { dateStyle: 'short' } pour une sortie uniquement de la date.
• Nombres : new Intl.NumberFormat('vi-VN').format(1500000) retourne 1.500.000. Le point est le séparateur des milliers ; la virgule est le séparateur décimal.
• Devise (VND) : new Intl.NumberFormat('vi-VN', { style: 'currency', currency: 'VND' }).format(250000) retourne 250.000 ₫. Le VND n'a pas de subdivision décimale.
• Tri : L'ordre alphabétique vietnamien diffère de l'ASCII. Utilisez new Intl.Collator('vi').compare pour trier des listes déroulantes ou des résultats de recherche dans le bon ordre alphabétique vietnamien. L'alphabet vietnamien a 29 lettres de base.

Dans next-intl, passez la chaîne locale via les helpers de formatage du framework ; ils appellent le bon constructeur Intl en interne. Les données CLDR qui soutiennent la locale vi sont maintenues par le projet CLDR du Consortium Unicode et mises à jour à chaque version CLDR.

Les chaînes vietnamiennes sont plus longues : liste de contrôle de mise en page

Les chaînes vietnamiennes sont généralement 10-20% plus longues que leurs équivalents anglais en prose naturelle. Les libellés d'interface, les éléments de navigation et le texte des boutons sont les plus susceptibles de déborder. Effectuez cette liste de contrôle avant de lancer votre version vietnamienne :

• Testez tous les libellés de boutons et les textes CTA aux largeurs mobiles (viewports 375px et 390px).
• Vérifiez les onglets de navigation et le fil d'Ariane : les noms composés vietnamiens s'étendent souvent là où l'anglais utilise des verbes courts.
• Vérifiez le support des polices : le vietnamien utilise des diacritiques combinatoires (six marques tonales plus des modifications en crochet et en accent sur les lettres de base). Les polices système qui rendent correctement UTF-8 gèrent cela, mais les sous-ensembles de polices web construits uniquement pour les caractères latins peuvent perdre des glyphes vietnamiens. Testez avec des caractères comme ộ, ề, ầ, ẫ, ắ.
• Définissez lang="vi" sur l'élément <html> racine. Les règles de retour à la ligne et de césure sont sensibles à la langue dans les navigateurs modernes.
• Utilisez overflow-wrap: break-word comme filet de sécurité : le texte vietnamien se coupe aux espaces entre les mots-syllabes, et les termes techniques longs peuvent déborder des conteneurs étroits.

Traitement interne ou spécialiste : la vraie limite pour un produit destiné au Vietnam

Le travail d'ingénierie, la configuration du routage et le câblage des messages ICU sont des tâches entièrement réalisables en interne. N'importe quel développeur peut configurer next-intl avec une locale vi et connecter un fichier de messages JSON en une journée. La traduction automatique avec vérification par échantillon fonctionne bien pour de grands volumes de chaînes d'interface structurées : libellés de formulaires, messages d'erreur et documentation d'aide.

Là où un spécialiste vietnamien natif génère de réelles économies : le texte marketing, le ton de l'interface produit et la terminologie spécialisée. Le vietnamien a des distinctions de registre formel et informel qui affectent le côté professionnel d'un produit pour les utilisateurs. Les termes sino-vietnamiens (vocabulaire emprunté au chinois classique) signalent une expertise en finance, médecine et droit. Un moteur de traduction automatique généraliste choisit par défaut des équivalents vietnamiens purs que les spécialistes jugent imprécis.

La répartition pratique pour un produit SaaS entrant au Vietnam : utilisez la TA pour le long tail du contenu d'aide, et engagez un spécialiste humain pour les 50 à 100 chaînes qu'un utilisateur voit à chaque session. Pour les produits B2B où une équipe d'achat évaluera votre version vietnamienne, faites auditer l'interface complète par un locuteur natif avant le lancement.

Pour une traduction professionnelle français-vietnamien couvrant les sites web et interfaces SaaS, le service de localisation de site web en vietnamien sur ce site propose traduction et révision technique, avec le français, l'anglais et le chinois comme langues source.

FAQ

Puis-je utiliser le i18n du Pages Router de Next.js pour le vietnamien ?

Oui. Le Pages Router dispose d'une clé i18n intégrée dans next.config.js avec locales et defaultLocale. Définissez locales: ['en', 'vi', 'zh', 'fr'] et defaultLocale: 'en'. Next.js ajoute automatiquement le préfixe de locale aux routes. L'équivalent App Router utilise un répertoire app/[lang]/ manuel et un middleware proxy, offrant plus de contrôle sur le comportement d'export statique.

Le vietnamien nécessite-t-il une normalisation Unicode spéciale ?

Les diacritiques vietnamiens peuvent être encodés de deux façons : forme précomposée (NFC, un seul point de code par caractère accentué) et forme décomposée (NFD, caractère de base plus marque combinatoire). Les deux s'affichent identiquement dans un navigateur mais échouent aux vérifications d'égalité de chaînes. Normalisez en NFC dans vos fichiers de messages et toute comparaison de chaînes. En JavaScript : str.normalize('NFC'). Cela évite les erreurs de comparaison invisibles où deux chaînes vietnamiennes visuellement identiques ne correspondent pas.

Faut-il utiliser 'vi' ou 'vi-VN' comme code de locale ?

Utilisez vi comme balise de langue principale. Selon les recommandations BCP 47 du W3C, gardez la balise aussi courte que possible sauf si vous devez distinguer des variantes régionales. Pour la plupart des produits, vi couvre tous les utilisateurs vietnamiens. Utilisez vi-VN uniquement si une bibliothèque tierce exige le code de locale complet pour sa recherche de données.

Comment le vietnamien affecte-t-il la configuration hreflang dans une application Next.js ?

La valeur hreflang pour les pages vietnamiennes est vi. Dans next-intl, les helpers de navigation tels que Link et redirect ajoutent automatiquement le préfixe de locale à l'URL. Pour émettre des balises hreflang, ajoutez-les dans generateMetadata() ou dans le head du layout racine. Chaque page doit porter un alternate auto-référencé et des alternates pour toutes les autres versions linguistiques. Consultez Google Search Central pour les exigences complètes de liaison bidirectionnelle.

Le vietnamien s'écrit-il de droite à gauche ou nécessite-t-il une gestion spéciale de la direction du texte ?

Le vietnamien utilise le script latin et s'écrit strictement de gauche à droite. Aucun dir="rtl" ni CSS bidi n'est nécessaire. La seule préoccupation de mise en page est le retour à la ligne dans les conteneurs étroits, car le texte vietnamien est composé de mots-syllabes séparés par des espaces. Utilisez overflow-wrap: break-word pour gérer les cas limites. Le texte vietnamien n'implique aucun algorithme bidirectionnel.

Sources officielles

• Documentation Next.js : Internationalisation - Modèle de routage App Router, configuration du middleware proxy, generateStaticParams pour les locales et chargement des dictionnaires. Vérifié en septembre 2026.
• next-intl : Routage i18n App Router - Configuration de defineRouting, createMiddleware, createNavigation et exemples de code. Vérifié en septembre 2026.
• Unicode CLDR : Règles de pluriel par langue - Catégories de pluriel CLDR pour le vietnamien (catégorie unique "other"). Vérifié en septembre 2026.
• W3C Internationalisation : Choisir une balise de langue - Recommandations BCP 47 sur vi vs vi-VN pour le vietnamien. Vérifié en septembre 2026.