Creation:2024-08-11Last update:2025-06-29

    Traduction

    Définir les traductions

    La fonction t dans intlayer vous permet de déclarer du contenu en plusieurs langues. Cette fonction garantit la sécurité des types, en générant une erreur si des traductions sont manquantes, ce qui est particulièrement utile dans les environnements TypeScript.

    Voici un exemple de déclaration de contenu avec des traductions.

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

interface Content {
  welcomeMessage: string;
}

export default {
  key: "multi_lang",
  content: {
    welcomeMessage: t({
      en: "Welcome to our application",
      fr: "Bienvenue dans notre application",
      es: "Bienvenido a nuestra aplicación",
    }),
  },
} satisfies Dictionary<Content>;

    Configuration des locales

    Pour assurer une gestion correcte des traductions, vous pouvez configurer les locales acceptées dans intlayer.config.ts. Cette configuration vous permet de définir les langues que votre application supporte :

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

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

export default config;

    Utilisation des traductions dans les composants React

    Avec react-intlayer, vous pouvez utiliser les traductions dans les composants React. Voici un exemple :

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const MyComponent: FC = () => {
  const content = useIntlayer("multi_lang");

  return (
    <div>
      <p>{content.welcomeMessage}</p>
    </div>
  );
};

export default MyComponent;

    Ce composant récupère la traduction correspondante en fonction de la locale actuelle définie dans votre application.

    Objets de Contenu Personnalisés

    intlayer prend en charge les objets de contenu personnalisés pour la traduction, vous permettant de définir des structures plus complexes tout en garantissant la sécurité des types. Voici un exemple avec un objet personnalisé :

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

interface ICustomContent {
  title: string;
  content: string;
}

const customContent = {
  key: "custom_content",
  content: {
    profileText: t<ICustomContent>({
      en: {
        title: "Page Title",
        content: "Page Content",
      },
      fr: {
        title: "Titre de la Page",
        content: "Contenu de la Page",
      },
      es: {
        title: "Titre de la Page",
        content: "Contenu de la Page",
      },
    }),
  },
} satisfies Dictionary;

export default customContent;
    Déclaration de contenu
    Pluriel