Next.js Schnellstart

Übersicht

Dieser Leitfaden beschreibt, wie Sie ein bestehendes Next.js Projekt, das den App Router verwendet, internationalisieren.

Für ein Projekt mit dem Pages Router folgen Sie bitte der React-Dokumentation.

Wir behandeln 3 einfache Schritte:

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 sie uns in Aktion an.

Sieh dir deine App in einer anderen Sprache an

npm run dev 

Fehlerbehebung

Bereitstellung in der Produktion

Folgen Sie unserer Anleitung zum Bereitstellen in der Produktion.

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.
• Spiegele deine App, um Rechts-nach-Links-Sprachen wie Arabisch und Hebräisch zu unterstützen.

Manuelle Einrichtung

Wenn du die Einrichtung lieber manuell durchführen möchtest, folge den untenstehenden Schritten.

1. Bibliotheken installieren

Installiere die Bibliotheken gt-next und gtx-cli.

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

2. Füge das withGTConfig() Plugin hinzu

Füge withGTConfig() zu deiner next.config.js Datei hinzu. Du kannst die Sprachen, die du unterstützen möchtest, angeben, indem du ein Array von Sprachcodes übergibst.

import { withGTConfig } from 'gt-next/config';
 
const nextConfig = {};
 
export default withGTConfig(nextConfig, {
  locales: ['pt', 'es'], // Support for Portuguese and Spanish
});

3. Füge die <T> Komponente hinzu

Umschließe beliebigen verschachtelten JSX-Inhalt mit der <T> Komponente, um ihn übersetzbar zu machen. Weitere Informationen findest du im Leitfaden zur Verwendung von <T> Komponenten.

import { T } from "gt-next";
 
export default function Example() {
  return (
    <T>
      <p>
        This gets translated.
      </p>
    </T>  
  );
}

Verwende die <Var> Komponente, um JSX-Inhalt zu kennzeichnen, der nicht übersetzt werden soll.

import { T, Var } from "gt-next";
 
export default function Example() {
  return (
    <T>
      <p>
        This gets translated. <Var>This does not.</Var>
      </p>
    </T>  
  );
}

Für Zeichenketten kannst du 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("This gets translated.")}
    </p>
  );
}

4. Füge deine Umgebungsvariablen hinzu

Füge deinen API-Schlüssel und die Project ID zu deiner lokalen Umgebung hinzu.

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"