"use i18n";

La directive "use i18n" permet la localisation fichier par fichier des composants React sans avoir à refactoriser votre code existant. Tout comme "use client" ou "use server", vous l'ajoutez simplement en haut de votre fichier pour localiser automatiquement tout le contenu traduisible dans ce composant.

Cette approche est parfaite pour ajouter progressivement un support multilingue à des bases de code volumineuses avec un risque minimal et une flexibilité maximale.

Comment ça fonctionne

Lorsque vous ajoutez "use i18n" en haut d'un fichier React, le Compilateur Lingo.dev automatiquement :

  1. Analyse l'intégralité du fichier pour identifier le contenu traduisible
  2. Extrait le texte JSX et les attributs traduisibles
  3. Génère des traductions en utilisant votre modèle d'IA configuré
  4. Injecte les versions localisées au moment de la compilation
  5. Maintient le Hot Module Replacement pour un développement fluide

La directive fonctionne au niveau du fichier, traitant tout ce qui se trouve dans les limites de ce composant tout en laissant le reste de votre application inchangé.

Activer la directive

Pour utiliser la directive "use i18n", activez-la dans votre configuration du compilateur :

{
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  useDirective: true, // Active la directive "use i18n"
  models: {
    "*:*": "groq:mistral-saba-24b",
  }
}

Remarque : Lorsque useDirective est défini sur false (par défaut), le Compilateur Lingo.dev traite tous les fichiers comme s'ils avaient "use i18n" en haut. Définir useDirective: true vous donne un contrôle granulaire pour localiser les fichiers individuellement.

Utilisation de base

Ajoutez la directive en haut de n'importe quel fichier de composant React :

"use i18n";

import React from "react";

export function WelcomeCard() {
  return (
    <div className="card">
      <h2>Welcome to our app!</h2>
      <p>
        Get started by exploring our features and discovering what makes our
        platform special.
      </p>
      <button>Get Started</button>
    </div>
  );
}

C'est tout ! Le composant sera désormais automatiquement rendu dans la langue sélectionnée par l'utilisateur sans aucune modification de code.

Fonctionne avec les directives existantes

La directive "use i18n" fonctionne naturellement avec d'autres directives React que vous pourriez déjà utiliser :

"use client";
"use i18n";

export function InteractiveComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Compteur de clics</h1>
      <p>Vous avez cliqué {count} fois</p>
      <button onClick={() => setCount(count + 1)}>Cliquez-moi !</button>
    </div>
  );
}

"use server";
"use i18n";

export async function ServerComponent() {
  const data = await fetchData();

  return (
    <div>
      <h1>Contenu rendu côté serveur</h1>
      <p>Ce contenu est rendu sur le serveur et localisé au moment de la compilation</p>
    </div>
  );
}

Le compilateur traite intelligemment toutes les directives ensemble, maintenant le comportement prévu de vos composants tout en ajoutant la localisation.

Flux de travail de développement

1. Migration progressive

Commencez par ajouter la directive à des composants individuels :

// Avant : composant uniquement en anglais
export function Header() {
  return <h1>Mon application</h1>;
}

// Après : composant multilingue avec une seule ligne
("use i18n");

export function Header() {
  return <h1>Mon application</h1>;
}

2. Remplacement de module à chaud

La directive fonctionne parfaitement avec le HMR. Lorsque vous modifiez du texte dans un composant avec "use i18n", les traductions se mettent à jour immédiatement dans votre navigateur :

"use i18n";

export function StatusMessage() {
  return (
    <div>
      {/* Modifiez ce texte et voyez-le se mettre à jour dans toutes les langues instantanément */}
      <p>Vos modifications ont été enregistrées avec succès !</p>
    </div>
  );
}

3. Approche fichier par fichier

Parfait pour les grandes bases de code où vous souhaitez localiser progressivement :

src/
├── components/
│   ├── Header.tsx          // ✅ "use i18n" - localisé
│   ├── Navigation.tsx      // ✅ "use i18n" - localisé
│   ├── ProductCard.tsx     // ✅ "use i18n" - localisé
│   ├── Footer.tsx          // ⏳ Pas encore localisé
│   └── Sidebar.tsx         // ⏳ Pas encore localisé

Avantages

La directive "use i18n" rend la localisation aussi simple que l'ajout d'une seule ligne à vos composants React, et est conçue pour les projets matures qui nécessitent une localisation progressive.

Prochaines étapes