Configuration

Alpha

Le Lingo.dev Compiler est en alpha. Il est instable, n’est pas recommandé pour un usage en production, et les API peuvent évoluer d’une version à l’autre.

Ajoutez la prise en charge multilingue à votre application React en moins de 5 minutes.

Prérequis

Node.js 18+ et une application React utilisant Next.js (App Router) ou Vite.

Installation#

bash

pnpm install @lingo.dev/compiler

Configurez votre framework#

Rendez votre config asynchrone et enveloppez-la avec withLingo :

// next.config.ts
import type { NextConfig } from "next";
import { withLingo } from "@lingo.dev/compiler/next";

const nextConfig: NextConfig = {};

export default async function (): Promise<NextConfig> {
  return await withLingo(nextConfig, {
    sourceRoot: "./app",
    sourceLocale: "en",
    targetLocales: ["es", "de", "fr"],
    models: "lingo.dev",
    dev: {
      usePseudotranslator: true,
    },
  });
}

Ajoutez LingoProvider#

tsx

// app/layout.tsx
import { LingoProvider } from "@lingo.dev/compiler/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <LingoProvider>
      <html>
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

Authentification#

bash

npx lingo.dev@latest login

Cette commande ouvre votre navigateur pour l’authentification. L’offre Hobby gratuite convient à la plupart des projets.

Si l’authentification via le navigateur est bloquée, ajoutez manuellement la clé à .env :

bash

LINGODOTDEV_API_KEY=your_key_here

Lancez le serveur de développement#

bash

npm run dev

Le Compiler analyse votre JSX, génère des pseudotraductions (de fausses traductions instantanées pour visualiser ce qui sera traduit) et les injecte dans vos composants. Les métadonnées sont stockées dans .lingo/metadata.json — ajoutez ce fichier au contrôle de version.

Ajoutez un sélecteur de langue (facultatif)#

tsx

"use client"; // For Next.js

import { useLingoContext } from "@lingo.dev/compiler/react";

export function LanguageSwitcher() {
  const { locale, setLocale } = useLingoContext();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      <option value="en">English</option>
      <option value="es">Espanol</option>
      <option value="de">Deutsch</option>
    </select>
  );
}

Générez de vraies traductions#

Quand vous êtes prêt, désactivez le pseudotraducteur :

{
  dev: {
    usePseudotranslator: false,
  }
}

Redémarrez le serveur de développement. Le Compiler génère de vraies traductions par IA pour les textes nouveaux ou modifiés.

Étapes suivantes#

Fonctionnement

Le pipeline de transformation au moment du build

Next.js

Configuration et fonctionnalités spécifiques à Next.js

Vite + React

Configuration et fonctionnalités spécifiques à Vite

Référence de configuration

Toutes les options de configuration

Cette page vous a-t-elle été utile ?

Alpha

Le Lingo.dev Compiler est en alpha. Il est instable, n’est pas recommandé pour un usage en production, et les API peuvent évoluer d’une version à l’autre.

Ajoutez la prise en charge multilingue à votre application React en moins de 5 minutes.

Prérequis

Node.js 18+ et une application React utilisant Next.js (App Router) ou Vite.

Installation#

bash

pnpm install @lingo.dev/compiler

Configurez votre framework#

Rendez votre config asynchrone et enveloppez-la avec withLingo :

// next.config.ts
import type { NextConfig } from "next";
import { withLingo } from "@lingo.dev/compiler/next";

const nextConfig: NextConfig = {};

export default async function (): Promise<NextConfig> {
  return await withLingo(nextConfig, {
    sourceRoot: "./app",
    sourceLocale: "en",
    targetLocales: ["es", "de", "fr"],
    models: "lingo.dev",
    dev: {
      usePseudotranslator: true,
    },
  });
}

Ajoutez LingoProvider#

tsx

// app/layout.tsx
import { LingoProvider } from "@lingo.dev/compiler/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <LingoProvider>
      <html>
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

Authentification#

bash

npx lingo.dev@latest login

Cette commande ouvre votre navigateur pour l’authentification. L’offre Hobby gratuite convient à la plupart des projets.

Si l’authentification via le navigateur est bloquée, ajoutez manuellement la clé à .env :

bash

LINGODOTDEV_API_KEY=your_key_here

Lancez le serveur de développement#

bash

npm run dev

Ajoutez un sélecteur de langue (facultatif)#

tsx

"use client"; // For Next.js

import { useLingoContext } from "@lingo.dev/compiler/react";

export function LanguageSwitcher() {
  const { locale, setLocale } = useLingoContext();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      <option value="en">English</option>
      <option value="es">Espanol</option>
      <option value="de">Deutsch</option>
    </select>
  );
}

Générez de vraies traductions#

Quand vous êtes prêt, désactivez le pseudotraducteur :

{
  dev: {
    usePseudotranslator: false,
  }
}

Redémarrez le serveur de développement. Le Compiler génère de vraies traductions par IA pour les textes nouveaux ou modifiés.

Étapes suivantes#

Fonctionnement

Le pipeline de transformation au moment du build

Next.js

Configuration et fonctionnalités spécifiques à Next.js

Vite + React

Configuration et fonctionnalités spécifiques à Vite

Référence de configuration

Toutes les options de configuration