Speedrun Next.js
Lass uns im Schnelllauf eine neue App erstellen und sie mit GT internationalisieren.
Übersicht
In diesem Leitfaden gehen wir zwei Punkte durch:
- Erstellen einer neuen Next.js-App
- Internationalisierung mit General Translation
Insgesamt sollte das weniger als 10 Minuten dauern.
Voraussetzungen
Wir setzen voraus, dass Sie bereits Erfahrung mit React haben und mit TypeScript vertraut sind.
Schritt 1: Neue Next.js-App erstellen
Navigiere zuerst im Terminal in ein Verzeichnis deiner Wahl und führe den folgenden Befehl aus:
npx create-next-app next-quickstart --ts --tailwind --eslint --app --use-npm --src-dirEin Einrichtungsassistent wird angezeigt. Sie können bei jeder Option einfach den Standardwert auswählen.
Schritt 2: Bibliotheken installieren
Wechsle in das Stammverzeichnis deines Next.js-Projekts und führe Folgendes aus:
cd next-quickstart
npm i gt-next
npm i gtx-cliSchritt 3: Fügen Sie Ihre Umgebungsvariablen hinzu.
Navigieren Sie zum Dashboard.
Gehen Sie in der Navigationsleiste zur Seite „Dev API Keys“ und erstellen Sie einen neuen API-Schlüssel sowie eine Project ID.
Fügen Sie diese anschließend 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 Ihren Code für die Übersetzung einzurichten.
npx gtx-cli setupSchritt 5: Root-Layout anpassen
Passe die lang-Prop im <html>-Tag in der Datei src/app/layout.tsx an.
Sie sollte await getLocale() verwenden, um die aktuelle locale zu ermitteln.
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!
Ändere die Spracheinstellungen deines Browsers.
Starte deine Next.js-App.
npm run devÖffnen Sie Ihre App in Ihrem bevorzugten Browser (in der Regel unter http://localhost:3000). Wenn Sie alles richtig eingerichtet haben, sollte Ihre App in der im Browser eingestellten Sprache angezeigt werden.
Fehlerbehebung
Hinweise
- Beliebiges JSX mit der Komponente
<T>übersetzen. - Wenn die Übersetzung nach dem Sprachwechsel nicht greift, prüfen Sie die Cookies Ihres 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.
Wie ist dieser Leitfaden?