Next.js 14

Kursinhalt

Next.js 14

Next.js 14

1. Einführung

Willkommen Projektübersicht Kursvoraussetzungen Wie der Kurs Funktioniert

2. Grundkonzepte

Projekteinrichtung Projektdatei-Ordnerstruktur Stilansätze Hinzufügen der Globalen CSS-Datei Tailwind Styling CSS-Module Bedingtes Anwenden von Stilen Benutzerdefinierte Google-Schriftarten Herausforderung: Hinzufügen Einer Benutzerdefinierten Google-Schriftart Bilder

3. Seiten und Layouts

Wie Routing Funktioniert Herausforderung: Seite Erstellen Erstellen Eines Gemeinsamen Layouts Navigationsoptimierung Aktive Links Erstellen

4. Bereitstellung und Datenbank

Kontoeinrichtung Projektbereitstellung Projektdatenbank Datenpopulation

5. Arbeiten mit Daten

Wie Man Daten Abruft Arbeiten mit der Dashboard-Seite Übung und Herausforderung: Daten Abrufen Dynamisches vs. Statisches Rendering Lader Spezifische Teile Loaders Herausforderung: Skeleton Loader Komponenten für Loader Gruppieren

6. Erweiterte Funktionen

Rechnungsseite Suchfunktion Seitennummerierung Serveraktionen Element Erstellen Element Aktualisieren Element Löschen Herausforderung: Formularvalidierung

7. Authentifizierung

Verständnis Der Authentifizierung Login Route NextAuth.js Authentifizierungskonfiguration & Routen-Schutz Passwort-Hashing & Anmeldeinformationen Anmeldefunktionalität Verbindung von UI und Funktionalität Abmeldefunktion Was Kommt als Nächstes?

Verbindung von UI und Funktionalität

Stellen wir sicher, dass die Login-Funktionalität korrekt funktioniert.

Zurück zum Projekt

1. Erstelle die Authentifizierungsaktion

In der Datei actions.ts erstelle eine neue Aktion namens authenticate. Diese Aktion sollte die Funktion signIn aus auth.ts einbeziehen:

Anmeldeformular ändern

Innerhalb der login-form.tsx -Komponente nutze Reacts useFormState, um die Serveraktion aufzurufen.

In der Praxis

War alles klar?

Danke für Ihr Feedback!

Abschnitt 7. Kapitel 7

Fragen Sie AI

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Kursinhalt

Next.js 14

Next.js 14

1. Einführung

Willkommen Projektübersicht Kursvoraussetzungen Wie der Kurs Funktioniert

2. Grundkonzepte

Projekteinrichtung Projektdatei-Ordnerstruktur Stilansätze Hinzufügen der Globalen CSS-Datei Tailwind Styling CSS-Module Bedingtes Anwenden von Stilen Benutzerdefinierte Google-Schriftarten Herausforderung: Hinzufügen Einer Benutzerdefinierten Google-Schriftart Bilder

3. Seiten und Layouts

Wie Routing Funktioniert Herausforderung: Seite Erstellen Erstellen Eines Gemeinsamen Layouts Navigationsoptimierung Aktive Links Erstellen

4. Bereitstellung und Datenbank

Kontoeinrichtung Projektbereitstellung Projektdatenbank Datenpopulation

5. Arbeiten mit Daten

Wie Man Daten Abruft Arbeiten mit der Dashboard-Seite Übung und Herausforderung: Daten Abrufen Dynamisches vs. Statisches Rendering Lader Spezifische Teile Loaders Herausforderung: Skeleton Loader Komponenten für Loader Gruppieren

6. Erweiterte Funktionen

Rechnungsseite Suchfunktion Seitennummerierung Serveraktionen Element Erstellen Element Aktualisieren Element Löschen Herausforderung: Formularvalidierung

7. Authentifizierung

Verständnis Der Authentifizierung Login Route NextAuth.js Authentifizierungskonfiguration & Routen-Schutz Passwort-Hashing & Anmeldeinformationen Anmeldefunktionalität Verbindung von UI und Funktionalität Abmeldefunktion Was Kommt als Nächstes?

Verbindung von UI und Funktionalität

Stellen wir sicher, dass die Login-Funktionalität korrekt funktioniert.

Zurück zum Projekt

1. Erstelle die Authentifizierungsaktion

In der Datei actions.ts erstelle eine neue Aktion namens authenticate. Diese Aktion sollte die Funktion signIn aus auth.ts einbeziehen:

Anmeldeformular ändern

Innerhalb der login-form.tsx -Komponente nutze Reacts useFormState, um die Serveraktion aufzurufen.

In der Praxis

War alles klar?

Danke für Ihr Feedback!

Abschnitt 7. Kapitel 7

some-alt