Schnellstart

npm install @lingo.dev/react

Wenn du Next.js nutzt, installiere zusätzlich @lingo.dev/react-next — es ergänzt dieselbe Runtime um router-spezifische Hilfsfunktionen.

import { LingoProvider } from "@lingo.dev/react";
import esMessages from "./locales/es.json";

export function App() {
  return (
    <LingoProvider locale="es" messages={esMessages}>
      <Page />
    </LingoProvider>
  );
}

messages ist ein Objekt, dessen Schlüssel Content-Hashes sind — genau das, was die CLI in locales/<locale>.json ausgibt. Beim ersten Durchlauf ist es leer, und das ist völlig okay: Nicht übersetzte Strings fallen auf ihren Quelltext zurück.

import { useLingo } from "@lingo.dev/react";

function Page() {
  const l = useLingo();
  return <h1>{l.text("Hello", { context: "Hero heading" })}</h1>;
}

l.text(source, { context }) ist der maßgebliche Aufruf. context ist erforderlich — so können Übersetzer Strings auseinanderhalten, die im Englischen gleich aussehen, sich in anderen Sprachen aber unterscheiden („Save“ als Verb vs. „Save“ als Substantiv).

lingo extract

Dabei wird dein Quellcode gescannt, ein stabiler Hash für "Hello" plus Kontext berechnet und in deine Datei für die Ausgangssprache geschrieben (locales/en.jsonc standardmäßig). Führe den Schritt nach jeder Änderung erneut aus — die Extraktion ist idempotent.

lingo push --backfill-missing

Die CLI lädt die Quelldatei hoch, weist die Engine an, sie in deine konfigurierten Zielsprachen zu übersetzen, und lädt das Ergebnis zurück in locales/<locale>.json. Ab dann wird bei jedem Push nur noch übertragen, was sich geändert hat.

Importiere die JSON-Datei für die Sprache, in der deine App gerade rendert (oder wähle sie dynamisch anhand des Nutzers), und übergib sie an LingoProvider. Der Hook-Aufruf aus Schritt 3 bleibt unverändert — l.text("Hello", ...) gibt jetzt den übersetzten Wert zurück, weil der Hash mit dem heruntergeladenen Eintrag übereinstimmt.