\n\n\n```\n\n \n \n\nWith `svelte-intlayer`, you can use translations in Svelte components. The hook returns a Svelte store. Here's an example:\n\n```svelte fileName=\"**/*.svelte\"\n\n\n

\n

{$content.welcomeMessage}

\n

\n```\n\n \n \n\nWith `preact-intlayer`, you can use translations in Preact components. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"preact\";\nimport { useIntlayer } from \"preact-intlayer\";\n\nconst MyComponent: FC = () => {\n const content = useIntlayer(\"multi_lang\");\n\n return (\n

\n

{content.welcomeMessage}

\n

\n );\n};\n\nexport default MyComponent;\n```\n\n \n \n\nWith `solid-intlayer`, you can use translations in SolidJS components. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { Component } from \"solid-js\";\nimport { useIntlayer } from \"solid-intlayer\";\n\nconst MyComponent: Component = () => {\n const content = useIntlayer(\"multi_lang\");\n\n return (\n

\n

{content.welcomeMessage}

\n

\n );\n};\n\nexport default MyComponent;\n```\n\n \n \n\nWith `angular-intlayer`, you can use translations in Angular components. Here's an example:\n\n```typescript fileName=\"app.component.ts\" codeFormat=\"typescript\"\nimport { Component } from \"@angular/core\";\nimport { useIntlayer } from \"angular-intlayer\";\n\n@Component({\n selector: \"app-my-component\",\n template: `\n

\n

{{ content().welcomeMessage }}

\n

\n `,\n})\nexport class MyComponent {\n content = useIntlayer(\"multi_lang\");\n}\n```\n\n \n \n\nWith `vanilla-intlayer`, you can use translations by subscribing to content changes. Here's an example:\n\n```typescript fileName=\"**/*.ts\" codeFormat={[\"typescript\", \"esm\"]}\nimport { installIntlayer, useIntlayer } from \"vanilla-intlayer\";\n\ninstallIntlayer();\n\nconst content = useIntlayer(\"multi_lang\").onChange((newContent) => {\n document.getElementById(\"welcome-message\")!.textContent = String(\n newContent.welcomeMessage\n );\n});\n\n// Initial render\ndocument.getElementById(\"welcome-message\")!.textContent = String(\n content.welcomeMessage\n);\n```\n\n \n\n\n## Objets de Contenu Personnalisés\n\n`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é :\n\n```typescript fileName=\"**/*.content.ts\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { t, type Dictionary } from \"intlayer\";\n\ninterface ICustomContent {\n title: string;\n content: string;\n}\n\nconst customContent = {\n key: \"custom_content\",\n content: {\n profileText: t({\n en: {\n title: \"Page Title\",\n content: \"Page Content\",\n },\n fr: {\n title: \"Titre de la Page\",\n content: \"Contenu de la Page\",\n },\n es: {\n title: \"Titre de la Page\",\n content: \"Contenu de la Page\",\n },\n }),\n },\n} satisfies Dictionary;\n\nexport default customContent;\n```\n\n```json fileName=\"**/*.content.json\" contentDeclarationFormat=\"json\"\n{\n \"$schema\": \"https://intlayer.org/schema.json\",\n \"key\": \"custom_content\",\n \"content\": {\n \"profileText\": {\n \"nodeType\": \"translation\",\n \"translation\": {\n \"en\": {\n \"title\": \"Page Title\",\n \"content\": \"Contenu de la Page\"\n },\n \"fr\": {\n \"title\": \"Titre de la Page\",\n \"content\": \"Contenu de la Page\"\n },\n \"es\": {\n \"title\": \"Título de la Página\",\n \"content\": \"Contenido de la Página\"\n }\n }\n }\n }\n}\n```\n","description":"Découvrez comment déclarer et utiliser la traduction dans votre site web multilingue. Suivez les étapes de cette documentation en ligne pour configurer votre projet en quelques minutes.","url":"https://intlayer.org/fr/doc/concept/content/translation","datePublished":"2024-08-11","dateModified":"2025-06-29","version":"5.5.10","keywords":"Traduction, Internationalisation, Documentation, Intlayer, Next.js, JavaScript, React","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Développeurs, Responsables de contenu"}}

Auteur:

Création:2024-08-11Dernière mise à jour:2025-06-29

Référencez cette doc à votre assistant AI préféréChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Posez votre question et obtenez un résumé du document en referencant cette page et le Provider AI de votre choix

Ce document n'est pas à jour, la version de base a été mise à jour le 23 août 2025.

Aller à la doc anglaise

Historique des versions

"Historique initial"
v5.5.1029/06/2025

Le contenu de cette page a été traduit à l'aide d'une IA.

Voir la dernière version du contenu original en anglais

Modifier cette documentation

Si 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 documentation

Copier

Copier le Markdown du doc dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

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

With react-intlayer, you can use translations in React components. Here's an example:

**/*.tsx

Copier le code

Copier le code dans le presse-papiers

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;

This component fetches the corresponding translation based on the current locale set in your application.

With next-intlayer, you can use translations in React Server Components or Client Components. Here's an example in a Client Component:

**/*.tsx

Copier le code

Copier le code dans le presse-papiers

"use client";

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

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

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

export default MyComponent;

With vue-intlayer, you can use translations in Vue components. Here's an example:

**/*.vue

Copier le code

Copier le code dans le presse-papiers

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const content = useIntlayer("multi_lang");</script><template><div>  <p>{{ content.welcomeMessage }}</p></div></template>

With svelte-intlayer, you can use translations in Svelte components. The hook returns a Svelte store. Here's an example:

**/*.svelte

Copier le code

Copier le code dans le presse-papiers

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("multi_lang");</script><div><p>{$content.welcomeMessage}</p></div>

With preact-intlayer, you can use translations in Preact components. Here's an example:

**/*.tsx

Copier le code

Copier le code dans le presse-papiers

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

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

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

export default MyComponent;

With solid-intlayer, you can use translations in SolidJS components. Here's an example:

**/*.tsx

Copier le code

Copier le code dans le presse-papiers

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

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

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

export default MyComponent;

With angular-intlayer, you can use translations in Angular components. Here's an example:

app.component.ts

Copier le code

Copier le code dans le presse-papiers

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-my-component",template: `  <div>    <p>{{ content().welcomeMessage }}</p>  </div>`,})export class MyComponent {content = useIntlayer("multi_lang");}

With vanilla-intlayer, you can use translations by subscribing to content changes. Here's an example:

**/*.ts

Copier le code

Copier le code dans le presse-papiers

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("multi_lang").onChange((newContent) => {
document.getElementById("welcome-message")!.textContent = String(
  newContent.welcomeMessage
);
});

// Initial render
document.getElementById("welcome-message")!.textContent = String(
content.welcomeMessage
);

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

Copier le code

Copier le code dans le presse-papiers

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