Comment rendre un composant multilingue (i18n) avec Intlayer

Ce guide montre les étapes minimales pour rendre un composant d'interface utilisateur multilingue dans deux configurations courantes :

• React (Vite/SPA)
• Next.js (App Router)

Vous commencerez par déclarer votre contenu, puis vous le récupérerez dans votre composant.

1) Déclarez votre contenu (partagé pour React et Next.js)

Créez un fichier de déclaration de contenu à proximité de votre composant. Cela permet de garder les traductions proches de leur utilisation et assure la sécurité des types.

import { t, type Dictionary } from "intlayer";const componentContent = {  key: "component-example",  content: {    title: t({      en: "Hello",      fr: "Bonjour",      es: "Hola",    }),    description: t({      en: "A multilingual React component",      fr: "Un composant React multilingue",      es: "Un componente React multilingüe",    }),  },} satisfies Dictionary;export default componentContent;

Le JSON est également supporté si vous préférez les fichiers de configuration.

{  "$schema": "https://intlayer.org/schema.json",  "key": "component-example",  "content": {    "title": {      "nodeType": "translation",      "translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }    },    "description": {      "nodeType": "translation",      "translation": {        "en": "A multilingual React component",        "fr": "Un composant React multilingue",        "es": "Un componente React multilingüe"      }    }  }}

2) Récupérez votre contenu

Cas A — Application React (Vite/SPA)

Approche par défaut : utilisez useIntlayer pour récupérer par clé. Cela permet de garder les composants légers et typés.

import { useIntlayer } from "react-intlayer";export function ComponentExample() {  const content = useIntlayer("component-example");  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );}

Rendu côté serveur ou hors du provider : utilisez react-intlayer/server et passez un locale explicite si nécessaire.

import { useIntlayer } from "react-intlayer/server";export function ServerRenderedExample({ locale }: { locale: string }) {  const content = useIntlayer("component-example", locale);  return (    <>      <h1>{content.title}</h1>      <p>{content.description}</p>    </>  );}

Alternative : useDictionary peut lire un objet déclaré en entier si vous préférez regrouper la structure au point d'appel.

import { useDictionary } from "react-intlayer";import componentContent from "./component.content";export function ComponentWithDictionary() {  const { title, description } = useDictionary(componentContent);  return (    <div>      <h1>{title}</h1>      <p>{description}</p>    </div>  );}

Cas B — Next.js (App Router)

Privilégiez les composants serveur pour la sécurité des données et la performance. Utilisez useIntlayer depuis next-intlayer/server dans les fichiers serveur, et useIntlayer depuis next-intlayer dans les composants clients.

import { useIntlayer } from "next-intlayer/server";export default function ServerComponent() {  const content = useIntlayer("component-example");  return (    <>      <h1>{content.title}</h1>      <p>{content.description}</p>    </>  );}

"use client";import { useIntlayer } from "next-intlayer";export function ClientComponent() {  const content = useIntlayer("component-example");  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );}

Astuce : Pour les métadonnées de page et le SEO, vous pouvez également récupérer le contenu en utilisant getIntlayer et générer des URLs multilingues via getMultilingualUrls.

Pourquoi l’approche composant d’Intlayer est la meilleure

• Collocation : Les déclarations de contenu vivent à proximité des composants, réduisant les dérives et améliorant la réutilisation à travers les systèmes de design.
• Sécurité des types : Les clés et structures sont fortement typées ; les traductions manquantes apparaissent à la compilation plutôt qu’à l’exécution.
• Serveur d'abord : Fonctionne nativement dans les composants serveur pour une meilleure sécurité et performance ; les hooks client restent ergonomiques.
• Tree-shaking : Seul le contenu utilisé par le composant est inclus, ce qui maintient les charges utiles légères dans les grandes applications.
• Expérience développeur & outils : Middleware intégré, assistants SEO, et traductions optionnelles via éditeur visuel/IA facilitent le travail quotidien.

Consultez les comparaisons et les modèles dans le résumé axé sur Next.js : https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer

Guides et références associés

• Configuration React (Vite) : https://intlayer.org/doc/environment/vite-and-react
• React Router v7 : https://intlayer.org/doc/environment/vite-and-react/react-router-v7
• Démarrage TanStack : https://intlayer.org/doc/environment/vite-and-react/tanstack-start
• Configuration Next.js : https://intlayer.org/doc/environment/nextjs
• Pourquoi Intlayer vs. next-intl vs. next-i18next : https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer

Ces pages incluent la configuration de bout en bout, les fournisseurs, le routage et les assistants SEO.