Einrichtung · Lingo.dev

Alpha

Der Lingo.dev Compiler befindet sich in der Alpha-Phase. Er ist instabil, nicht für den Produktionseinsatz empfohlen, und APIs können sich zwischen Releases ändern.

Füge deiner React-App in weniger als 5 Minuten Mehrsprachigkeit hinzu.

Voraussetzungen

Node.js 18+ und eine React-App mit Next.js (App Router) oder Vite.

Installieren#

bash

pnpm install @lingo.dev/compiler

Framework konfigurieren#

Stelle deine Konfiguration auf async um und wrappe sie mit withLingo:

// next.config.ts
import type { NextConfig } from "next";
import { withLingo } from "@lingo.dev/compiler/next";

const nextConfig: NextConfig = {};

export default async function (): Promise<NextConfig> {
  return await withLingo(nextConfig, {
    sourceRoot: "./app",
    sourceLocale: "en",
    targetLocales: ["es", "de", "fr"],
    models: "lingo.dev",
    dev: {
      usePseudotranslator: true,
    },
  });
}

LingoProvider hinzufügen#

tsx

// app/layout.tsx
import { LingoProvider } from "@lingo.dev/compiler/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <LingoProvider>
      <html>
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

Authentifizieren#

bash

npx @lingo.dev/cli login

Dadurch öffnet sich Ihr Browser zur Authentifizierung. Neue Organisationen starten im Sandbox-Tarif – ohne Grundgebühr, ideal zum Ausprobieren und Evaluieren.

Wenn die Browser-Authentifizierung blockiert ist, füge den Schlüssel manuell zu .env hinzu:

bash

LINGODOTDEV_API_KEY=your_key_here

Dev-Server starten#

bash

npm run dev

Der Compiler scannt dein JSX, erstellt Pseudoübersetzungen (sofortige Platzhalterübersetzungen, mit denen du direkt siehst, was übersetzt wird) und fügt sie in deine Komponenten ein. Die Metadaten werden in .lingo/metadata.json gespeichert – committe diese Datei in deine Versionsverwaltung.

Sprachumschalter hinzufügen (optional)#

tsx

"use client"; // For Next.js

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

export function LanguageSwitcher() {
  const { locale, setLocale } = useLingoContext();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      <option value="en">English</option>
      <option value="es">Espanol</option>
      <option value="de">Deutsch</option>
    </select>
  );
}

Echte Übersetzungen generieren#

Wenn du bereit bist, deaktiviere den Pseudotranslator:

{
  dev: {
    usePseudotranslator: false,
  }
}

Starte den Dev-Server neu. Der Compiler generiert echte KI-Übersetzungen für neuen oder geänderten Text.

Nächste Schritte#

So funktioniert's

Die Transformationspipeline zur Build-Zeit

Next.js

Next.js-spezifische Einrichtung und Funktionen

Vite + React

Vite-spezifische Einrichtung und Funktionen

Konfigurationsreferenz

Alle Konfigurationsoptionen