"use i18n";

Die "use i18n"-Direktive ermöglicht die dateiweise Lokalisierung von React-Komponenten ohne Refactoring Ihres bestehenden Codes. Ähnlich 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.

Funktionsweise

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 funktioniert 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: {
    "*:*": "groq:mistral-saba-24b",
  }
}

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

Grundlegende Verwendung

Fügen Sie die Direktive am Anfang einer beliebigen React-Komponenten-Datei 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>
  );
}

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

Funktioniert mit bestehenden Direktiven

Die Direktive "use i18n" 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>Klickzähler</h1>
      <p>Sie haben {count} Mal geklickt</p>
      <button onClick={() => setCount(count + 1)}>Klicken Sie hier!</button>
    </div>
  );
}

"use server";
"use i18n";

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

  return (
    <div>
      <h1>Server-gerenderte Inhalte</h1>
      <p>Dieser Inhalt wird auf dem Server gerendert und zur Build-Zeit lokalisiert</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 die Ü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>Ihre Änderungen wurden erfolgreich gespeichert!</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