i18n par composant

    Type-Safe. Traduisez avec l'IA. Éditez visuellement.

    Définissez les traductions à côté des composants pour accélérer votre développement. Gardez votre bundle aussi léger qu'il devrait l'être. Invitez des éditeurs via le CMS. Chaque contribution est véritablement appréciée.

    npm install intlayer

    Disponible pour

    // src/component/server/component.content.tsimport { t, type Dictionary } from "intlayer";const componentContent = {  key: "server-component",  content: {    title: t({      en: "Title of my component",      fr: "Titre de mon component",      es: "Título de mi componente",    }),    content:      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",  },} satisfies Dictionary;export default componentContent;
    // src/components/Component.tsxexport const Component = () => {  return (    <div>      <h2>Intlayer Compiler</h2>      <p>        The Intlayer Compiler extracts automatically the content from the        components and generates the dictionary files.      </p>    </div>  );};
    Essayez-le gratuitement en utilisant le playground.Aller au playground
    intlayer test
    $ npx intlayer test
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ~/Desktop/MyApp

    Améliorez la maintenabilité du code en gardant vos définitions de contenu proches de vos composants. Réduisez la redondance, améliorez la clarté et simplifiez les mises à jour grâce à une approche structurée qui facilite la gestion et l’évolution de votre code.

    Extrayez votre contenu instantanément avec le Compilateur Intlayer. Il générera automatiquement les fichiers de dictionnaire nécessaires pour votre contenu afin d’internationaliser votre application en une seconde.

    Profitez de l’éditeur visuel gratuit pour créer et gérer votre site en toute simplicité. Créez, modifiez et organisez des composants et des pages sans toucher au code, facilitant ainsi la collaboration entre gestionnaires de contenu et développeurs.

    Étendez votre portée grâce à la fonctionnalité de traduction intégrée. Traduisez facilement votre contenu via une interface intuitive, garantissant une expérience multilingue fluide pour vos utilisateurs sans les contraintes de gérer plusieurs versions de contenu manuellement.

    Utilisez l'outil en ligne de commande Intlayer pour tester et compléter votre contenu à l’aide de l’IA et garantir des traductions complètes et précises.

    Pourquoi choisir Intlayer ?

    Gratuit et Open Source

    Intlayer est gratuit et open source, vous permettant de l'utiliser gratuitement et de contribuer à son bon fonctionnement.

    Gestion de Contenu Propulsée par JavaScript

    Exploitez la flexibilité de JavaScript pour définir et gérer votre contenu efficacement.

    Type-Safe Environnement

    Utilisez TypeScript pour garantir que toutes vos définitions de contenu soient précises et exemptes d'erreurs.

    Declaration au niveau du component

    Gardez vos traductions proches de leurs composants respectifs, améliorant la maintenabilité et la clarté.

    Configuration Simplifiée

    Mettez-vous en route rapidement avec une configuration minimale, spécialement optimisée pour les projets Next.js.

    CMS Intégré

    Editez vos contenus à l'aide un CMS directement intégré à votre site. Boostez la generation de contenu grâce à l'IA.

    Technologie

    Chargement JSON dynamique

    Charge les traductions à la volée

    JSON scopé (espaces de noms)

    Espaces de noms de traduction par page

    Benchmark de Performance I18n

    Aucune donnée disponible

    Quelle est cette métrique ?

    La taille totale compressée en gzip du bundle de la bibliothèque d’internationalisation. Elle n’inclut que le fournisseur et la logique de récupération de contenu après tree-shaking et minification.

    Pourquoi est-ce important ?

    Une taille de bibliothèque plus petite réduit la charge utile JavaScript initiale, ce qui accélère le téléchargement et le temps d’exécution sur le client.

    Voir comme

    Analysez le score de localisation de votre site web

    Évaluez rapidement et gratuitement la qualité de la localisation de votre site Web. Analysez les principaux éléments multilingues de votre site pour obtenir un score complet et des conseils exploitables afin d'améliorer votre portée.

    i18n basé sur le code

    Des traductions avec sécurité de type qui vivent dans votre dépôt.

    Déclarez le contenu aux côtés de vos composants en TypeScript ou JavaScript. Intlayer génère automatiquement les types, vous offrant autocomplétion, validation et retour instantané. Fini les clés manquantes, les changements de contexte ou les implémentations cassées.

    AI CLI Tool

    Automatisez les traductions depuis votre terminal.

    La CLI pour auditer, remplir et traduire JSON & Markdown avec l'IA.

    Lancez `npx intlayer fill` pour détecter les clés manquantes et générer des traductions via OpenAI, Claude ou des modèles locaux. Gardez un historique Git propre et une sécurité des types garantie.

    Intlayer TMS

    Arrêtez de payer au mot. Automatisez avec l'IA.

    L'alternative open source à Crowdin & Lokalise. Conçu pour les workflows de développement modernes.

    Gérez les traductions directement dans votre code ou via l'éditeur visuel. Utilisez l'IA pour traduire instantanément. Collaborez avec votre équipe sans limite de sièges.

    CMS Headless

    Reliez votre code local au contenu distant.

    Gérez le contenu multilingue sans surcharge. Intlayer vous permet d'interconnecter des dictionnaires locaux avec une gestion distante, activant le Live Sync pour des mises à jour à chaud sans reconstruction. Utilisez des webhooks pour le CI/CD, gérez les feature flags et laissez l'IA de traduction automatique (en cours de développement) s'occuper du reste.

    Feature Flags

    Activez des fonctionnalités instantanément. Aucun déploiement requis.

    Les dictionnaires Intlayer sont plus que du texte. Utilisez-les pour déclarer de la logique, des styles et des configurations. Avec le Live Sync, activez ou désactivez des fonctionnalités, changez de thème et mettez à jour le comportement de l'application en temps réel depuis le CMS.

    Tests A/B

    Votre terrain de jeu pour les expérimentations produit.

    Soyez les premiers à explorer la nouvelle version bêta d'A/B Testing piloté par IA d'Intlayer, conçue pour améliorer la découvrabilité et guider des décisions produit plus intelligentes. Testez tout en temps réel, du contenu et du design aux fonctionnalités complètes, et laissez les données vous montrer ce qui fonctionne vraiment.

    Disponible sur

    Essayez la démo en direct

    Construit par la communauté

    Rencontrez les contributeurs incroyables qui rendent Intlayer possible. Vous voulez être le prochain ? Rejoignez-nous sur Discord.

    Questions fréquentes

    Qu’est-ce que l’internationalisation (i18n) ?

    L'internationalisation (i18n) est le processus de conception et de développement d'applications comme Next.js, React ou Express pour prendre en charge facilement plusieurs langues. Elle vous permet de créer des sites web multilingues en simplifiant le processus de traduction. Des outils comme TypeScript facilitent la mise en œuvre de l'i18n, permettant une adaptation efficace et facile de votre application à différentes langues et régions.En savoir plus sur l’internationalisation

    Quelles sont les principales fonctionnalités d’Intlayer ?

    Intlayer simplifie la gestion des configurations et permet l’internationalisation de plusieurs types d’applications JavaScript, y compris les server components. Il permet de déclarer le contenu au même niveau que les composants, ce qui améliore la maintenabilité de la base de code. De plus, Intlayer utilise TypeScript pour prévenir les déclarations manquantes. Enfin, Intlayer offre un éditeur visuel, permettant aux non-développeurs de modifier le contenu du site web, de traduire automatiquement grâce à l’IA et d’optimiser le SEO de l’application.En savoir plus sur les fonctionnalités d'Intlayer

    Existe-t-il un éditeur visuel dans Intlayer ?

    Oui, Intlayer propose un éditeur visuel optionnel pour gérer le contenu facilement sans plonger dans le code.En savoir plus sur l’éditeur visuel

    Quel est le coût de l’utilisation d’Intlayer ?

    Intlayer intègre une sélection de packages NPM gratuits ainsi qu’un éditeur visuel. De plus, il propose un CMS pour externaliser le contenu. Ce CMS est gratuit, mais inclut des fonctionnalités supplémentaires pour les membres des plans Premium et Enterprise.En savoir plus sur les plans d’Intlayer

    Puis-je intégrer Intlayer sur les solutions existantes ?

    Oui, Intlayer peut être intégré comme un wrapper autour de i18next, next-intl, vue-i18next et plus. Cela vous permet d'automatiser vos traductions et d'utiliser Intlayer sans avoir à refactoriser votre code existant.

    Qu’est-ce que Intlayer ?

    Intlayer est un package qui vous permet de gérer votre site web multilingue. Il fournit un ensemble d’outils et d’utilitaires qui facilitent la mise en place de votre site web pour le contenu multilingue et la localisation.En savoir plus sur Intlayer

    Comment Intlayer s’intègre-t-il avec Next.js ?

    Intlayer s’intègre avec Next.js pour permettre le rendu côté serveur et la génération de sites statiques, rendant la diffusion de contenu multilingue plus efficace.En savoir plus sur l’intégration de Next.js

    Comment puis-je contribuer à Intlayer ?

    Vous pouvez contribuer en soumettant des pull requests ou en signalant des problèmes sur le dépôt GitHub.En savoir plus sur la façon de contribuer

    Quelles plateformes sont prises en charge par Intlayer ?

    Intlayer est disponible pour React (y compris Create React App), Vite avec React, Next.js, Tanstack Start, Vue, Nuxt, Express, NestJS, Preact, et plus. Cela garantit une intégration fluide avec les frameworks JavaScript modernes et les environnements côté serveur.En savoir plus sur les plateformes prises en charge
    Lire toutes les questions fréquentes