Démarrage rapide

Lingo.dev Compiler est conçu pour rendre n'importe quelle application React multilingue au moment de la compilation sans nécessiter de modifications des composants React existants.

Ce guide de démarrage rapide vous aidera à ajouter la prise en charge multilingue à votre application React en moins de 5 minutes.

À la fin de ce guide, vous aurez :

  1. Installé et configuré Lingo.dev Compiler dans votre application React
  2. Mis en place l'extraction et l'injection automatisées des traductions
  3. Une application multilingue fonctionnelle avec des traductions optimisées

Commençons !

Prérequis

Lingo.dev Compiler fonctionne avec les frameworks React modernes. Avant de commencer, assurez-vous d'avoir l'une des configurations prises en charge :

  • Next.js (App Router)
  • React Router / Remix
  • Vite + React

Ou explorez nos applications de démonstration : Next.js, React Router, et Vite.

Étape 1. Installer le package

Installez le package lingo.dev dans votre projet :

npm install lingo.dev

Étape 2. Configurer votre framework

Choisissez votre framework et suivez la configuration spécifique :

Next.js

Mettez à jour votre next.config.js :

import lingoCompiler from "lingo.dev/compiler";

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: "lingo.dev", // Option 1: Moteur Lingo.dev
  // models: {
  //   "*:*": "groq:mistral-saba-24b", // Option 2: GROQ
  //   "*:*": "google:gemini-2.0-flash", // Option 2: Google AI
  //   "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // Option 2: OpenRouter
  //   "*:*": "ollama:mistral-small3.1", // Option 2: Ollama
  //   "*:*": "mistral:mistral-small-latest", // Mistral
  // },
})(nextConfig);

React Router / Remix

Mettez à jour votre vite.config.ts :

import lingoCompiler from "lingo.dev/compiler";

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    targetLocales: ["es", "fr", "de"],
    models: "lingo.dev", // Option 1: Moteur Lingo.dev
    // models: {
    //   "*:*": "groq:mistral-saba-24b", // Option 2: GROQ
    //   "*:*": "google:gemini-2.0-flash", // Option 2: Google AI
    //   "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // Option 2: OpenRouter
    //   "*:*": "ollama:mistral-small3.1", // Option 2: Ollama
    // },
  })(viteConfig),
);

Vite

Mettez à jour votre vite.config.ts :

import lingoCompiler from "lingo.dev/compiler";

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    targetLocales: ["es", "fr", "de"],
    models: "lingo.dev", // Option 1: Moteur Lingo.dev
    // models: {
    //   "*:*": "groq:mistral-saba-24b", // Option 2: GROQ
    //   "*:*": "google:gemini-2.0-flash", // Option 2: Google AI
    //   "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // Option 2: OpenRouter
    //   "*:*": "ollama:mistral-small3.1", // Option 2: Ollama
    //   "*:*": "mistral:mistral-small-latest", // Mistral
    // },
  })(viteConfig),
);

Étape 3. Configurer l'authentification

Lingo.dev Compiler envoie votre contenu aux moteurs de traduction IA pour la localisation, nous devons donc d'abord nous authentifier.

Option 1. Moteur Lingo.dev

Lingo.dev Compiler peut utiliser le Moteur Lingo.dev comme votre moteur de traduction IA.

Il offre une sélection dynamique de modèles, un routage automatique vers différents modèles pour chaque paire de langues, des replis automatiques de modèles, une mémoire de traduction qui prend en compte les traductions antérieures, et la prise en charge de glossaires pour la terminologie spécifique au domaine de votre projet. Il existe des options gratuites et payantes, et le niveau gratuit Hobby devrait être suffisant pour la plupart des projets.

Pour vous authentifier, exécutez :

npx lingo.dev@latest login

Détail important. Si vous utilisez le navigateur Brave, ou si vos extensions de navigateur bloquent le flux d'authentification, vous pouvez vous authentifier manuellement en ajoutant une variable d'environnement LINGODOTDEV_API_KEY à votre fichier .env :

LINGODOTDEV_API_KEY=...

Vous trouverez le jeton dans les Paramètres du Projet Moteur Lingo.dev.

Option 2. Fournisseur LLM alternatif

Alternativement, vous pouvez utiliser des modèles provenant de l'un des fournisseurs de LLM supportés :

Ajoutez votre clé API pour votre fournisseur de LLM configuré à votre environnement :


# .env

GROQ_API_KEY=gsk_...
GOOGLE_API_KEY=...
OPENROUTER_API_KEY=...
MISTRAL_API_KEY=...

Remarque : Assurez-vous d'activer votre compte auprès du fournisseur de LLM et d'accepter leurs conditions d'utilisation avant de l'utiliser dans Compiler.

Étape 4. Ajouter le Provider

Enveloppez votre application avec le LingoProvider pour activer les traductions :

Next.js

Dans votre layout.tsx :

import { LingoProvider, loadDictionary } from "lingo.dev/react/rsc";

export default function Layout({ children }) {
  return (
    <LingoProvider loadDictionary={(locale) => loadDictionary(locale)}>
      <html>
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

React Router / Remix

Dans votre root.tsx :

import { LingoProvider } from "lingo.dev/react/client";
import { loadDictionary } from "lingo.dev/react/react-router";

export async function loader(args) {
  return { lingoDictionary: await loadDictionary(args.request) };
}

export default function Root() {
  const { lingoDictionary } = useLoaderData();
  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <body>
          <Outlet />
        </body>
      </html>
    </LingoProvider>
  );
}

Vite

Dans votre main.tsx :

import { LingoProviderWrapper, loadDictionary } from "lingo.dev/react/client";

ReactDOM.createRoot(document.getElementById("root")).render(
  <LingoProviderWrapper loadDictionary={(locale) => loadDictionary(locale)}>
    <App />
  </LingoProviderWrapper>,
);

Étape 5. Compiler et tester

Lancez votre serveur de développement :

npm run dev

Le compilateur va automatiquement :

  1. Scanner vos composants React pour détecter le texte traduisible
  2. Extraire les clés de traduction
  3. Générer des traductions en utilisant l'IA
  4. Créer des fichiers de traduction optimisés dans le répertoire lingo/

Votre application est maintenant multilingue ! Le compilateur crée des dictionnaires versionnés qui suivent les modifications de contenu et ne retraduit que le contenu modifié.

Optionnel : Ajouter un sélecteur de langue

Ajoutez un sélecteur de langue pour permettre aux utilisateurs de changer de langue :

import { LocaleSwitcher } from "lingo.dev/react/client";

export function Header() {
  return (
    <header>
      <LocaleSwitcher locales={["en", "es", "fr", "de"]} />
    </header>
  );
}

Prochaines étapes