i18n pour chaque composant

Traduction assistée par IA. Éditeur visuel. CMS multilingue.

Docs • Next.js • React + Vite • CMS • Discord

Qu'est-ce qu'Intlayer ?

La plupart des bibliothèques i18n sont soit trop complexes, soit trop rigides, ou ne sont pas conçues pour les frameworks modernes.

Intlayer est une solution i18n moderne pour les applications web et mobiles.
C'est indépendant du framework, propulsé par l'IA, et inclut un CMS & un éditeur visuel gratuits.

Avec des fichiers de contenu par locale, l'autocomplétion TypeScript, des dictionnaires tree-shakable, et l'intégration CI/CD, Intlayer rend l'internationalisation plus rapide, plus propre et plus intelligente.

Principaux avantages d'Intlayer :

Fonctionnalité	Description
	Support Multi-Frameworks Intlayer est compatible avec tous les principaux frameworks et bibliothèques, notamment Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, et plus encore.
	Gestion de contenu propulsée par JavaScript Exploitez la flexibilité de JavaScript pour définir et gérer votre contenu efficacement. - Déclaration de contenu
	Fichier de déclaration de contenu par locale Accélérez votre développement en déclarant votre contenu une seule fois, avant la génération automatique. - Fichier de déclaration de contenu par locale
	Compilateur Le compilateur Intlayer extrait automatiquement le contenu des composants et génère les fichiers de dictionnaire. - Compilateur
	Environnement typé sécurisé Utilisez TypeScript pour garantir que vos définitions de contenu et votre code sont sans erreur, tout en bénéficiant de l'autocomplétion de l'IDE. - Configuration TypeScript
	Configuration simplifiée Démarrez rapidement avec une configuration minimale. Ajustez facilement les paramètres d'internationalisation, de routage, d'IA, de build et de gestion du contenu. - Explorer l'intégration Next.js
	Récupération simplifiée du contenu Pas besoin d'appeler votre fonction t pour chaque élément de contenu. Récupérez tout votre contenu directement à l'aide d'un seul hook. - Intégration React
	Implémentation cohérente des composants serveur Parfaitement adapté aux composants serveur Next.js, utilisez la même implémentation pour les composants client et serveur, pas besoin de passer votre fonction t à travers chaque composant serveur. - Composants Serveur
	Base de code organisée Gardez votre base de code plus organisée : 1 composant = 1 dictionnaire dans le même dossier. Les traductions proches de leurs composants respectifs améliorent la maintenabilité et la clarté. - Comment fonctionne Intlayer
	Routage amélioré Prise en charge complète du routage d'application, s'adaptant parfaitement aux structures d'applications complexes, pour Next.js, React, Vite, Vue.js, etc. - Explorer l'intégration Next.js
	Support Markdown Importez et interprétez les fichiers locaux et le Markdown distant pour du contenu multilingue comme les politiques de confidentialité, la documentation, etc. Interprétez et rendez les métadonnées Markdown accessibles dans votre code. - Fichiers de contenu
	Éditeur visuel et CMS gratuits Un éditeur visuel et un CMS gratuits sont disponibles pour les rédacteurs de contenu, éliminant ainsi le besoin d'une plateforme de localisation. Gardez votre contenu synchronisé à l'aide de Git, ou externalisez-le totalement ou partiellement avec le CMS. - Éditeur Intlayer - CMS Intlayer
	Contenu tree-shakable Contenu tree-shakable, réduisant la taille du bundle final. Charge le contenu par composant, excluant tout contenu inutilisé de votre bundle. Supporte le chargement dynamique (lazy-loading) pour améliorer l'efficacité du chargement de l'application. - Optimisation du build
	Rendu statique Ne bloque pas le rendu statique. - Intégration Next.js
	Traduction propulsée par l'IA Transformez votre site web en 231 langues en un seul clic grâce aux outils de traduction avancés d'Intlayer utilisant votre propre fournisseur d'IA / clé API. - Intégration CI/CD - CLI Intlayer - Auto-remplissage
	Intégration du serveur MCP Fournit un serveur MCP (Model Context Protocol) pour l'automatisation de l'IDE, permettant une gestion du contenu et des flux de travail i18n fluides directement dans votre environnement de développement. - Serveur MCP
	Extension VSCode Intlayer propose une extension VSCode pour vous aider à gérer votre contenu et vos traductions, à construire vos dictionnaires, à traduire votre contenu, et plus encore. - Extension VSCode
	Interopérabilité Permet l'interopérabilité avec react-i18next, next-i18next, next-intl, react-intl, vue-i18n. - Intlayer et react-intl - Intlayer et next-intl - Intlayer et next-i18next - Intlayer et vue-i18n - Adaptateurs de compatibilité Intlayer
	Performances & Benchmark Utilise le tree-shaking avancé et le chargement dynamique pour booster les performances et garder la solution la plus légère possible. - Performances & Benchmark

📦 Installation

Commencez votre voyage avec Intlayer dès aujourd'hui et découvrez une approche plus fluide et plus puissante de l'internationalisation.

npm install intlayer react-intlayer

yarn add intlayer react-intlayer

pnpm add intlayer react-intlayer

bun add intlayer react-intlayer

⚡ Démarrage rapide (Next.js)

// intlayer.config.ts
import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

// app/home.content.ts
import { t, type Dictionary } from "intlayer";

const content = {
  key: "home",
  content: {
    title: t({
      en: "Home",
      fr: "Accueil",
      es: "Inicio",
    }),
  },
} satisfies Dictionary;

export default content;

// app/page.tsx
import { useIntlayer } from "react-intlayer";

const HomePage = () => {
  const { title } = useIntlayer("home");

  return <h1>{title}</h1>;
};

Obtenir le guide complet →

🎥 Tutoriel en direct sur YouTube

Table des matières

Explorez notre documentation exhaustive pour commencer avec Intlayer et apprendre à l'intégrer dans vos projets.

📘 Commencer

• Pourquoi Intlayer ?
• Introduction

⚙️ Concept

• Comment fonctionne Intlayer
• Configuration
• CLI Intlayer
• Compilateur
• Éditeur Intlayer
• CMS Intlayer
• Dictionnaire
  • Fichier de déclaration de contenu par locale
  • Traduction
  • Énumération
  • Condition
  • Imbrication
  • Markdown
  • Récupération de fonction
  • Insertion
  • Fichier

🌐 Environnement

• Intlayer avec Next.js 16
  • Next.js 15
  • Next.js 14 (App Router)
  • Next.js Page Router
  • Next.js utilisant le compilateur
• React CRA
• Vite + React
• Vite + React utilisant le compilateur
• React-router-v7
• Remix 3
• Tanstack start
  • Solid
• Astro
  • React
  • Vue
  • Svelte
  • Solid
  • Lit
• React Native
• Vite + Svelte
• SvelteKit
• Vite + Preact
• Vite + Vue
• Vite + Nuxt
• Vite + Solid
• Solid Start
• Angular
• Backend
  • Express
  • NestJS
  • Fastify
  • AdonisJS
  • Hono
  • Elysia

📊 Benchmark

• Next.js
• TanStack Start
• Vue
• Solid
• Svelte

📰 Blog

• Qu'est-ce que l'i18n ?
• i18n et SEO
• Intlayer et i18next
• Intlayer et react-intl
• Intlayer et next-intl

Système de gestion de contenu multilingue

Plus qu'une bibliothèque i18n, Intlayer est un système de gestion de contenu multilingue complet. Un CMS complet est disponible gratuitement sur app.intlayer.org.

Intlayer connecte développeurs, rédacteurs et agents IA dans un flux de travail unique pour créer et maintenir des sites web multilingues sans effort. Intlayer remplace la pile suivante en une seule solution :

• Solutions i18n (ex. i18next, next-intl, vue-i18n)
• TMS (Systèmes de gestion de traduction) (ex. Crowdin, Phrase, Lokalise)
• CMS Headless (ex. Contentful, Strapi, Sanity)
• Feature flag
• AB testing platform (ex. Optimizely, VWO, AB tasty) [coming soon]

🌐 Readme dans d'autres langues

English • 简体中文 • Русский • 日本語 • Français • 한국어 • Español • Deutsch • العربية • Italiano • English (UK) • Português • हिन्दी • Türkçe

🤝 Communauté

Intlayer est construit avec et pour la communauté et nous serions ravis de recevoir vos retours !

• Une suggestion ? Ouvrez une issue
• Un bug ou une amélioration ? Soumettez une PR
• Besoin d'aide ou envie de vous connecter ? Rejoignez notre Discord

Vous pouvez aussi nous suivre sur :

Contribution

Pour des directives plus détaillées sur la contribution à ce projet, veuillez consulter le fichier CONTRIBUTING.md. Il contient des informations essentielles sur notre processus de développement, les conventions de messages de commit et les procédures de publication. Vos contributions nous sont précieuses et nous apprécions vos efforts pour améliorer ce projet !

Contribuez sur GitHub, GitLab ou Bitbucket.

Merci pour votre soutien

Si vous aimez Intlayer, donnez-nous une ⭐ sur GitHub. Cela aide les autres à découvrir le projet ! Découvrez pourquoi les étoiles GitHub comptent.