Internationalisation (i18n) dans NuxSaaS

Ce document explique comment NuxSaaS met en œuvre la prise en charge multilingue et la logique derrière ce choix.

Comment NuxSaaS met en place la prise en charge multilingue

NuxSaaS utilise le module @nuxtjs/i18n pour fournir l’internationalisation à l’application. La configuration est principalement gérée dans les fichiers nuxt.config.ts et app/i18n/i18n.config.ts.

Points clés de configuration

• Définition des locales :
  Les langues prises en charge sont définies dans le tableau locales de nuxt.config.ts. Chaque locale inclut un code, un identifiant ISO et un nom d’affichage. Par exemple :

  const locales = [
    { code: 'en', iso: 'en-US', name: 'English' },
    { code: 'zh-CN', iso: 'zh-CN', name: '简体中文' },
    { code: 'ja', iso: 'ja-JP', name: '日本語' },
    { code: 'fr', iso: 'fr-FR', name: 'Français' }
  ]

• Locale par défaut et de repli : L’anglais (en) est défini comme langue par défaut. Les avertissements pour les traductions manquantes ou de repli sont désactivés pour une expérience utilisateur plus fluide.

• Organisation des messages : Tous les messages de traduction globaux sont organisés dans le dossier app/i18n/. Le fichier principal de configuration i18n.config.ts fusionne les traductions globales et les messages de validation (par exemple, les erreurs de validation Zod) pour chaque langue :

  const messages = {
    'en': { ...zodEn, ...global.en },
    'zh-CN': { ...zodZhCN, ...global['zh-CN'] },
    'ja': { ...zodJa, ...global.ja },
    'fr': { ...zodFr, ...global.fr }
  }

• Traductions par page et par composant : Pour les pages ou composants complexes, les traductions peuvent être isolées à l’aide de blocs <i18n src="./i18n.json"></i18n>, ce qui permet des fichiers de traduction modulaires et faciles à maintenir.

• Routage sensible à la locale : L’application utilise un routage tenant compte de la langue, de sorte que les URLs reflètent la langue sélectionnée (par exemple, /ja/, /zh-CN/). Le composable useLocalePath() est utilisé pour générer les liens corrects.

• Ajouter une nouvelle langue :

  Pour ajouter une nouvelle langue :

  1. Ajoutez la locale au tableau locales dans nuxt.config.ts.
  2. Créez ou mettez à jour les fichiers de traduction dans app/i18n/ pour la nouvelle langue.
  3. Mettez à jour tous les fichiers i18n.json pour inclure les messages de la nouvelle langue.

  Recherche : "en": { dans VS Code :

Pourquoi cette approche ?

• Scalabilité : En organisant les traductions par langue et par fonctionnalité, le projet peut facilement évoluer pour prendre en charge plus de langues et de contributeurs.
• Maintenabilité : Une configuration centralisée et des fichiers de traduction modulaires facilitent la mise à jour ou l’ajout de traductions sans impacter les autres parties de l’application.
• Expérience utilisateur : Le routage sensible à la langue et le changement de langue fluide offrent une expérience cohérente et intuitive aux utilisateurs du monde entier.
• Cohérence de la validation : L’intégration des messages de validation (par exemple, ceux de Zod) garantit que tous les retours à l’utilisateur sont localisés, améliorant ainsi l’accessibilité et le professionnalisme.
• Performance : Seuls les fichiers de traduction nécessaires sont chargés, ce qui maintient l’application efficace.