Compilateur Lingo.dev

Le compilateur Lingo.dev est un système de traduction gratuit et open source qui s'exécute au moment de la compilation et qui rend les applications React multilingues sans modifier vos composants.

Pour voir le compilateur en action, consultez cette démo en direct : https://x.com/MaxPrilutskiy/status/1929946504216932746

Exemple rapide

Avant d'ajouter le compilateur :

export function Welcome() {
  return <h1>Welcome to our app</h1>;
}

Après avoir ajouté le compilateur (aucune modification de code nécessaire) :

// Same code - translations injected automatically at build time
export function Welcome() {
  return <h1>Welcome to our app</h1>;
}
// Renders "Bienvenido a nuestra aplicación" in Spanish

Fonctionnement

Le compilateur détecte automatiquement le texte traduisible dans votre JSX, génère des traductions optimisées par IA et les injecte au moment de la compilation. Votre code source reste inchangé : les traductions s'effectuent de manière transparente pendant le processus de compilation.

Principe clé : les traductions sont déterminées au moment de la compilation, créant des bundles optimisés contenant uniquement les traductions dont vous avez besoin. Cela signifie des temps de chargement plus rapides, des bundles plus légers et un meilleur référencement.

En quoi c'est différent

Contrairement aux bibliothèques de traduction à l'exécution (i18next, react-intl), le compilateur Lingo.dev :

  • Fonctionne au moment de la compilation, pas à l'exécution
  • Ne nécessite aucune gestion manuelle des clés de traduction
  • Génère automatiquement les traductions à l'aide de l'IA
  • Ne crée aucune surcharge à l'exécution
  • Garde votre code React propre : pas d'appels de fonction t()

Fonctionnalités principales

  • Automatique par défaut - Aucune directive "use i18n" requise (optionnelle si vous souhaitez un comportement opt-in)
  • Aucune surcharge à l'exécution - Les traductions sont pré-compilées dans votre build
  • Modes de compilation - Utilisez le pseudotraducteur en développement, les vraies traductions en CI, le mode cache uniquement en production
  • Type-safe - Support complet de TypeScript avec génération automatique des types
  • Remplacements manuels - Utilisez l'attribut data-lingo-override pour un contrôle précis sur des traductions spécifiques
  • Résolveurs de locale personnalisés - Implémentez votre propre logique de détection et de persistance de locale
  • Pluralisation automatique - Support du format ICU MessageFormat pour les formes plurielles
  • Widget de développement - Éditeur de traduction dans le navigateur pour l'édition en temps réel

Frameworks pris en charge

  • Next.js (App Router avec React Server Components)
  • Vite + React (SPA et SSR)

D'autres frameworks arrivent bientôt.

Questions fréquentes

Ai-je besoin de clés API en production ? Non. Utilisez buildMode: "cache-only" en production — les traductions sont pré-générées dans la CI, aucun appel API n'est nécessaire.

Puis-je contrôler quels fichiers sont traduits ? Oui. Définissez useDirective: true pour exiger la directive 'use i18n' en haut des fichiers que vous souhaitez traduire. Par défaut, c'est automatique (tous les fichiers).

Que faire si la traduction IA est incorrecte ? Utilisez l'attribut data-lingo-override pour spécifier des traductions exactes pour des locales spécifiques. Fonctionne avec n'importe quel élément JSX.

Comment tester sans appels API ? Activez usePseudotranslator: true en développement — cela génère des traductions factices instantanément afin que vous puissiez voir ce qui est traduit sans coûts API.

Prochaines étapes