Next.js Schnellstart

Überblick

Dieser Leitfaden beschreibt, wie ein bestehendes Next.js-Projekt, das den App Router verwendet, internationalisiert wird.

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

Wir werden 4 einfache Schritte behandeln:

Dieser gesamte Prozess sollte weniger als 5 Minuten dauern.

Einrichtung

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 angeben, die du unterstützen möchtest, indem du ein Array von Sprachcodes übergibst.

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

3. Füge die <T> Komponente hinzu

Umschließe jeglichen verschachtelten JSX-Inhalt in der <T> Komponente, um ihn übersetzbar zu machen. Für weitere Informationen, siehe den Leitfaden zur Verwendung von <T> Komponenten.

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

npx gtx-cli setup

Für Zeichenketten kannst du useGT() oder getGT() für die Übersetzung verwenden. Für weitere Informationen, siehe diesen Leitfaden.

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

4. Füge deine Umgebungsvariablen hinzu

Füge deinen API-Schlüssel und die Projekt-ID zu deiner 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

Versand in die Produktion

Folgen Sie unserem Leitfaden zum Versand in die Produktion.

Nächste Schritte

• Sehen Sie sich unsere Next.js API-Referenz für detaillierte Informationen über die <T> Komponente und andere verfügbare Komponenten an.
• Verbessern Sie Ihren Inhalt 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 von rechts nach links wie Arabisch und Hebräisch zu unterstützen.
• Erstellen Sie eine Liste genehmigter Sprachen für Ihre App mit dem Next.js-Plugin.