Démarrage rapide

Lingo.dev Compiler est conçu pour rendre n'importe quelle application React multilingue lors 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: {
    "*:*": "groq:mistral-saba-24b",
  },
})(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: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(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: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

Étape 3. Configurer l'authentification

Lingo.dev Compiler utilise GROQ pour les traductions alimentées par l'IA. Créez un compte gratuit sur groq.com et obtenez votre clé API.

Ajoutez votre clé API à votre environnement :


# .env

GROQ_API_KEY=gsk_...

Étape 4. Ajouter le fournisseur

Enveloppez votre application avec le LingoProvider pour activer les traductions :

Next.js

Dans votre fichier 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 fichier 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 fichier 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. Analyser vos composants React pour identifier les textes à traduire
  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