Einrichtung

Einführung

Dies ist ein ausführlicheres Tutorial, wie man ein sehr einfaches NextJS-Projekt mit gt-next einrichtet. Wir führen Sie von Anfang bis Ende, einschließlich der Einrichtung des Projekts und der anschließenden Übersetzung. Im Laufe dieses Tutorials werden wir uns von einfachen zu fortgeschritteneren Konzepten hocharbeiten. Dieses Tutorial setzt voraus, dass Sie ein allgemeines Verständnis von Typescript, Next.js und React haben.

Hier ist eine Liste von Themen, die wir in diesem Tutorial behandeln werden:

Ein neues Next.js-Projekt einrichten
Verwenden der <T> Komponente, um eine App zu übersetzen
Verwenden von Variablenkomponenten wie <Var>, <Currency>, <DateTime>, und <Num>, um dynamische Inhalte zu übersetzen
Verwenden von Verzweigungskomponenten wie <Plural>, und <Branch>, um bedingte Inhalte zu übersetzen
Verwenden von i18n-Routing in Ihrer App

Unsere App wird eine einfache App sein, die es uns ermöglicht, den Umrechnungskurs zwischen Währungen zu überprüfen. Wir werden nur Inline-Styling und nur die gt-next Bibliothek verwenden, um die Dinge so einfach wie möglich zu halten. Dieses Beispiel basiert auf dem Currency Converter Tutorial auf GeeksforGeeks.

Richten Sie Ihre nächste App ein

Zuerst erstellen wir eine neue NextJS-App. Sie können dies tun, indem Sie den folgenden Befehl ausführen:

npx create-next-app@latest

Dies führt Sie zum Einrichtungsassistenten, wo Sie den Namen Ihrer App und die Vorlage auswählen können, die Sie verwenden möchten. Für dieses Tutorial verwenden Sie den Namen currencies und wählen Ja, wenn Sie gefragt werden, ob Sie TypeScript verwenden möchten.

Navigieren Sie zum Projektverzeichnis und starten wir die App!

cd currencies
npm install
npm run dev

Dies wird die App auf http://localhost:3000 starten.

Lass uns etwas Inhalt hinzufügen!

Jetzt, da wir unsere App eingerichtet haben, lass uns den Inhalt unserer App überschreiben, um einen einfachen Währungsumrechner anzuzeigen. Kopiere und füge einfach den folgenden Code in die Dateien src/app/page.tsx und src/app/layout.tsx ein.

Mach dir vorerst keine allzu großen Sorgen darüber, wie es funktioniert. All dieser Code simuliert nur einen Abruf von einer Währungsumrechnungs-API und zeigt den Wechselkurs zwischen zwei Währungen an.

src/app/layout.tsx

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
 
const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});
 
const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});
 
export const metadata: Metadata = {
  title: "Currency Converter",
  description: "A simple currency converter",
};
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}

Fazit

Jetzt haben Sie eine normale NextJS-App eingerichtet und bereit zur Übersetzung mit gt-next.

Einrichtung

Einführung

Richten Sie Ihre nächste App ein

Lass uns etwas Inhalt hinzufügen!

Fazit

Auf dieser Seite