Erste Schritte

Ein neues Projekt erstellen

Wir empfehlen die Verwendung von pnpm als Paketmanager, da es schneller und effizienter ist als npm oder yarn. Falls Sie pnpm noch nicht installiert haben, können Sie es global installieren mit:

npm install -g pnpm

Um eine Next.js-App zu erstellen, öffnen Sie Ihr Terminal, wechseln Sie mit cd in den Ordner, in dem Sie Ihr Projekt speichern möchten, und führen Sie folgenden Befehl aus:

npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm

Dieser Befehl verwendet create-next-app, ein CLI-Tool (Command Line Interface), das eine Next.js-Anwendung für Sie einrichtet. Im obigen Befehl verwenden Sie außerdem das Flag --example mit dem Starter-Beispiel für diesen Kurs.

Das Projekt erkunden

Anders als in Tutorials, bei denen Sie Code von Grund auf schreiben, ist der Großteil des Codes für diesen Kurs bereits für Sie geschrieben. Dies spiegelt besser die reale Entwicklung wider, bei der Sie wahrscheinlich mit bestehenden Codebasen arbeiten werden.

Unser Ziel ist es, Ihnen zu helfen, sich auf die Hauptfunktionen von Next.js zu konzentrieren, ohne den gesamten Anwendungscode schreiben zu müssen.

Nach der Installation öffnen Sie das Projekt in Ihrem Code-Editor und navigieren zu nextjs-dashboard.

cd nextjs-dashboard

Lassen Sie uns etwas Zeit damit verbringen, das Projekt zu erkunden.

Ordnerstruktur

Sie werden feststellen, dass das Projekt folgende Ordnerstruktur hat:

• /app: Enthält alle Routen, Komponenten und die Logik für Ihre Anwendung. Hier werden Sie hauptsächlich arbeiten.
• /app/lib: Enthält Funktionen, die in Ihrer Anwendung verwendet werden, wie wiederverwendbare Utility-Funktionen und Datenabruffunktionen.
• /app/ui: Enthält alle UI-Komponenten für Ihre Anwendung, wie Karten, Tabellen und Formulare. Um Zeit zu sparen, haben wir diese Komponenten bereits für Sie vorgestaltet.
• /public: Enthält alle statischen Assets für Ihre Anwendung, wie Bilder.
• Konfigurationsdateien: Sie werden auch Konfigurationsdateien wie next.config.ts im Stammverzeichnis Ihrer Anwendung bemerken. Die meisten dieser Dateien werden erstellt und vorkonfiguriert, wenn Sie ein neues Projekt mit create-next-app starten. Sie müssen sie in diesem Kurs nicht ändern.

Fühlen Sie sich frei, diese Ordner zu erkunden, und machen Sie sich keine Sorgen, wenn Sie noch nicht alles verstehen, was der Code tut.

Platzhalterdaten

Beim Erstellen von Benutzeroberflächen ist es hilfreich, Platzhalterdaten zu haben. Falls eine Datenbank oder API noch nicht verfügbar ist, können Sie:

• Platzhalterdaten im JSON-Format oder als JavaScript-Objekte verwenden.
• Einen Drittanbieterdienst wie mockAPI nutzen.

Für dieses Projekt haben wir einige Platzhalterdaten in app/lib/placeholder-data.ts bereitgestellt. Jedes JavaScript-Objekt in der Datei repräsentiert eine Tabelle in Ihrer Datenbank. Zum Beispiel für die Rechnungstabelle:

const invoices = [
  {
    customer_id: customers[0].id,
    amount: 15795,
    status: 'pending',
    date: '2022-12-06',
  },
  {
    customer_id: customers[1].id,
    amount: 20348,
    status: 'pending',
    date: '2022-11-14',
  },
  // ...
];

Im Kapitel zum Einrichten Ihrer Datenbank werden Sie diese Daten verwenden, um Ihre Datenbank zu seeden (mit einigen Initialdaten zu füllen).

TypeScript

Sie werden auch feststellen, dass die meisten Dateien die Endung .ts oder .tsx haben. Das liegt daran, dass das Projekt in TypeScript geschrieben ist. Wir wollten einen Kurs erstellen, der die moderne Web-Landschaft widerspiegelt.

Es ist in Ordnung, wenn Sie TypeScript nicht kennen – wir werden die TypeScript-Codeausschnitte bei Bedarf bereitstellen.

Schauen Sie sich vorerst die Datei /app/lib/definitions.ts an. Hier definieren wir manuell die Typen, die von der Datenbank zurückgegeben werden. Zum Beispiel hat die Rechnungstabelle folgende Typen:

export type Invoice = {
  id: string;
  customer_id: string;
  amount: number;
  date: string;
  // In TypeScript wird dies als String-Union-Typ bezeichnet.
  // Es bedeutet, dass die Eigenschaft "status" nur einer der beiden Strings sein kann: 'pending' oder 'paid'.
  status: 'pending' | 'paid';
};

Durch die Verwendung von TypeScript können Sie sicherstellen, dass Sie nicht versehentlich das falsche Datenformat an Ihre Komponenten oder Datenbank übergeben, wie zum Beispiel einen string statt einer number für den Rechnungsbetrag amount.

Falls Sie TypeScript-Entwickler sind:

• Wir deklarieren die Datentypen manuell, aber für bessere Typsicherheit empfehlen wir Prisma oder Drizzle, die automatisch Typen basierend auf Ihrem Datenbankschema generieren.
• Next.js erkennt, ob Ihr Projekt TypeScript verwendet, und installiert automatisch die notwendigen Pakete und Konfigurationen. Next.js kommt außerdem mit einem TypeScript-Plugin für Ihren Code-Editor, das bei Auto-Vervollständigung und Typsicherheit hilft.

Den Entwicklungsserver starten

Führen Sie pnpm i aus, um die Pakete des Projekts zu installieren.

pnpm i

Anschließend führen Sie pnpm dev aus, um den Entwicklungsserver zu starten.

pnpm dev

pnpm dev startet Ihren Next.js-Entwicklungsserver auf Port 3000. Lassen Sie uns überprüfen, ob er funktioniert.

Öffnen Sie http://localhost:3000 in Ihrem Browser. Ihre Startseite sollte so aussehen, die bewusst ungestaltet ist: