Funktionsweise

Der Lingo.dev Compiler automatisiert die Lokalisierung von React-Anwendungen zur Build-Zeit durch intelligente Codeanalyse und KI-gestützte Übersetzung.

Während des Build-Prozesses führt der Compiler folgende Schritte durch, um Ihre Anwendung mehrsprachig zu machen, ohne den Quellcode zu verändern:

1. AST-Analyse

Lingo.dev Compiler verarbeitet den Abstract Syntax Tree (AST) Ihres React-Codes, um übersetzbare Inhalte deterministisch zu identifizieren. Er analysiert:

  • JSX-Textinhalte und -Attribute
  • String-Literale innerhalb von React-Komponenten (Unterstützung für String-Literale kommt in Kürze.)
  • Dynamische Inhaltsmuster

Der Compiler versteht die Grenzen der React-Komponenten und behält kontextuelle Informationen für präzise Übersetzungen bei.

2. Inhaltsextraktion

Der Compiler extrahiert übersetzbare Strings unter Beibehaltung von:

  • Komponentenhierarchie und Kontext
  • React-spezifischen Mustern wie Props und State
  • Codestruktur und Formatierung

Nur für Menschen lesbare Inhalte werden extrahiert. Technische Bezeichner, Code-Snippets und nicht übersetzbare Elemente werden automatisch herausgefiltert.

3. Fingerprinting & Versionierung

Content-Fingerprinting gewährleistet ein effizientes Übersetzungsmanagement:

  • MD5-Hashing erstellt eindeutige Content-Fingerprints
  • Versionierte Wörterbücher verfolgen Änderungen im lingo/-Verzeichnis
  • Git-Integration erhält den Übersetzungsverlauf
  • Delta-Verarbeitung übersetzt nur neue oder modifizierte Inhalte

Dieser Ansatz minimiert Übersetzungskosten und erhält die Konsistenz über verschiedene Builds hinweg.

4. KI-Übersetzung

Die Übersetzung erfolgt durch KI-Modelle mit kontextuellem Verständnis:

  • KI-Modell-Integration bietet schnelle, hochwertige Übersetzungen durch Lingo.dev Engine oder einen der unterstützten LLM-Provider
  • Kontextuelle Grenzen helfen der KI, Komponentenbeziehungen zu verstehen
  • Konsistente Terminologie in Ihrer gesamten Anwendung
  • Batch-Verarbeitung für optimale Performance

Der Compiler sendet kontextuelle Informationen, um sicherzustellen, dass Übersetzungen natürlich in Ihre UI-Komponenten passen.

5. Code-Injektion

Übersetzungen werden in Ihren Build injiziert, ohne Quelldateien zu modifizieren:

  • Build-Zeit-Verarbeitung erstellt lokalisierte Versionen
  • Framework-Integration funktioniert mit Next.js, Vite und React Router
  • Optimierte Bundles mit Laden von sprachspezifischen Wörterbüchern
  • Laufzeiteffizienz durch vorkompilierte Übersetzungen

Das Ergebnis sind produktionsreife, mehrsprachige React-Anwendungen mit minimalem Laufzeit-Overhead.

Framework-Integration

Next.js App Router

Der Compiler integriert sich mit Next.js über das Konfigurationssystem:

// next.config.js
export default lingoCompiler.next(config)(nextConfig);
  • Server Components werden zur Build-Zeit verarbeitet
  • Client Components erhalten optimierte Übersetzungspakete
  • Automatisches Routing unterstützt lokalisierungsbasierte URLs

React Router / Remix

Integration durch die Vite-Plugin-Architektur:

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • Server-side Rendering mit vorgeladenen Wörterbüchern
  • Client-side Hydration behält den Übersetzungsstatus bei
  • Routen-basiertes Code-Splitting beinhaltet Übersetzungspakete

Vite

Direkte Vite-Plugin-Integration:

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • Hot Module Replacement aktualisiert Übersetzungen während der Entwicklung
  • Build-Optimierung erstellt minimale Produktionspakete
  • Asset-Handling verwaltet Übersetzungsdateien effizient

Entwicklungs-Workflow

  1. React-Komponenten schreiben mit natürlichsprachlichem Text
  2. Entwicklungsserver starten - Compiler extrahiert und übersetzt Inhalte
  3. Übersetzungen überprüfen im generierten lingo/-Verzeichnis
  4. Übersetzungsdateien committen in die Versionskontrolle
  5. Deployment mit integrierter mehrsprachiger Unterstützung

Produktionsvorteile

  • Keine Laufzeitkosten - Übersetzungen werden vorkompiliert
  • Optimale Bundle-Größen - nur verwendete Übersetzungen werden eingebunden
  • SEO-freundlich - korrekte lokalisierungsspezifische Darstellung
  • Konsistente UX - professionelle Übersetzungsqualität

Der Compiler erstellt Produktionsanwendungen, die sich für jede unterstützte Sprache wie nativ entwickelt anfühlen, während der ursprüngliche Entwicklungs-Workflow beibehalten wird.

LLM-Provider

Option 1. Lingo.dev Engine

Lingo.dev Compiler kann Lingo.dev Engine als Ihre KI-Übersetzungs-Engine verwenden.

Sie bietet dynamische Modellauswahl, automatisches Routing zu verschiedenen Modellen für jedes Sprachpaar, automatische Modell-Fallbacks, Übersetzungsspeicher, der frühere Übersetzungen berücksichtigt, und Glossar-Unterstützung für die domänenspezifische Terminologie Ihres Projekts. Es gibt sowohl kostenlose als auch kostenpflichtige Optionen, wobei die kostenlose Hobby-Stufe für die meisten Projekte ausreichend sein sollte.

Zur Authentifizierung führen Sie aus:

npx lingo.dev@latest login

Konfigurieren Sie Lingo.dev Engine als Ihren Provider, z.B. für Next.js:

lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: "lingo.dev",
})(nextConfig);

Wichtiges Detail. Wenn Sie den Brave-Browser verwenden oder Ihre Browser-Erweiterungen den Authentifizierungsablauf blockieren, können Sie sich manuell authentifizieren, indem Sie eine LINGODOTDEV_API_KEY-Umgebungsvariable zu Ihrer .env-Datei hinzufügen:

LINGODOTDEV_API_KEY=...

Option 2. Alternative LLM-Provider

Der Compiler unterstützt folgende LLM-Anbieter:

Sie müssen ein Konto erstellen und einen API-Schlüssel vom gewählten LLM-Anbieter abrufen, um die Konfiguration vorzunehmen.

Hinweis: Stellen Sie sicher, dass Sie Ihr Konto beim LLM-Anbieter aktiviert und deren Nutzungsbedingungen akzeptiert haben, bevor Sie es im Compiler verwenden. Der LLM-Anbieter könnte Sie an der Nutzung ihrer Plattform hindern, bevor Sie alle Schritte abgeschlossen haben. Die Schritte können je nach LLM-Anbieter variieren.

Konfigurieren Sie den LLM-Anbieter Ihrer Wahl, z.B. um Groq in einer Next.js-App zu verwenden:

lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: {
    "*:*": "groq:mistral-saba-24b", // GROQ
    // "*:*": "google:gemini-2.0-flash", // Google AI
    // "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // OpenRouter
    // "*:*": "ollama:mistral-small3.1", // Ollama
    // "*:*": "mistral:mistral-small-latest", // Mistral
  },
})(nextConfig);

Fügen Sie Ihren API-Schlüssel für Ihren konfigurierten LLM-Anbieter zu Ihrer Umgebung hinzu:


# .env

GROQ_API_KEY=gsk_...
GOOGLE_API_KEY=...
OPENROUTER_API_KEY=...
MISTRAL_API_KEY=...

Wir würden gerne mehr LLMs unterstützen - sprechen Sie mit uns oder senden Sie uns einen Pull-Request!

Nächste Schritte