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 4 einfache Schritte behandeln:

Der gesamte Prozess sollte weniger als 5 Minuten dauern.

Einrichtung

1. Bibliotheken installieren

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

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>  
  );
}

npx gtx-cli setup

Für Zeichenketten können Sie useGT() oder getGT() für die Übersetzung verwenden. Weitere Informationen finden Sie in diesem Leitfaden.

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"

Lass es uns ausprobieren!

Herzlichen Glückwunsch! 🥳 Deine App ist jetzt mehrsprachig! Lass uns sehen, wie sie funktioniert.

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

• Sehen Sie unsere Next.js API-Referenz für detaillierte Informationen über die <T>-Komponente und andere verfügbare Komponenten.
• Verbessern Sie Ihre Inhalte mit den Komponenten <Num>, <Currency>, <Branch> und <Plural>.
• Erfahren Sie, wie Sie SEO mit i18n-Routing verbessern können (Hinzufügen von Routen für jede Sprache, z.B. example.com/en, example.com/fr)
• Spiegeln Sie Ihre App, um Sprachen mit Rechts-nach-Links-Schreibrichtung wie Arabisch und Hebräisch zu unterstützen.
• Erstellen Sie eine Liste zugelassener Sprachen für Ihre App mit dem Next.js-Plugin.