App Router

Willkommen zum Next.js Foundations-Kurs! In diesem kostenlosen interaktiven Kurs lernen Sie die Hauptfunktionen von Next.js, indem Sie eine Full-Stack-Webanwendung erstellen.

Was wir bauen werden

Für diesen Kurs werden wir ein Finanz-Dashboard erstellen, das folgende Funktionen bietet:

• Eine öffentliche Startseite.
• Eine Login-Seite.
• Dashboard-Seiten, die durch Authentifizierung geschützt sind.
• Die Möglichkeit für Benutzer, Rechnungen hinzuzufügen, zu bearbeiten und zu löschen.

Das Dashboard wird auch eine begleitende Datenbank haben, die Sie in einem späteren Kapitel einrichten werden.

Am Ende des Kurses verfügen Sie über die wesentlichen Fähigkeiten, um mit dem Erstellen von Full-Stack-Next.js-Anwendungen zu beginnen.

Übersicht

Hier ist eine Übersicht über die Funktionen, die Sie in diesem Kurs kennenlernen werden:

• Styling: Die verschiedenen Möglichkeiten, Ihre Anwendung in Next.js zu gestalten.
• Optimierungen: Wie Sie Bilder, Links und Schriftarten optimieren.
• Routing: Wie Sie verschachtelte Layouts und Seiten mit Dateisystem-Routing erstellen.
• Datenabruf: Wie Sie eine Postgres-Datenbank auf Vercel einrichten und Best Practices für das Abrufen und Streamen von Daten.
• Suche und Paginierung: Wie Sie Suche und Paginierung mit URL-Suchparametern implementieren.
• Datenmutation: Wie Sie Daten mit React Server Actions mutieren und den Next.js-Cache neu validieren.
• Fehlerbehandlung: Wie Sie allgemeine Fehler und 404-Fehler behandeln.
• Formularvalidierung und Barrierefreiheit: Wie Sie serverseitige Formularvalidierung durchführen und Tipps zur Verbesserung der Barrierefreiheit.
• Authentifizierung: Wie Sie Authentifizierung mit NextAuth.js und Middleware hinzufügen.
• Metadaten: Wie Sie Metadaten hinzufügen und Ihre Anwendung für das Teilen in sozialen Medien vorbereiten.

Voraussetzungen

Dieser Kurs setzt grundlegende Kenntnisse in React und JavaScript voraus. Wenn Sie neu in React sind, empfehlen wir Ihnen, zuerst unseren React Foundations-Kurs zu absolvieren, um die Grundlagen von React wie Komponenten, Props, State und Hooks sowie neuere Funktionen wie Server Components und Suspense zu lernen.

Systemanforderungen

Bevor Sie mit diesem Kurs beginnen, stellen Sie sicher, dass Ihr System die folgenden Anforderungen erfüllt:

• Node.js 18.18.0 oder höher installiert. Hier herunterladen.
• Betriebssysteme: macOS, Windows (einschließlich WSL) oder Linux.

Zusätzlich benötigen Sie ein GitHub-Konto und ein Vercel-Konto.

Machen Sie mit

Wenn Sie Fragen zu diesem Kurs haben oder Feedback geben möchten, können Sie sich an unsere Community auf Reddit oder GitHub wenden.