FAQ

Häufige Fragen und Antworten zum Lingo.dev Compiler.

Kann ich String-Literale übersetzen?

Der Lingo.dev Compiler folgt der Konvention, dass alles in JSX lokalisierbar ist. String-Literale außerhalb von JSX-Komponenten werden absichtlich nicht lokalisiert.

Aktuelles Verhalten:

// Dies wird NICHT übersetzt
const message = "Hello world";
const errorText = "Something went wrong";

// Dies WIRD übersetzt
function Component() {
  return <h1>Hello world</h1>;
}

String-Literale lokalisierbar machen:

Sie können String-Literale lokalisierbar machen, indem Sie sie in JSX-Fragmente einschließen:

// Vorher: Nicht lokalisierbar
const message = "Hello world";

// Nachher: Lokalisierbar durch Verwendung von Fragmenten
const message = <>Hello world</>;

// Verwendung in Ihrer Komponente
function Component() {
  return <div>{message}</div>;
}

Alternativer Ansatz:

// Für dynamische Nachrichten
function getLocalizedMessage() {
  return <>Something went wrong</>;
}

// Für bedingten Text
const statusText = isError ? <>Error occurred</> : <>Success</>;

Diese Konvention gewährleistet ein konsistentes Lokalisierungsverhalten bei gleichzeitiger Beibehaltung klarer Grenzen zwischen lokalisierbaren und nicht-lokalisierbaren Inhalten.

Wir untersuchen Möglichkeiten, dieses Verhalten zu erweitern, um weitere Anwendungsfälle zu unterstützen. Treten Sie unserem Discord bei, um spezifische Muster zu diskutieren, die Sie unterstützt sehen möchten.

Welche Frameworks werden unterstützt?

Der Lingo.dev Compiler unterstützt derzeit folgende React-Frameworks:

  • Next.js (nur App Router)
  • React Router v6+
  • Remix (neueste Version)
  • Vite + React

Wir begrüßen Mitwirkende, die an der Implementierung der Compiler-Unterstützung für andere Plattformen interessiert sind. Treten Sie unserem Discord bei, um Implementierungsstrategien zu diskutieren.

Kann ich weitere Sprachen hinzufügen?

Ja! Sie können die Sprachunterstützung erweitern, indem Sie benutzerdefinierte Modelle direkt in Ihrer Compiler-Konfiguration konfigurieren:

const compilerConfig = {
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de", "pt", "it"],
  models: {
    "*:pt": "mistral-saba-24b",
    "en:it": "meta-llama/llama-4-maverick-17b-128e-instruct",
    "*:*": "mistral-saba-24b",
  },
};

lingoCompiler.next(compilerConfig)(nextConfig);

Siehe erweiterte Konfiguration für Details.

Kann ich benutzerdefinierte Prompts verwenden?

Ja! Sie können Übersetzungsprompts direkt in Ihrer Compiler-Konfiguration anpassen:

const compilerConfig = {
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  prompt:
    "You are a professional translator specializing in technical documentation. Translate from {SOURCE_LOCALE} to {TARGET_LOCALE} while maintaining technical accuracy.",
};

Für benutzerdefinierte Glossare fügen Sie Terminologiedefinitionen in Ihrem Prompt ein. Orientieren Sie sich an unserem Standard-Prompt für Best Practices.

Kann ich weitere LLM-Provider nutzen?

Derzeit integriert der Lingo.dev Compiler GROQ, aber wir würden gerne bald weitere LLM-Provider unterstützen (sprechen Sie mit uns oder senden Sie uns einen Pull Request!).

Benötige ich einen GROQ API-Schlüssel in CI/CD?

In der Regel nicht. Wenn Sie Ihre Anwendung lokal erstellen, werden alle Übersetzungen im Verzeichnis lingo/ gespeichert. Ihr CI/CD-Build muss keine LLM aufrufen, um Strings zu übersetzen.

Alternativ können Sie die Variable GROQ_API_KEY zu Ihrem CI/CD hinzufügen und alle Übersetzungen dort beim Build durchführen, aber wir empfehlen diesen Ansatz nicht, um mehr Kontrolle über die endgültigen Übersetzungen zu behalten.

Kann ich Übersetzungen bearbeiten?

Ja! Sie können die Datei lingo/dictionary.js manuell bearbeiten. Sie exportiert ein Objekt mit Übersetzungen für alle Dateien und Einträge. Sie können den Text für jede Sprache in der content-Eigenschaft bearbeiten. Ihre Änderungen bleiben erhalten, bis der Quelltext in den React-Komponenten aktualisiert wird.

Kein Fan vom Bearbeiten von JavaScript-Objekten? Wir veröffentlichen bald einen Editor, um die Bearbeitungserfahrung zu verbessern. Lassen Sie uns wissen, wenn Sie interessiert sind!

Wie kann ich meine gesamte App, bestimmte Dateien oder Sprachen neu übersetzen?

Um Ihre gesamte App neu zu übersetzen, löschen Sie die Datei dictionary.js aus dem Verzeichnis lingo/.

Um nur bestimmte Dateien neu zu übersetzen, können Sie deren Schlüssel (Dateiname) aus dictionary.js löschen.

Wenn Sie eine bestimmte Sprache neu übersetzen möchten, müssen Sie alle Einträge für diese Sprache löschen.

Warum muss ich die App lokal bauen?

Lokale Builds normalisieren Ihre lingo/ Übersetzungsdateien durch:

  • Entfernen ungenutzter Übersetzungsschlüssel
  • Aktualisierung von Content-Fingerprints
  • Sicherstellung einer konsistenten Dateiformatierung
  • Optimierung für den Produktionseinsatz

Führen Sie immer npm run build aus, bevor Sie Änderungen committen, um saubere Übersetzungsdateien zu gewährleisten.

Es fehlen Übersetzungen!

Wenn Übersetzungen fehlen:

  1. Lokal bauen, um Ihre lingo/ Dateien zu normalisieren:

    npm run build

  2. Überprüfen Sie Ihren API-Schlüssel auf korrekte Einstellung:

    # Überprüfen Sie, ob Ihre .env-Datei enthält
GROQ_API_KEY=gsk_...

  3. Committen Sie die aktualisierten Dateien:

    git add lingo/
git commit -m "Update translations"

  4. Starten Sie Ihren Entwicklungsserver nach den Änderungen neu.

Kann ich ein benutzerdefiniertes Glossar einrichten?

Ja! Verwenden Sie benutzerdefinierte Prompts, um Terminologie und Glossare direkt in Ihrer Compiler-Konfiguration zu definieren:

const compilerConfig = {
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  prompt:
    "You are a professional translator. Use these terms consistently: 'Dashboard' should be 'Tableau de bord' in French, 'Settings' should be 'Configuración' in Spanish. Translate from {SOURCE_LOCALE} to {TARGET_LOCALE}.",
};

Wie überspringe ich bestimmte Inhalte bei der Übersetzung?

Verwenden Sie das Attribut data-lingo-skip:

<div data-lingo-skip>This content will not be translated</div>

Für bedingtes Überspringen basierend auf dem Inhaltstyp:

<code data-lingo-skip>
  // Code blocks are automatically skipped const apiKey = "secret-key";
</code>

Kann ich bestimmte Übersetzungen überschreiben?

Ja! Verwenden Sie data-lingo-override- Attribute für sprachspezifische Überschreibungen:

<button data-lingo-override-es="¡Hola!" data-lingo-override-fr="Bonjour!">
  Hello
</button>

Dies ist nützlich für:

  • Markennamen, die nicht übersetzt werden sollten
  • Regionsspezifische Terminologie
  • Marketingtexte, die manuelle Überprüfung benötigen

Wie behandelt der Compiler die Pluralisierung?

Der Compiler verarbeitet automatisch grundlegende Pluralisierungsmuster, aber für komplexe Pluralregeln müssen Sie möglicherweise Ihren JSX entsprechend strukturieren:

// Der Compiler wird dies angemessen verarbeiten
<p>{count === 1 ? "1 item" : `${count} items`}</p>

Was ist mit der Performance in der Produktion?

Lingo.dev Compiler ist für die Produktion optimiert:

  • Keine Laufzeitkosten - Übersetzungen werden vorkompiliert
  • Bundle-Splitting - nur die aktive Locale wird geladen
  • Tree Shaking - ungenutzte Übersetzungen werden entfernt
  • CDN-freundlich - statische Übersetzungsdateien werden effizient gecacht

Kann ich dies mit TypeScript verwenden?

Ja! Der Compiler funktioniert nahtlos mit TypeScript-Projekten. Alle bereitgestellten React-Komponenten sind vollständig typisiert:

import { LocaleSwitcher } from "lingo.dev/react/client";

// Vollständige TypeScript-Unterstützung
const locales: string[] = ["en", "es", "fr"];
<LocaleSwitcher locales={locales} />;

Wie melde ich Bugs oder fordere Features an?

Nächste Schritte