Next.js Schnellstart

Überblick

Diese Anleitung beschreibt, wie man ein bestehendes Next.js-Projekt internationalisiert, das den App Router verwendet.

Für ein Projekt, das den Pages Router verwendet, folgen Sie der React-Dokumentation.

Wir werden 3 einfache Schritte behandeln:

Setup

1. Ausführen des Setup-Assistenten

Der Setup-Assistent führt Sie durch den Prozess der Internationalisierung Ihres Projekts.

npx gtx-cli@latest init

Um Ihr Projekt manuell einzurichten, folgen Sie der Anleitung zur manuellen Einrichtung.

Der Setup-Assistent wird:

1. Die erforderlichen Bibliotheken installieren.
2. Die unterstützten Sprachen Ihres Projekts konfigurieren.
3. Ihre JSX-Komponenten mit der <T>-Komponente umschließen.
4. withGTConfig() zu Ihrer next.config.js-Datei hinzufügen.
5. Einen Produktions-API-Schlüssel und eine Projekt-ID für Ihr Projekt generieren.

Weitere Informationen finden Sie in der Dokumentation des Setup-Assistenten.

2. Hinzufügen von Umgebungsvariablen

Der Setup-Assistent erstellt für Sie eine .env.local-Datei im Stammverzeichnis Ihres Projekts, die Ihren Produktions-API-Schlüssel und Ihre Projekt-ID enthält.

Um gt-next im Entwicklungsmodus zu verwenden, müssen Sie jedoch einen Entwicklungs-API-Schlüssel anstelle eines Produktionsschlüssels hinzufügen.

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

3. Bereinigen von Zeichenketten

Der Setup-Assistent umschließt alle JSX-Komponenten Ihres Projekts mit der <T>-Komponente. Sie werden jedoch feststellen, dass Zeichenketten davon nicht betroffen sind.

Wenn Sie beispielsweise eine String-Konstante wie diese haben:

export default function Example() {
  const greeting = "Hello, world!";
  return <p>{greeting}</p>;
}

Der Setup-Assistent wird diesen String nicht verändern.

Um dies zu beheben, können Sie den useGT()-Hook und die getGT()-Funktion verwenden, um den String zu übersetzen.

import { useGT } from "gt-next/client";
export default function Example() {
  const t = useGT();
  return <p>{t("Hello, world!")}</p>;
}

Probieren wir es aus!

Herzlichen Glückwunsch! 🥳 Deine App ist jetzt mehrsprachig! Schauen wir uns das in Aktion an.

Sieh dir deine App in einer anderen Sprache an

npm run dev 

Fehlerbehebung

Bereitstellung in der Produktionsumgebung

Folgen Sie unserer Anleitung zur Bereitstellung in der Produktionsumgebung.

Nächste Schritte

• Sieh dir unsere Next.js API-Referenz für detaillierte Informationen über die <T>-Komponente und andere verfügbare Komponenten an.
• Verbessere deinen Inhalt mit den Komponenten <Num>, <Currency>, <Branch> und <Plural>.
• Erfahre, wie du die SEO mit i18n-Routing (Hinzufügen von Routen für jede Sprache, z. B. example.com/en, example.com/fr) und statischer Seitengenerierung verbessern kannst.
• Spiegle deine App, um Rechts-nach-Links-Sprachen wie Arabisch und Hebräisch zu unterstützen.

Manuelle Einrichtung

Wenn Sie die Einrichtung lieber manuell durchführen möchten, folgen Sie den Schritten unten.

1. Bibliotheken installieren

Installieren Sie die Bibliotheken gt-next und gtx-cli.

npm i gt-next
npm i gtx-cli --save-dev

2. Das withGTConfig() Plugin hinzufügen

Fügen Sie withGTConfig() zu Ihrer next.config.js Datei hinzu. Sie können die Sprachen, die Sie unterstützen möchten, angeben, indem Sie ein Array von Gebietsschema-Codes übergeben.

import { withGTConfig } from 'gt-next/config';
 
const nextConfig = {};
 
export default withGTConfig(nextConfig, {
  locales: ['pt', 'es'], // Unterstützung für Portugiesisch und Spanisch
});

3. Die <T> Komponente hinzufügen

Umschließen Sie jeden verschachtelten JSX-Inhalt mit der <T> Komponente, um ihn übersetzbar zu machen. Weitere Informationen finden Sie im Leitfaden zur Verwendung von <T> Komponenten.

import { T } from "gt-next";
 
export default function Example() {
  return (
    <T>
      <p>
        Dies wird übersetzt.
      </p>
    </T>  
  );
}

Verwenden Sie die <Var> Komponente, um JSX-Inhalte zu kennzeichnen, die nicht übersetzt werden sollen.

import { T, Var } from "gt-next";
 
export default function Example() {
  return (
    <T>
      <p>
        Dies wird übersetzt. <Var>Dies wird nicht übersetzt.</Var>
      </p>
    </T>  
  );
}

Für Zeichenketten können Sie useGT() oder getGT() für die Übersetzung verwenden.

import { useGT } from "gt-next/client";
import { getGT } from "gt-next/server";
 
export default function Example() {
  const t = useGT(); // client side
  const t = await getGT(); // server side
  return (
    <p>
      {t("Dies wird übersetzt.")}
    </p>
  );
}

4. Ihre Umgebungsvariablen hinzufügen

Fügen Sie Ihren API-Schlüssel und Ihre Projekt-ID zu Ihrer lokalen Umgebung hinzu.

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"