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?

Projektbereitstellung

Nachdem Sie das Projekt-Repository eingerichtet und sich erfolgreich bei Vercel angemeldet haben, werden Sie zu einem Bildschirm weitergeleitet, auf dem Sie Ihr GitHub-Repository mit Vercel verbinden können.

Anweisungen

Wählen Sie das neu erstellte Projekt-Repository aus;
Klicken Sie auf "Importieren";
Benennen Sie Ihr Projekt;
Klicken Sie auf "Bereitstellen";
Warten Sie, bis das Projekt bereitgestellt ist.

Als Ergebnis sollte Ihr Projekt auf Vercel live sein. Die URL wird in etwa so aussehen: https://tradehub-app-peach.vercel.app/. Bitte beachten Sie, dass bei kostenlosen Plänen die URLs vordefiniert sind und Sie diese ohne ein Upgrade nicht ändern können.

In der Praxis

War alles klar?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 2

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?

Projektbereitstellung

Nachdem Sie das Projekt-Repository eingerichtet und sich erfolgreich bei Vercel angemeldet haben, werden Sie zu einem Bildschirm weitergeleitet, auf dem Sie Ihr GitHub-Repository mit Vercel verbinden können.

Anweisungen

Wählen Sie das neu erstellte Projekt-Repository aus;
Klicken Sie auf "Importieren";
Benennen Sie Ihr Projekt;
Klicken Sie auf "Bereitstellen";
Warten Sie, bis das Projekt bereitgestellt ist.

Als Ergebnis sollte Ihr Projekt auf Vercel live sein. Die URL wird in etwa so aussehen: https://tradehub-app-peach.vercel.app/. Bitte beachten Sie, dass bei kostenlosen Plänen die URLs vordefiniert sind und Sie diese ohne ein Upgrade nicht ändern können.

In der Praxis

War alles klar?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 2

some-alt