Documentation Intlayer

Bienvenue dans la documentation officielle d'Intlayer ! Ici, vous trouverez tout ce dont vous avez besoin pour intégrer, configurer et maîtriser Intlayer pour tous vos besoins en internationalisation (i18n), que vous travailliez avec Next.js, React, Vite, Express ou un autre environnement JavaScript.

Introduction

Qu'est-ce qu'Intlayer ?

Intlayer est une bibliothèque d'internationalisation conçue spécifiquement pour les développeurs JavaScript. Elle permet la déclaration de votre contenu partout dans votre code. Elle convertit les déclarations de contenu multilingue en dictionnaires structurés pour s'intégrer facilement dans votre code. Grâce à TypeScript, Intlayer rend votre développement plus robuste et plus efficace.

Intlayer fournit également un éditeur visuel optionnel qui vous permet de modifier et de gérer facilement votre contenu. Cet éditeur est particulièrement utile pour les développeurs qui préfèrent une interface visuelle pour la gestion de contenu, ou pour les équipes qui génèrent du contenu sans avoir à se soucier du code.

Exemple d'utilisation

.
└── Components
    └── MyComponent
        ├── index.content.ts
        └── index.tsx

import { t, type Dictionary } from "intlayer";

const componentContent = {
  key: "component-key",
  content: {
    myTranslatedContent: t({
      en: "Hello World",
      es: "Hola Mundo",
      fr: "Bonjour le monde",
    }),
  },
} satisfies Dictionary;

export default componentContent;

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

export const MyComponent: FC = () => {
  const { myTranslatedContent } = useIntlayer("component-key");

  return <span>{myTranslatedContent}</span>;
};

Pourquoi Intlayer plutôt que des alternatives ?

Par rapport aux solutions principales telles que next-intl ou i18next, Intlayer est une solution dotée d'optimisations intégrées telles que :

Caractéristiques principales

Intlayer propose une variété de fonctionnalités adaptées aux besoins du développement web moderne. Voici les fonctionnalités clés, avec des liens vers la documentation détaillée de chacune :

• Support de l'internationalisation : Améliorez la portée mondiale de votre application grâce à un support intégré de l'internationalisation.
• Éditeur Visuel : Améliorez votre flux de travail de développement avec des plugins d'éditeur conçus pour Intlayer. Consultez le Guide de l'Éditeur Visuel.
• Flexibilité de Configuration : Personnalisez votre configuration avec des options détaillées dans le Guide de Configuration.
• Outils CLI Avancés : Gérez vos projets efficacement à l'aide de l'interface en ligne de commande d'Intlayer. Explorez les capacités dans la Documentation des outils CLI.

Concepts Clés

Dictionnaire

Organisez votre contenu multilingue à proximité de votre code pour garder le tout cohérent et maintenable.

• Commencer
  Apprenez les bases de la déclaration de votre contenu dans Intlayer.

• Traduction
  Comprenez comment les traductions sont générées, stockées et utilisées dans votre application.

• Énumération
  Gérez facilement des ensembles de données répétés ou fixes dans différentes langues.

• Condition
  Apprenez à utiliser la logique conditionnelle dans Intlayer pour créer du contenu dynamique.

• Insertion
  Découvrez comment insérer des valeurs dans une chaîne de caractères en utilisant des espaces réservés d'insertion.

• Récupération par Fonction
  Découvrez comment récupérer dynamiquement du contenu avec une logique personnalisée pour correspondre au flux de travail de votre projet.

• Markdown
  Apprenez à utiliser le Markdown dans Intlayer pour créer du contenu enrichi.

• Intégrations de fichiers
  Découvrez comment intégrer des fichiers externes dans Intlayer pour les utiliser dans l'éditeur de contenu.

• Imbrication
  Comprenez comment imbriquer du contenu dans Intlayer pour créer des structures complexes.

Environnements & Intégrations

Nous avons conçu Intlayer avec la flexibilité à l'esprit, offrant une intégration fluide à travers les frameworks et outils de build populaires :

• Intlayer avec Next.js 16
• Intlayer avec Next.js 15
• Intlayer avec Next.js 14 (App Router)
• Intlayer avec Next.js Page Router
• Intlayer avec React CRA
• Intlayer avec Vite + React
• Intlayer avec React Router v7
• Intlayer avec Tanstack Start
• Intlayer avec React Native et Expo
• Intlayer avec Lynx et React
• Intlayer avec Vite + Preact
• Intlayer avec Vite + Vue
• Intlayer avec Nuxt
• Intlayer avec Vite + Svelte
• Intlayer avec SvelteKit
• Intlayer avec Express
• Intlayer avec NestJS
• Intlayer avec Hono
• Intlayer avec Angular

Chaque guide d'intégration comprend les meilleures pratiques pour utiliser les fonctionnalités d'Intlayer, telles que le rendu côté serveur, le routage dynamique ou le rendu côté client, afin de maintenir une application rapide, optimisée pour le référencement (SEO) et hautement scalable.

Contribution & Retours

Nous apprécions la force de l'open-source et du développement axé sur la communauté. Si vous souhaitez proposer des améliorations, ajouter un nouveau guide ou corriger des problèmes dans nos documentations, n'hésitez pas à soumettre une Pull Request ou à ouvrir une issue sur notre dépôt GitHub.

Prêt à traduire votre application plus rapidement et plus efficacement ? Plongez dans nos documentations pour commencer à utiliser Intlayer dès aujourd'hui. Découvrez une approche robuste et simplifiée de l'internationalisation qui maintient votre contenu organisé et votre équipe plus productive.

Questions fréquentes