next-intl

Überblick

Dieses Tutorial zeigt Ihnen, wie Sie die Übersetzungsdateien Ihres Projekts in next-intl automatisch verwalten können.

Wir werden diese 4 Schritte befolgen:

Schritt 1: Fügen Sie Ihre Umgebungsvariablen hinzu

Fügen Sie Ihren Produktions-API-Schlüssel und Ihre Projekt-ID zu Ihren Umgebungsvariablen hinzu. Dies ist notwendig, um das gtx-cli-Tool zu verwenden. Sie erhalten diese aus dem General Translation Dashboard.

GT_API_KEY=<your-api-key>
GT_PROJECT_ID=<your-project-id>

Schritt 2: Installieren Sie gtx-cli

Installieren Sie das gtx-cli-Tool in Ihrem Projekt.

npm i --save-dev gtx-cli

Schritt 3: Erstelle eine gt.config.json Datei

Erstelle eine gt.config.json Datei im Hauptverzeichnis deines Projekts.

{
  "defaultLocale": "en",
  "locales": ["zh", "es", "ja"],
  "files": {
    "json": {
      "include": ["i18n/[locale]/*.json"]
    },
  },
}

Du kannst die gt.config.json Datei nach Bedarf anpassen. Weitere Informationen findest du in der Konfigurationsdokumentation.

Aktualisiere das json Dateiformat so, dass der include Pfad deiner Projektstruktur entspricht.

Schritt 4: Fügen Sie den Befehl gtx-cli translate zu Ihrem Build-Prozess hinzu

Fügen Sie den Befehl gtx-cli translate zu Ihrem Build- oder CI-Prozess vor dem Build-Befehl hinzu, um automatisch Übersetzungen zu Ihrem Projekt hinzuzufügen.

{
  "scripts": {
    "translate": "npx gtx-cli translate",
    "build": "npm run translate && <your build command>"
  }
}

Dies generiert Übersetzungen für alle Ihre Locales und speichert sie in Ihrem Projekt. Wenn Sie diese Dateien in Ihr Repository übernehmen möchten, können Sie diesen Befehl stattdessen vor dem Commit ausführen.

Sie sind fertig! Jetzt wird Ihr Projekt automatisch alle Ihre Übersetzungs-JSON-Dateien aktualisieren, wenn sich Ihr Projekt ändert.

Hinweise

• Sie können Übersetzungen automatisch zu Ihrem Projekt hinzufügen mit dem Befehl gtx-cli translate.
• Wenn Sie Ihre Übersetzungsdateien committen möchten, können Sie stattdessen den Befehl gtx-cli translate vor dem Commit ausführen.
• Um den Ausgabepfad für Ihre Übersetzungen zu konfigurieren, siehe die Konfigurationsdokumentation.

Nächste Schritte

• Sehen Sie sich die Nutzungsanleitung für das CLI-Tool an.
• Wenn Sie Live-Übersetzungen in der Entwicklung sehen möchten (wie Hot Reload), schauen Sie sich die <T> Komponente an.