Posez votre question et obtenez un résumé du document en referencant cette page et le Provider AI de votre choix
En intégrant le serveur MCP Intlayer à votre assistant AI, vous pouvez récupérer tous les documents directement depuis ChatGPT, DeepSeek, Cursor, VSCode, etc.
Voir la documentation du serveur MCPLe contenu de cette page a été traduit à l'aide d'une IA.
Voir la dernière version du contenu original en anglaisSi vous avez une idée d’amélioration pour améliorer cette documentation, n’hésitez pas à contribuer en submitant une pull request sur GitHub.
Lien GitHub de la documentationCopier le Markdown du doc dans le presse-papiers
Commencer l'internationalisation (i18n) avec Intlayer, Vite et Solid
Ce paquet est en cours de développement. Consultez le problème pour plus d'informations. Montrez votre intérêt pour Intlayer pour Solid en aimant ce problème.
Qu'est-ce qu'Intlayer ?
Intlayer est une bibliothèque d'internationalisation (i18n) innovante et open-source conçue pour simplifier la prise en charge multilingue dans les applications web modernes.
Avec Intlayer, vous pouvez :
- Gérer facilement les traductions en utilisant des dictionnaires déclaratifs au niveau des composants.
- Localiser dynamiquement les métadonnées, les routes et le contenu.
- Assurer la prise en charge de TypeScript avec des types générés automatiquement, améliorant l'autocomplétion et la détection des erreurs.
- Bénéficiez de fonctionnalités avancées, comme la détection dynamique de la langue et le changement de locale.
Guide étape par étape pour configurer Intlayer dans une application Vite et Solid
Étape 1 : Installer les dépendances
Installez les paquets nécessaires avec npm :
Copier le code dans le presse-papiers
npm install intlayer solid-intlayernpm install vite-intlayer --save-dev
intlayer
intlayer
Le paquet principal qui fournit des outils d'internationalisation pour la gestion de la configuration, la traduction, la déclaration de contenu, la transpilation, et les commandes CLI.
solid-intlayer Le paquet qui intègre Intlayer avec l'application Solid. Il fournit des fournisseurs de contexte et des hooks pour l'internationalisation dans Solid.
vite-intlayer Comprend le plugin Vite pour intégrer Intlayer avec le bundler Vite, ainsi qu'un middleware pour détecter la locale préférée de l'utilisateur, gérer les cookies, et gérer la redirection des URL.
Étape 2 : Configuration de votre projet
Créez un fichier de configuration pour configurer les langues de votre application :
Copier le code dans le presse-papiers
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [ Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, // Vos autres locales ], defaultLocale: Locales.ENGLISH, },};export default config;
Grâce à ce fichier de configuration, vous pouvez configurer les URLs localisées, la redirection via middleware, les noms des cookies, l'emplacement et l'extension de vos déclarations de contenu, désactiver les logs Intlayer dans la console, et bien plus encore. Pour une liste complète des paramètres disponibles, consultez la documentation de configuration.
Étape 3 : Intégrer Intlayer dans votre configuration Vite
Ajoutez le plugin intlayer dans votre configuration.
Copier le code dans le presse-papiers
import { defineConfig } from "vite";import react from "@vitejs/plugin-react-swc";import { intlayerPlugin } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({ plugins: [react(), intlayerPlugin()],});
Le plugin Vite intlayerPlugin() est utilisé pour intégrer Intlayer avec Vite. Il assure la construction des fichiers de déclaration de contenu et les surveille en mode développement. Il définit les variables d'environnement Intlayer au sein de l'application Vite. De plus, il fournit des alias pour optimiser les performances.
Étape 4 : Déclarez votre contenu
Créez et gérez vos déclarations de contenu pour stocker les traductions :
Copier le code dans le presse-papiers
import { t, type Dictionary } from "intlayer";const appContent = { key: "app", content: {},} satisfies Dictionary;export default appContent;
Vos déclarations de contenu peuvent être définies n'importe où dans votre application dès qu'elles sont incluses dans le répertoire contentDir (par défaut, ./src). Et correspondent à l'extension de fichier de déclaration de contenu (par défaut, .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}).
Pour plus de détails, référez-vous à la documentation sur la déclaration de contenu.
Étape 5 : Utiliser Intlayer dans votre code
[à compléter]
(Optionnel) Étape 6 : Changer la langue de votre contenu
[à compléter]
(Optionnel) Étape 7 : Ajouter un routage localisé à votre application
[à compléter]
(Optionnel) Étape 8 : Changer l'URL lorsque la locale change
[à compléter]
(Optionnel) Étape 9 : Modifier les attributs Langue et Direction du HTML
[à compléter]
[to complete]
(Optionnel) Étape 10 : Création d'un composant de lien localisé
[to complete]
Configuration Git
Il est recommandé d'ignorer les fichiers générés par Intlayer. Cela vous permet d'éviter de les commettre dans votre dépôt Git.
Pour ce faire, vous pouvez ajouter les instructions suivantes à votre fichier .gitignore :
Copier le code dans le presse-papiers
# Ignorer les fichiers générés par Intlayer.intlayer
Extension VS Code
Pour améliorer votre expérience de développement avec Intlayer, vous pouvez installer l'extension officielle Intlayer VS Code Extension.
Installer depuis le Marketplace VS Code
Cette extension offre :
- Autocomplétion pour les clés de traduction.
- Détection d'erreurs en temps réel pour les traductions manquantes.
- Aperçus en ligne du contenu traduit.
- Actions rapides pour créer et mettre à jour facilement les traductions.
Pour plus de détails sur l'utilisation de l'extension, consultez la documentation de l'extension Intlayer pour VS Code.
Aller plus loin
Pour aller plus loin, vous pouvez implémenter l’éditeur visuel ou externaliser votre contenu en utilisant le CMS.
Historique du document
- 5.5.10 - 2025-06-29 : Historique initial