Schnellstart

Lingo.dev Compiler wurde entwickelt, um 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 installiert und konfiguriert haben
  2. Die automatisierte Extraktion und Injektion von Übersetzungen eingerichtet haben
  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: {
    "*:*": "groq:mistral-saba-24b",
  },
})(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: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(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: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

Schritt 3. Authentifizierung einrichten

Lingo.dev Compiler verwendet GROQ für KI-gestützte Übersetzungen. Erstellen Sie ein kostenloses Konto auf groq.com und erhalten Sie Ihren API-Schlüssel.

Fügen Sie Ihren API-Schlüssel zu Ihrer Umgebung hinzu:


# .env

GROQ_API_KEY=gsk_...

Schritt 4. Provider hinzufügen

Umschließen Sie Ihre App 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. Build und Test

Starten Sie Ihren Entwicklungsserver:

npm run dev

Der Compiler wird automatisch:

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

Ihre App 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