React Router / Remix Integration

Lingo.dev Compiler arbeitet nahtlos mit React Router und dem neuesten Remix (welches jetzt React Router v7 ist) zusammen, um Lokalisierung zur Build-Zeit bereitzustellen.

Befolgе diese Schritte, um mehrsprachige Unterstützung zu deiner React Router oder Remix Anwendung hinzuzufügen.

Oder erkunde das React Router / Remix Demo-Projekt, um den Compiler in Aktion zu erleben.

Voraussetzungen

  • React Router v6+ oder Remix
  • Vite als Build-Tool
  • React 18+
  • Node.js 18 oder höher

Schritt 1. Paket installieren

Installieren Sie das lingo.dev Paket:

npm install lingo.dev

Schritt 2. Vite konfigurieren

Importieren und konfigurieren Sie den Compiler in Ihrer vite.config.ts:

import { defineConfig } from "vite";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  // Ihre bestehende Vite-Konfiguration
};

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "app",
    targetLocales: ["es", "fr", "de"],
    models: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

Schritt 3. Authentifizierung einrichten

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

Option 1. Lingo.dev Engine

Lingo.dev Compiler kann Lingo.dev Engine als KI-Übersetzungs-Engine verwenden. Diese bietet dynamische Modellauswahl, Auto-Routing, Translation Memory und Glossar-Unterstützung. Kostenlose und kostenpflichtige Optionen sind verfügbar.

Für die Authentifizierung führen Sie aus:

npx lingo.dev@latest login

Bei Problemen mit dem Browser-Workflow können Sie manuell einen LINGODOTDEV_API_KEY zu Ihrer .env-Datei hinzufügen:


# .env

LINGODOTDEV_API_KEY=...

Den Token finden Sie in Ihren Lingo.dev Engine Projekteinstellungen.

Option 2. Alternativer LLM-Anbieter

Alternativ können Sie Modelle von unterstützten LLM-Anbietern verwenden:

Fügen Sie Ihre(n) API-Schlüssel zu Ihrer .env-Datei hinzu:


# .env

GROQ_API_KEY=gsk_...
GOOGLE_API_KEY=...
OPENROUTER_API_KEY=...

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

Schritt 4. Provider hinzufügen

Für React Router

Importieren Sie den Provider in Ihrer Root-Komponente (app/root.tsx):

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

// Für React Router mit Data Loaders
export async function loader(args: LoaderFunctionArgs) {
  return {
    lingoDictionary: await loadDictionary(args.request),
  };
}

export default function Root() {
  const { lingoDictionary } = useLoaderData<typeof loader>();

  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <body>
          <Outlet />
        </body>
      </html>
    </LingoProvider>
  );
}

Für Remix

Importieren Sie den Provider in Ihrer Root-Route (app/root.tsx):

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

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

export default function App() {
  const { lingoDictionary } = useLoaderData<typeof loader>();

  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <head>
          <Meta />
          <Links />
        </head>
        <body>
          <Outlet />
          <ScrollRestoration />
          <Scripts />
        </body>
      </html>
    </LingoProvider>
  );
}

Schritt 5. Optional: Sprachumschalter hinzufügen

Erstellen Sie eine Sprachumschalter-Komponente:

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

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

Schritt 6. Bauen und Testen

Starten Sie Ihren Entwicklungsserver:

npm run dev

Der Compiler wird automatisch:

  1. Ihre React-Komponenten nach übersetzbaren Inhalten durchsuchen
  2. Übersetzungsschlüssel extrahieren
  3. KI-gestützte Übersetzungen generieren
  4. Optimierte Übersetzungsdateien im Verzeichnis lingo/ erstellen

Besuchen Sie http://localhost:5173, um Ihre mehrsprachige Anwendung in Aktion zu sehen.

Konfigurationsoptionen

Sie können das Compiler-Verhalten anpassen:

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    sourceLocale: "en",
    targetLocales: ["es", "fr", "de", "ja"],
    lingoDir: "lingo",
    debug: false,
  })(viteConfig),
);

Server-Side Rendering

Der Compiler funktioniert sowohl mit clientseitigem als auch mit serverseitigem Rendering:

Client-Komponenten

// src/components/Welcome.tsx
export function Welcome() {
  return (
    <div>
      <h1>Welcome to our app</h1>
      <p>This content is automatically translated</p>
    </div>
  );
}

Route-Komponenten

// app/routes/about.tsx
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Learn more about our company</p>
    </div>
  );
}

Produktionsdeployment

  1. Bauen Sie Ihre Anwendung:

    npm run build

  2. Übersetzungsdateien committen:

    git add lingo/
git commit -m "Add translations"

  3. Deployment über Ihre bevorzugte Plattform

Ihre React Router- oder Remix-Anwendung wird lokalisierte Inhalte automatisch basierend auf Benutzereinstellungen oder URL-Mustern bereitstellen.

Nächste Schritte