Lingo.dev Compiler

Lingo.dev Compiler ist ein kostenloses Open-Source-Build-Time-Übersetzungssystem, das React-Anwendungen mehrsprachig macht, ohne Ihre Komponenten zu verändern.

Um den Compiler in Aktion zu sehen, schauen Sie sich diese Live-Demo an: https://x.com/MaxPrilutskiy/status/1929946504216932746

Schnellbeispiel

Vor dem Hinzufügen des Compilers:

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

Nach dem Hinzufügen des Compilers (keine Codeänderungen erforderlich):

// 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

Funktionsweise

Der Compiler erkennt automatisch übersetzbare Texte in Ihrem JSX, generiert KI-gestützte Übersetzungen und fügt diese zur Build-Zeit ein. Ihr Quellcode bleibt unverändert – Übersetzungen erfolgen transparent während des Build-Prozesses.

Grundprinzip: Übersetzungen werden zur Compile-Zeit bestimmt, wodurch optimierte Bundles erstellt werden, die nur die benötigten Übersetzungen enthalten. Das bedeutet schnellere Ladezeiten, kleinere Bundles und besseres SEO.

Unterschiede zu anderen Lösungen

Im Gegensatz zu Runtime-Übersetzungsbibliotheken (i18next, react-intl) bietet Lingo.dev Compiler:

  • Funktioniert zur Build-Zeit, nicht zur Laufzeit
  • Erfordert keine manuelle Verwaltung von Übersetzungsschlüsseln
  • Generiert Übersetzungen automatisch mithilfe von KI
  • Erzeugt keinen Runtime-Overhead
  • Hält Ihren React-Code sauber – keine t()-Funktionsaufrufe

Hauptfunktionen

  • Standardmäßig automatisch – Keine "use i18n"-Direktive erforderlich (optional, wenn Sie Opt-in-Verhalten wünschen)
  • Kein Runtime-Overhead – Übersetzungen sind in Ihren Build vorkompiliert
  • Build-Modi – Verwenden Sie Pseudotranslator in der Entwicklung, echte Übersetzungen in CI, nur Cache in der Produktion
  • Typsicher – Vollständige TypeScript-Unterstützung mit automatischer Typgenerierung
  • Manuelle Überschreibungen – Verwenden Sie das data-lingo-override-Attribut für präzise Kontrolle über spezifische Übersetzungen
  • Benutzerdefinierte Locale-Resolver – Implementieren Sie Ihre eigene Logik zur Locale-Erkennung und -Persistierung
  • Automatische Pluralisierung – ICU-MessageFormat-Unterstützung für Pluralformen
  • Entwicklungs-Widget – In-Browser-Übersetzungseditor für Echtzeit-Bearbeitung

Unterstützte Frameworks

  • Next.js (App Router mit React Server Components)
  • Vite + React (SPA und SSR)

Weitere Frameworks folgen in Kürze.

Häufige Fragen

Benötige ich API-Schlüssel in der Produktion? Nein. Verwenden Sie buildMode: "cache-only" in der Produktion – Übersetzungen werden in der CI vorab generiert, es sind keine API-Aufrufe erforderlich.

Kann ich steuern, welche Dateien übersetzt werden? Ja. Setzen Sie useDirective: true, um die 'use i18n'-Direktive am Anfang der Dateien zu erfordern, die Sie übersetzen möchten. Standardmäßig erfolgt die Übersetzung automatisch (alle Dateien).

Was ist, wenn die KI-Übersetzung falsch ist? Verwenden Sie das data-lingo-override-Attribut, um exakte Übersetzungen für bestimmte Locales anzugeben. Funktioniert mit jedem JSX-Element.

Wie kann ich ohne API-Aufrufe testen? Aktivieren Sie usePseudotranslator: true in der Entwicklung – es generiert sofort Fake-Übersetzungen, sodass Sie sehen können, was übersetzt wird, ohne API-Kosten zu verursachen.

Nächste Schritte