Einrichtung

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@latest login

Dadurch öffnet sich dein Browser zur Authentifizierung. Der kostenlose Hobby-Tarif reicht für die meisten Projekte aus.

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

War diese Seite hilfreich?

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@latest login

Dadurch öffnet sich dein Browser zur Authentifizierung. Der kostenlose Hobby-Tarif reicht für die meisten Projekte aus.

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

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