Intégration React Router / Remix

Lingo.dev Compiler fonctionne parfaitement avec React Router et la dernière version de Remix (qui est maintenant React Router v7) pour fournir une localisation au moment de la compilation.

Suivez ces étapes pour ajouter la prise en charge multilingue à votre application React Router ou Remix.

Ou explorez le projet de démonstration React Router / Remix pour essayer le Compiler en action.

Prérequis

  • React Router v6+ ou Remix
  • Vite comme outil de build
  • React 18+
  • Node.js 18 ou supérieur

Étape 1. Installer le package

Installez le package lingo.dev :

npm install lingo.dev

Étape 2. Configurer Vite

Importez et configurez le compilateur dans votre fichier vite.config.ts :

import { defineConfig } from "vite";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  // Votre configuration Vite existante
};

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "app",
    targetLocales: ["es", "fr", "de"],
    models: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

Étape 3. Configurer l'authentification

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

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, une mémoire de traduction et la prise en charge de glossaires. Des options gratuites et payantes sont disponibles.

Pour vous authentifier, exécutez :

npx lingo.dev@latest login

Si vous rencontrez des problèmes avec le flux du navigateur, vous pouvez ajouter manuellement une clé LINGODOTDEV_API_KEY à votre fichier .env :


# .env

LINGODOTDEV_API_KEY=...

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

Option 2. Fournisseur LLM alternatif

Alternativement, vous pouvez utiliser des modèles provenant de fournisseurs LLM pris en charge :

Ajoutez votre/vos clé(s) API à votre fichier .env :


# .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 LLM et d'accepter leurs conditions d'utilisation avant de l'utiliser dans Compiler.

Étape 4. Ajouter le fournisseur

Pour React Router

Importez le fournisseur dans votre composant racine (app/root.tsx) :

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

// Pour React Router avec chargeurs de données
export async function loader(args: LoaderFunctionArgs) {
  return {
    lingoDictionary: await loadDictionary(args.request),
  };
}

export default function Root() {
  const { lingoDictionary } = useLoaderData<typeof loader>();

  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <body>
          <Outlet />
        </body>
      </html>
    </LingoProvider>
  );
}

Pour Remix

Importez le fournisseur dans votre route racine (app/root.tsx) :

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

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

export default function App() {
  const { lingoDictionary } = useLoaderData<typeof loader>();

  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <head>
          <Meta />
          <Links />
        </head>
        <body>
          <Outlet />
          <ScrollRestoration />
          <Scripts />
        </body>
      </html>
    </LingoProvider>
  );
}

Étape 5. Facultatif : Ajouter un sélecteur de langue

Créez un composant de sélection de langue :

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

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

Étape 6. Compiler et tester

Démarrez votre serveur de développement :

npm run dev

Le compilateur va automatiquement :

  1. Analyser vos composants React pour identifier le contenu traduisible
  2. Extraire les clés de traduction
  3. Générer des traductions optimisées par IA
  4. Créer des fichiers de traduction optimisés dans le répertoire lingo/

Visitez http://localhost:5173 pour voir votre application multilingue en action.

Options de configuration

Vous pouvez personnaliser le comportement du compilateur :

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    sourceLocale: "en",
    targetLocales: ["es", "fr", "de", "ja"],
    lingoDir: "lingo",
    debug: false,
  })(viteConfig),
);

Rendu côté serveur

Le compilateur fonctionne aussi bien avec le rendu côté client que côté serveur :

Composants client

// src/components/Welcome.tsx
export function Welcome() {
  return (
    <div>
      <h1>Welcome to our app</h1>
      <p>This content is automatically translated</p>
    </div>
  );
}

Composants de route

// app/routes/about.tsx
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Learn more about our company</p>
    </div>
  );
}

Déploiement en production

  1. Compilez votre application :

    npm run build

  2. Validez les fichiers de traduction :

    git add lingo/
git commit -m "Add translations"

  3. Déployez en utilisant votre plateforme préférée

Votre application React Router ou Remix servira automatiquement le contenu localisé en fonction des préférences de l'utilisateur ou des modèles d'URL.

Prochaines étapes