Schnellstart

Lingo.dev Compiler ist darauf ausgelegt, jede React-Anwendung zur Build-Zeit mehrsprachig zu machen, ohne dass Änderungen an bestehenden React-Komponenten erforderlich sind.

Diese Schnellstartanleitung hilft Ihnen, in weniger als 5 Minuten mehrsprachige Unterstützung zu Ihrer React-Anwendung hinzuzufügen.

Nach Abschluss dieser Anleitung werden Sie:

  1. Lingo.dev Compiler in Ihrer React-Anwendung installieren und konfigurieren
  2. Automatisierte Übersetzungsextraktion und -injektion einrichten
  3. Eine funktionierende mehrsprachige Anwendung mit optimierten Übersetzungen haben

Lassen Sie uns beginnen!

Voraussetzungen

Lingo.dev Compiler funktioniert mit modernen React-Frameworks. Stellen Sie vor dem Start sicher, dass Sie eines der unterstützten Setups haben:

  • Next.js (App Router)
  • React Router / Remix
  • Vite + React

Oder erkunden Sie unsere Demo-Apps: Next.js, React Router und Vite.

Schritt 1. Paket installieren

Installieren Sie das lingo.dev-Paket in Ihrem Projekt:

npm install lingo.dev

Schritt 2. Framework konfigurieren

Wählen Sie Ihr Framework und folgen Sie der spezifischen Einrichtung:

Next.js

Aktualisieren Sie Ihre next.config.js:

import lingoCompiler from "lingo.dev/compiler";

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: "lingo.dev", // Option 1: Lingo.dev Engine
  // models: {
  //   "*:*": "groq:qwen/qwen3-32b", // Option 2: GROQ
  //   "*:*": "google:gemini-2.0-flash", // Option 2: Google AI
  //   "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // Option 2: OpenRouter
  //   "*:*": "ollama:mistral-small3.1", // Option 2: Ollama
  //   "*:*": "mistral:mistral-small-latest", // Mistral
  // },
})(nextConfig);

React Router / Remix

Aktualisieren Sie Ihre vite.config.ts:

import lingoCompiler from "lingo.dev/compiler";

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    targetLocales: ["es", "fr", "de"],
    models: "lingo.dev", // Option 1: Lingo.dev Engine
    // models: {
    //   "*:*": "groq:qwen/qwen3-32b", // Option 2: GROQ
    //   "*:*": "google:gemini-2.0-flash", // Option 2: Google AI
    //   "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // Option 2: OpenRouter
    //   "*:*": "ollama:mistral-small3.1", // Option 2: Ollama
    // },
  })(viteConfig),
);

Vite

Aktualisieren Sie Ihre vite.config.ts:

import lingoCompiler from "lingo.dev/compiler";

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    targetLocales: ["es", "fr", "de"],
    models: "lingo.dev", // Option 1: Lingo.dev Engine
    // models: {
    //   "*:*": "groq:qwen/qwen3-32b", // Option 2: GROQ
    //   "*:*": "google:gemini-2.0-flash", // Option 2: Google AI
    //   "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // Option 2: OpenRouter
    //   "*:*": "ollama:mistral-small3.1", // Option 2: Ollama
    //   "*:*": "mistral:mistral-small-latest", // Mistral
    // },
  })(viteConfig),
);

Schritt 3. Authentifizierung einrichten

Lingo.dev Compiler sendet Ihre Inhalte zur Lokalisierung an KI-Übersetzungs-Engines, daher müssen wir uns zuerst authentifizieren.

Option 1. Lingo.dev Engine

Lingo.dev Compiler kann die Lingo.dev Engine als KI-Übersetzungsmodul 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.

Für die Authentifizierung führen Sie aus:

npx lingo.dev@latest login

Wichtiger Hinweis. 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=...

Sie finden den Token in den Projekteinstellungen der Lingo.dev Engine.

Option 2. Alternativer LLM-Provider

Alternativ können Sie Modelle von einem der unterstützten LLM-Anbieter verwenden:

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=...

Hinweis: Stellen Sie sicher, dass Sie Ihr Konto beim LLM-Anbieter aktiviert und dessen Nutzungsbedingungen akzeptiert haben, bevor Sie es im Compiler verwenden.

Schritt 4. Provider hinzufügen

Umschließen Sie Ihre Anwendung mit dem LingoProvider, um Übersetzungen zu aktivieren:

Next.js

In Ihrer layout.tsx:

import { LingoProvider, loadDictionary } from "lingo.dev/react/rsc";

export default function Layout({ children }) {
  return (
    <LingoProvider loadDictionary={(locale) => loadDictionary(locale)}>
      <html>
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

React Router / Remix

In Ihrer root.tsx:

import { LingoProvider } from "lingo.dev/react/client";
import { loadDictionary } from "lingo.dev/react/react-router";

export async function loader(args) {
  return { lingoDictionary: await loadDictionary(args.request) };
}

export default function Root() {
  const { lingoDictionary } = useLoaderData();
  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <body>
          <Outlet />
        </body>
      </html>
    </LingoProvider>
  );
}

Vite

In Ihrer main.tsx:

import { LingoProviderWrapper, loadDictionary } from "lingo.dev/react/client";

ReactDOM.createRoot(document.getElementById("root")).render(
  <LingoProviderWrapper loadDictionary={(locale) => loadDictionary(locale)}>
    <App />
  </LingoProviderWrapper>,
);

Schritt 5. Bauen und Testen

Starten Sie Ihren Entwicklungsserver:

npm run dev

Der Compiler wird automatisch:

  1. Ihre React-Komponenten nach übersetzbarem Text durchsuchen
  2. Übersetzungsschlüssel extrahieren
  3. Übersetzungen mittels KI generieren
  4. Optimierte Übersetzungsdateien im Verzeichnis lingo/ erstellen

Ihre Anwendung ist jetzt mehrsprachig! Der Compiler erstellt versionierte Wörterbücher, die Inhaltsänderungen verfolgen und nur modifizierte Inhalte neu übersetzen.

Optional: Sprachumschalter hinzufügen

Fügen Sie einen Sprachumschalter hinzu, damit Benutzer die Sprache wechseln können:

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

export function Header() {
  return (
    <header>
      <LocaleSwitcher locales={["en", "es", "fr", "de"]} />
    </header>
  );
}

Nächste Schritte