"use i18n";

Die "use i18n" Direktive ermöglicht die dateiweise Lokalisierung von React-Komponenten ohne Refactoring Ihres bestehenden Codes. Genau wie bei "use client" oder "use server" fügen Sie sie einfach am Anfang Ihrer Datei hinzu, um automatisch alle übersetzbaren Inhalte in dieser Komponente zu lokalisieren.

Dieser Ansatz ist perfekt, um schrittweise mehrsprachige Unterstützung zu großen Codebasen mit minimalem Risiko und maximaler Flexibilität hinzuzufügen.

Wie es funktioniert

Wenn Sie "use i18n" am Anfang einer React-Datei hinzufügen, führt der Lingo.dev Compiler automatisch folgende Schritte durch:

  1. Scannt die gesamte Datei nach übersetzbaren Inhalten
  2. Extrahiert JSX-Text und übersetzbare Attribute
  3. Generiert Übersetzungen mit Ihrem konfigurierten KI-Modell
  4. Injiziert lokalisierte Versionen zur Build-Zeit
  5. Erhält Hot Module Replacement für nahtlose Entwicklung

Die Direktive arbeitet auf Dateiebene und verarbeitet alles innerhalb der Grenzen dieser Komponente, während der Rest Ihrer Anwendung unverändert bleibt.

Aktivieren der Direktive

Um die "use i18n" Direktive zu verwenden, aktivieren Sie sie in Ihrer Compiler-Konfiguration:

{
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  useDirective: true, // Aktiviert die "use i18n" Direktive
  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
  // },
}

Hinweis: Wenn useDirective auf false gesetzt ist (Standardeinstellung), verarbeitet der Lingo.dev Compiler alle Dateien so, als hätten sie "use i18n" am Anfang. Das Setzen von useDirective: true gibt Ihnen granulare Kontrolle, um Dateien einzeln zu lokalisieren.

Modell-Konfiguration: Sie können entweder die Lingo.dev Engine mit vereinfachter Syntax (models: "lingo.dev") oder Modelle von alternativen LLM-Anbietern mit spezifischem Modell-Mapping (z.B. models: { "*:*": "groq:qwen/qwen3-32b" }, siehe oben) verwenden. Die Engine wählt automatisch optimale Modelle für jedes Sprachpaar aus.

Grundlegende Verwendung

Fügen Sie die Direktive am Anfang jeder React-Komponentendatei hinzu:

"use i18n";

import React from "react";

export function WelcomeCard() {
  return (
    <div className="card">
      <h2>Welcome to our app!</h2>
      <p>
        Get started by exploring our features and discovering what makes our
        platform special.
      </p>
      <button>Get Started</button>
    </div>
  );
}

Hinweis: Fügen Sie "use i18n" am Anfang der Datei hinzu, die <LingoProvider> rendert.

Das war's! Die Komponente wird jetzt automatisch in der vom Benutzer ausgewählten Sprache gerendert, ohne dass Codeänderungen erforderlich sind.

Funktioniert mit vorhandenen Direktiven

Die "use i18n"-Direktive arbeitet natürlich mit anderen React-Direktiven zusammen, die Sie möglicherweise bereits verwenden:

"use client";
"use i18n";

export function InteractiveComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Click Counter</h1>
      <p>You've clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me!</button>
    </div>
  );
}

"use server";
"use i18n";

export async function ServerComponent() {
  const data = await fetchData();

  return (
    <div>
      <h1>Server-rendered Content</h1>
      <p>This content is rendered on the server and localized at build time</p>
    </div>
  );
}

Der Compiler verarbeitet alle Direktiven intelligent zusammen und behält das beabsichtigte Verhalten Ihrer Komponenten bei, während die Lokalisierung hinzugefügt wird.

Entwicklungs-Workflow

1. Schrittweise Migration

Beginnen Sie damit, die Direktive zu einzelnen Komponenten hinzuzufügen:

// Vorher: Nur englischsprachige Komponente
export function Header() {
  return <h1>My Application</h1>;
}

// Nachher: Mehrsprachige Komponente mit einer Zeile
("use i18n");

export function Header() {
  return <h1>My Application</h1>;
}

2. Hot Module Replacement

Die Direktive funktioniert nahtlos mit HMR. Wenn Sie Text in einer Komponente mit "use i18n" ändern, werden Übersetzungen sofort in Ihrem Browser aktualisiert:

"use i18n";

export function StatusMessage() {
  return (
    <div>
      {/* Ändern Sie diesen Text und sehen Sie, wie er sofort in allen Sprachen aktualisiert wird */}
      <p>Your changes have been saved successfully!</p>
    </div>
  );
}

3. Datei-für-Datei-Ansatz

Perfekt für große Codebasen, bei denen Sie schrittweise lokalisieren möchten:

src/
├── components/
│   ├── Header.tsx          // ✅ "use i18n" - lokalisiert
│   ├── Navigation.tsx      // ✅ "use i18n" - lokalisiert
│   ├── ProductCard.tsx     // ✅ "use i18n" - lokalisiert
│   ├── Footer.tsx          // ⏳ Noch nicht lokalisiert
│   └── Sidebar.tsx         // ⏳ Noch nicht lokalisiert

Vorteile

Die "use i18n"-Direktive macht die Lokalisierung so einfach wie das Hinzufügen einer einzigen Zeile zu Ihren React-Komponenten und ist für ausgereifte Projekte konzipiert, die eine schrittweise Lokalisierung erfordern.

Nächste Schritte