Schnellstart mit Next.js

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 messages/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 next-intl-json --provider gemini --yes

--format next-intl-json ist das Dateiformat von next-intl. init findet deine Locale-Dateien oder schreibt das Muster messages/{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 messages/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 next-intl hinzu:

npm install next-intl

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

import type { NextConfig } from "next";
import createNextIntlPlugin from "next-intl/plugin";

const nextConfig: NextConfig = {};

export default createNextIntlPlugin()(nextConfig);

// with a src/ folder: src/i18n/request.ts, importing ../../messages
import { getRequestConfig } from "next-intl/server";

export default getRequestConfig(async () => {
  const locale = "de";
  return {
    locale,
    messages: (await import(`../messages/${locale}.json`)).default,
  };
});

import { useTranslations } from "next-intl";

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

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