Speedrun Next.js

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

Überblick

In diesem Leitfaden werden wir zwei Dinge durchgehen:

Erstellen einer neuen Next.js-App
Internationalisierung mit allgemeiner Übersetzung

Insgesamt sollte dies weniger als 10 Minuten dauern.

Voraussetzungen

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

Schritt 1: Erstellen Sie eine neue Next.js-App

Navigieren Sie zuerst im Terminal zu dem Verzeichnis Ihrer Wahl und führen Sie den folgenden Befehl aus:

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

Ein Einrichtungsassistent wird angezeigt, Sie können einfach den Standardwert für jede Option auswählen.

Schritt 2: Installieren Sie die Bibliotheken

Navigieren Sie zum Stammverzeichnis Ihres Next.js-Projekts und führen Sie 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 Dev Api Keys-Seite in der Navigationsleiste und erstellen Sie einen neuen API-Schlüssel und eine Projekt-ID. Fügen Sie diese dann zu 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: Ändern Sie das Root-Layout

Ändern Sie das lang-Prop im <html>-Tag in der Datei src/app/layout.tsx.

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

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: Starten Sie Ihre App

Ihre App ist internationalisiert! 🎉 Lassen Sie uns das testen!

Ändern wir die Spracheinstellungen Ihres Browsers.

Ändern Sie Ihre Sprache in Chrome
Ändern Sie Ihre Sprache in Firefox
Ändern Sie Ihre Sprache in Edge

Starten Sie Ihre Next.js-App.

npm run dev

Öffnen Sie Ihre App in Ihrem bevorzugten Browser (normalerweise unter http://localhost:3000). Wenn Sie alles korrekt eingerichtet haben, sollten Sie Ihre App in der Sprache sehen, die Sie in Ihrem Browser eingestellt haben.

Fehlerbehebung

Notizen

Übersetzen Sie beliebiges JSX mit der <T> Komponente.
Wenn die Übersetzung nicht funktioniert, wenn Sie Ihre Sprache ändern, überprüfen Sie die Cookies Ihres Browsers.

Nächste Schritte

Geben Sie unserem GitHub-Repo 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