Schnellstart mit React

Installiere die CLILink zu diesem Abschnitt kopieren

npm install --save-dev @verbatra/cli

verbatra ist ein Entwicklungswerkzeug und landet nie in deiner App. Die Befehle unten nutzen npx; mit pnpm, yarn oder bun nimmst du stattdessen pnpm verbatra, yarn verbatra oder bun run verbatra.

Lege eine Quell-Locale-Datei anLink zu diesem Abschnitt kopieren

Gibt es locales/en.json schon, überspringst du diesen Schritt. Sonst legst du die Datei mit zwei Texten an, einer davon mit Platzhalter:

{
  "greeting": "Hello, {{name}}!",
  "cart": {
    "empty": "Your cart is empty."
  }
}

Erzeuge eine KonfigurationLink zu diesem Abschnitt kopieren

npx @verbatra/cli init --format i18next-json --provider gemini --yes

--format i18next-json ist das Dateiformat von react-i18next. init findet deine Locale-Dateien oder schreibt das Muster locales/{locale}.json, wenn es noch keine gibt. --yes übernimmt, was init erkannt hat, statt nachzufragen. Die neue verbatra.config.ts übersetzt von en nach de; für weitere Sprachen ergänzt du Codes in targetLocales.

Sieh dir den Lauf ohne Schlüssel anLink zu diesem Abschnitt kopieren

npx @verbatra/cli translate --dry-run

verbatra: dry run over 1 locale, no provider call
verbatra: de done, 2 would translate
verbatra translate (dry run)
  de: 2 would translate, 0 unchanged
1 succeeded, 0 partial, 0 failed (dry run: nothing written)
[ok] dry run done in 0.0s, nothing written
next: verbatra translate (run it for real)

Ein Probelauf baut keinen Provider, braucht also keinen Schlüssel, kostet nichts und schreibt nichts.

ÜbersetzeLink zu diesem Abschnitt kopieren

cp .env.example .env

Öffne .env und füge deinen Schlüssel hinter GEMINI_API_KEY= ein. Noch kein Schlüssel? Gemini hat eine kostenlose Stufe: Erstelle einen im Google AI Studio. Alle anderen Provider und ihre Variablen stehen unter Provider.

npx @verbatra/cli translate

verbatra schickt die zwei Texte an Gemini, prüft, dass jeder Platzhalter erhalten bleibt, und schreibt locales/de.json. Der Wortlaut hängt vom Modell ab, zum Beispiel:

{
  "greeting": "Hallo, {{name}}!",
  "cart": {
    "empty": "Dein Warenkorb ist leer."
  }
}

Prüfe, ob jede Locale synchron istLink zu diesem Abschnitt kopieren

npx @verbatra/cli check

[ok] checking the locales (0.0s)
verbatra check
  de: 0 missing, 0 stale, 2 up-to-date (in sync)
all locales in sync

check ruft keinen Provider auf und endet mit 1, sobald eine Locale nicht mehr synchron ist, und kann so einen Pull Request absichern.

Lade die Locales in deiner AppLink zu diesem Abschnitt kopieren

Füge react-i18next hinzu:

npm install i18next react-i18next

Dann lädst du beide Dateien und zeigst die Begrüßung an:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import de from "../locales/de.json";
import en from "../locales/en.json";

i18n.use(initReactI18next).init({
  lng: "de",
  fallbackLng: "en",
  resources: { en: { translation: en }, de: { translation: de } },
});

import { useTranslation } from "react-i18next";

export function Greeting() {
  const { t } = useTranslation();
  return <p>{t("greeting", { name: "Ada" })}</p>;
}

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Greeting } from "./Greeting";
import "./i18n";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Greeting />
  </StrictMode>,
);

Starte deine App: Die Begrüßung lautet Hallo, Ada!.