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.

Warum werden meine sammlungsbasierten Komponenten nicht übersetzt?

Der Compiler hat derzeit eine Einschränkung bei Komponenten, die auf Adobe React-Aria/React-Stately basieren und Sammlungen als untergeordnete Elemente erwarten. Direkter Textinhalt in Sammlungselementen wird nicht automatisch lokalisiert.

Dies betrifft Komponenten wie Select, Listbox, Menu und ähnliche sammlungsbasierte Komponenten aus Bibliotheken wie HeroUI, NextUI und anderen React-Aria-Implementierungen.

Aktuelles Verhalten:

import { Select, SelectItem } from "@heroui/react";

export default function SelectExample() {
  return (
    <Select label="Select an animal">
      {/* Dieser Text wird NICHT übersetzt */}
      <SelectItem key="cat" textValue="Cat">
        Cat
      </SelectItem>
      <SelectItem key="dog" textValue="Dog">
        Dog
      </SelectItem>
    </Select>
  );
}

Workaround:

Umschließen Sie den Textinhalt mit JSX-Fragmenten, um ihn lokalisierbar zu machen:

import { Select, SelectItem } from "@heroui/react";

export default function SelectWithWorkaround() {
  return (
    <Select label="Select an animal">
      {/* Dieser Text WIRD übersetzt */}
      <SelectItem key="cat" textValue="Cat">
        <>Cat</>
      </SelectItem>
      <SelectItem key="dog" textValue="Dog">
        <>Dog</>
      </SelectItem>
    </Select>
  );
}

Diese Einschränkung betrifft jede Komponente, die das Sammlungsmuster von React-Aria verwendet, bei dem Textinhalte direkt als untergeordnete Elemente an Sammlungselemente übergeben werden. Wir arbeiten daran, die Compiler-Unterstützung für diese Fälle zu verbessern.

Welche Frameworks werden unterstützt?

Lingo.dev Compiler unterstützt derzeit diese 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 sich der Lingo.dev Compiler mit Lingo.dev Engine und mehreren anderen LLM-Providern.

Wir würden gerne bald mehr 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 App lokal bauen, 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 davon, JavaScript-Objekte zu bearbeiten? 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 behandelt der Compiler Pluralisierung?

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

// Der Compiler wird dies angemessen behandeln
<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 das 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 neue Funktionen an?

Nächste Schritte