Speedrun Next.js

Lass uns im Schnelldurchlauf eine neue App erstellen und sie mit GT internationalisieren.

Übersicht

In diesem Leitfaden gehen wir auf zwei Dinge ein:

Erstellen einer neuen Next.js-App
Internationalisierung mit General Translation

Insgesamt sollte dies weniger als 10 Minuten dauern.

Voraussetzungen

Wir gehen davon aus, dass Sie entweder bereits Erfahrung mit React in irgendeiner Form haben und mit Typescript vertraut sind.

Schritt 1: Erstelle eine neue Next.js-App

Navigiere zunächst im Terminal in das Verzeichnis deiner Wahl und führe den folgenden Befehl aus:

npx create-next-app next-quickstart --ts --tailwind --eslint --app --use-npm --src-dir

Ein Einrichtungsassistent wird angezeigt, bei dem du einfach für jede Option den Standardwert auswählen kannst.

Schritt 2: Installieren Sie die Bibliotheken

Navigieren Sie zum Stammverzeichnis Ihres Next.js-Projekts und führen Sie Folgendes aus:

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

Schritt 3: Fügen Sie Ihre Umgebungsvariablen hinzu.

Navigieren Sie zum Dashboard. Gehen Sie zur Seite Dev Api Keys in der Navigationsleiste und erstellen Sie einen neuen API-Schlüssel und eine Project ID. Fügen Sie diese dann Ihrer .env-Datei hinzu.

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

Schritt 4: Führen Sie das CLI-Tool aus

Führen Sie das CLI-Tool aus, um Ihre Codebasis für die Übersetzung einzurichten.

npx gtx-cli setup

Schritt 5: Das Root-Layout anpassen

Passe das lang-Attribut im <html>-Tag in der Datei src/app/layout.tsx an.

Es sollte await getLocale() verwenden, um die aktuelle Sprache zu ermitteln.

src/app/layout.tsx

import { GTProvider, getLocale } from "gt-next"; 
...
export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const locale = await getLocale(); 
  return (
    <html lang={locale}> // [!code highlight]
      <GTProvider>
        <body
          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        >
        {children}
        </body>
      </GTProvider>
    </html>
  );
}

Schritt 6: Starte deine App

Deine App ist internationalisiert! 🎉 Lass sie uns testen!

Lass uns die Spracheinstellungen deines Browsers ändern.

Ändere deine Sprache in Chrome
Ändere deine Sprache in Firefox
Ändere deine Sprache in Edge

Starte deine Next.js-App.

npm run dev

Öffne deine App in deinem bevorzugten Browser (in der Regel unter http://localhost:3000). Wenn du alles richtig eingerichtet hast, solltest du deine App in der Sprache sehen, die du in deinem Browser eingestellt hast.

Fehlerbehebung

Hinweise

Übersetze beliebiges JSX mit der <T>-Komponente.
Wenn die Übersetzung nach dem Ändern deiner Sprache nicht funktioniert, überprüfe die Cookies deines Browsers.

Nächste Schritte

Geben Sie unserem GitHub-Repository gt-next einen Stern.
Richten Sie die Unterstützung für Rechts-nach-Links-Sprachen ein.
Probieren Sie ein fortgeschritteneres Beispiel aus.

Speedrun Next.js

Die Sprache meiner App ändert sich nicht, obwohl ich die Sprache meines Browsers geändert habe.

Auf dieser Seite