Svelte i18n : L'internationalisation simplifiée [Guide 2026]

Réponse Rapide

Pour ajouter l'internationalisation (i18n) à Svelte, utilisez svelte-i18n. Installez avec npm install svelte-i18n, créez vos fichiers dictionnaires, initialisez la bibliothèque dans votre layout, et utilisez le store $t pour afficher le texte traduit. Pour SvelteKit, assurez-vous de gérer l'initialisation côté serveur et client pour éviter les incohérences d'hydratation (hydration mismatch).

---

Introduction à l'Internationalisation Svelte

La nature réactive de Svelte le rend excellent pour construire des applications multilingues. Cependant, gérer le routage, l'état et le chargement des traductions dans SvelteKit nécessite une stratégie solide.

Pourquoi les développeurs Svelte ont besoin d'i18n ?

• Portée Globale : Les applications Svelte sont performantes et idéales pour le web mobile.
• Accessibilité : Le support de la langue native est crucial.
• Routage SvelteKit : Utiliser le routage par système de fichiers pour des URLs localisées (ex: /fr/about) booste le SEO.

---

Choisir une bibliothèque i18n pour Svelte

Alors qu'il existe plusieurs options, svelte-i18n reste le standard de la communauté.

svelte-i18n

• Pour : Construit sur les stores Svelte, léger, supporte le chargement différé (lazy loading).
• Contre : Configuration manuelle pour le SSR de SvelteKit.

---

Implémentation étape par étape

Étape 1 : Installer les dépendances

TerminalCopy
npm install svelte-i18n

Étape 2 : Créer les fichiers de traduction

Organisez vos traductions dans des fichiers JSON.

JSONCopy
1// src/locales/fr.json
2{
3  "greeting": "Bonjour le monde !",
4  "nav": {
5    "home": "Accueil",
6    "about": "À propos"
7  }
8}

Étape 3 : Configurer i18n

JavaScriptCopy
1// src/lib/i18n.js
2import { register, init, getLocaleFromNavigator } from 'svelte-i18n';
3
4register('en', () => import('../locales/en.json'));
5register('fr', () => import('../locales/fr.json'));
6
7init({
8  fallbackLocale: 'en',
9  initialLocale: getLocaleFromNavigator(),
10});

Étape 4 : Utiliser dans les composants

SVELTECopy
1<script>
2  import { t } from 'svelte-i18n';
3</script>
4
5<h1>{$t('greeting')}</h1>

---

Gestion des Traductions à l'Échelle avec IntlPull

À mesure que votre app Svelte grandit, gérer plusieurs fichiers JSON devient désordonné.

IntlPull s'intègre directement à votre flux de travail :

1. Extraire : Trouvez automatiquement les nouvelles clés.
2. Pousser : Envoyez les clés vers IntlPull.
3. Traduire : Utilisez l'IA ou des traducteurs humains.
4. Synchroniser : Récupérez les fichiers JSON mis à jour.

TerminalCopy
# Exemple de flux de travail
npx @intlpullhq/cli push src/locales/en.json
npx @intlpullhq/cli pull --languages fr,es,de

---

Conclusion

La simplicité de Svelte s'étend à son écosystème d'internationalisation. En combinant svelte-i18n pour la traduction au runtime et IntlPull pour la gestion, vous pouvez construire des applications Svelte vraiment globales sans friction.

Prêt à faire passer votre app Svelte à l'échelle ? Essayez IntlPull gratuitement.