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

Créez un compte gratuit sur groq.com et ajoutez votre clé API :


# .env

GROQ_API_KEY=gsk_...

Étape 4. Ajouter le Provider

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