Erstellen eines neuen Elements in der Datenbank
Eine Rechnung erstellen – Schritt für Schritt
- Formular erstellen: Zunächst wird ein Formular benötigt, um die Details zu erfassen. Hier gibt der Benutzer die Informationen für die neue Rechnung ein;
- Server Action verwenden: Eine spezielle Aktion auf dem Server einrichten, um die Formulardaten zu verarbeiten. Sobald das Formular ausgefüllt wird, wird diese Aktion ausgelöst;
- Daten aus dem Formular entnehmen: Innerhalb der Server Action die Informationen aus dem Formular extrahieren. Dies ist vergleichbar mit dem Auspacken einer Box – der Inhalt soll sichtbar werden;
- Daten prüfen und vorbereiten: Die Daten überprüfen und sicherstellen, dass sie korrekt sind. Dies entspricht dem Überprüfen der Zutaten für ein Rezept auf Frische und Richtigkeit. Wenn alles passt, die Daten für die Speicherung in der Datenbank vorbereiten;
- Daten einfügen: Die Daten in die Datenbank eintragen;
- Cache aktualisieren und zur Rechnungsübersicht zurückkehren: Nach dem Hinzufügen der Daten den Cache aktualisieren, damit alle die neuesten Informationen erhalten. Anschließend den Benutzer zurück zur Rechnungsübersicht leiten, damit die neu erstellte Rechnung sichtbar ist.
Zurück zum Projekt
1. Formular erstellen
Einen neuen Ordner mit dem Namen 'create' im Verzeichnis app/dashboard/invoices
anlegen. Eine neue Datei mit dem Namen page.tsx
in diesem Ordner erstellen. Diese Datei dient als neue Seite, auf der Benutzer eine Rechnung generieren können.
Den folgenden Code in die Datei page.tsx
einfügen:
Die Seite verwendet eine Server-Komponente, um Benutzerinformationen zu erfassen und diese anschließend an eine vorgefertigte <Form>
-Komponente zu übergeben. Eine Übersicht der <Form>
-Komponente:
- Dropdown-Menü für Benutzer;
- Eingabefeld für den Betrag;
- Optionsfelder für den Status;
- Absenden-Schaltfläche zum Abschließen.
Wenn Sie auf die Schaltfläche "Create Invoice" klicken, werden Sie zu einem Formular weitergeleitet, das Sie auffordert, die erforderlichen Informationen auszufüllen.
2. Verwendung einer Server Action
- Zum Verzeichnis
lib
navigieren; - Eine neue Datei mit dem Namen
actions.ts
erstellen; - Die Direktive
'use server'
am Anfang hinzufügen;- Warum
'use server'
? – Ermöglicht die vielseitige Nutzung der Funktionen sowohl in Client- als auch in Server-Komponenten. Praktische Möglichkeit zur Organisation von Server Actions, alternativ können sie auch direkt in Server-Komponenten eingebettet werden.
- Warum
- Erstellen einer Server Action-Funktion.
Als Nächstes innerhalb der <Form>
-Komponente createInvoice
aus der Datei actions.ts
importieren. Ein action
-Attribut im <form>
-Element hinzufügen und die createInvoice
-Action aufrufen.
3. Daten aus dem Formular abrufen
Zurück zu app/lib/actions.ts
, um die Werte von formData
mit der Methode .get(name)
zu extrahieren. Nach Abschluss dieser Aufgabe kann das Formular ausgefüllt und die eingegebenen Daten im Terminal angezeigt werden.
Ergebnis:
4. Überprüfung und Vorbereitung der Daten
Bevor die Formulardaten in der Datenbank gespeichert werden, ist es wichtig zu prüfen, ob sie das richtige Format und die korrekten Typen aufweisen. In unserem Kurs verwenden wir ein bestimmtes Format für die Daten der Rechnungstabelle.
Um diesen Prozess zu erleichtern, stehen uns verschiedene Optionen zur Typvalidierung zur Verfügung. Anstatt die Typen manuell zu überprüfen, können wir Zod verwenden, eine Validierungsbibliothek mit Fokus auf TypeScript. Dieses Tool vereinfacht die Validierungsaufgabe erheblich.
Folgende Schritte sind in der Datei actions.ts
erforderlich:
- Zod in die Datei
actions.ts
importieren; - Ein Schema mit Zod erstellen, das der Struktur des Formularobjekts entspricht. Dieses Schema dient als Regelwerk, um sicherzustellen, dass die
formData
korrekt ist, bevor sie in die Datenbank geschrieben wird.
Anschließend wird das rawFormData
an CreateInvoice
übergeben, um die Typen zu validieren.
Den Betrag in Cent umwandeln und ein neues Datum im Format "YYYY-MM-DD" mit Vanilla JS erstellen.
5. Daten einfügen
Nachdem alle erforderlichen Werte vorliegen, kann sql
verwendet werden, um diese an die Datenbank zu senden.
6. Cache aktualisieren und zu Rechnungen zurückkehren
Next.js bietet eine praktische Funktion namens Client-side Router Cache. Diese verfolgt, welche Seiten die Nutzer innerhalb eines bestimmten Zeitraums besucht haben. Dieser Cache sorgt in Kombination mit Prefetching dafür, dass Nutzer schnell zwischen verschiedenen Seiten wechseln können, ohne den Server mit zu vielen Anfragen zu überlasten.
Folgendes soll nun umgesetzt werden:
- Da die Daten auf der Rechnungsseite aktualisiert wurden, sollen Nutzer stets die neuesten Informationen sehen. Dafür wird der Cache mit der Funktion
revalidatePath
geleert. So wird eine neue Anfrage an den Server gesendet und die aktuellsten Daten abgerufen; - Nach der Aktualisierung der Daten und dem Leeren des Caches sollen die Nutzer reibungslos zur Rechnungsseite zurückgeleitet werden. Dies wird mit der Funktion
redirect
erreicht. Sie dient als Wegweiser zurück zur vorherigen Seite.
In der Praxis
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Can you explain how the Zod schema helps with validation in this process?
What should I do if the form data doesn't pass validation?
How do I handle errors when inserting data into the database?
Awesome!
Completion rate improved to 2.08
Erstellen eines neuen Elements in der Datenbank
Swipe um das Menü anzuzeigen
Eine Rechnung erstellen – Schritt für Schritt
- Formular erstellen: Zunächst wird ein Formular benötigt, um die Details zu erfassen. Hier gibt der Benutzer die Informationen für die neue Rechnung ein;
- Server Action verwenden: Eine spezielle Aktion auf dem Server einrichten, um die Formulardaten zu verarbeiten. Sobald das Formular ausgefüllt wird, wird diese Aktion ausgelöst;
- Daten aus dem Formular entnehmen: Innerhalb der Server Action die Informationen aus dem Formular extrahieren. Dies ist vergleichbar mit dem Auspacken einer Box – der Inhalt soll sichtbar werden;
- Daten prüfen und vorbereiten: Die Daten überprüfen und sicherstellen, dass sie korrekt sind. Dies entspricht dem Überprüfen der Zutaten für ein Rezept auf Frische und Richtigkeit. Wenn alles passt, die Daten für die Speicherung in der Datenbank vorbereiten;
- Daten einfügen: Die Daten in die Datenbank eintragen;
- Cache aktualisieren und zur Rechnungsübersicht zurückkehren: Nach dem Hinzufügen der Daten den Cache aktualisieren, damit alle die neuesten Informationen erhalten. Anschließend den Benutzer zurück zur Rechnungsübersicht leiten, damit die neu erstellte Rechnung sichtbar ist.
Zurück zum Projekt
1. Formular erstellen
Einen neuen Ordner mit dem Namen 'create' im Verzeichnis app/dashboard/invoices
anlegen. Eine neue Datei mit dem Namen page.tsx
in diesem Ordner erstellen. Diese Datei dient als neue Seite, auf der Benutzer eine Rechnung generieren können.
Den folgenden Code in die Datei page.tsx
einfügen:
Die Seite verwendet eine Server-Komponente, um Benutzerinformationen zu erfassen und diese anschließend an eine vorgefertigte <Form>
-Komponente zu übergeben. Eine Übersicht der <Form>
-Komponente:
- Dropdown-Menü für Benutzer;
- Eingabefeld für den Betrag;
- Optionsfelder für den Status;
- Absenden-Schaltfläche zum Abschließen.
Wenn Sie auf die Schaltfläche "Create Invoice" klicken, werden Sie zu einem Formular weitergeleitet, das Sie auffordert, die erforderlichen Informationen auszufüllen.
2. Verwendung einer Server Action
- Zum Verzeichnis
lib
navigieren; - Eine neue Datei mit dem Namen
actions.ts
erstellen; - Die Direktive
'use server'
am Anfang hinzufügen;- Warum
'use server'
? – Ermöglicht die vielseitige Nutzung der Funktionen sowohl in Client- als auch in Server-Komponenten. Praktische Möglichkeit zur Organisation von Server Actions, alternativ können sie auch direkt in Server-Komponenten eingebettet werden.
- Warum
- Erstellen einer Server Action-Funktion.
Als Nächstes innerhalb der <Form>
-Komponente createInvoice
aus der Datei actions.ts
importieren. Ein action
-Attribut im <form>
-Element hinzufügen und die createInvoice
-Action aufrufen.
3. Daten aus dem Formular abrufen
Zurück zu app/lib/actions.ts
, um die Werte von formData
mit der Methode .get(name)
zu extrahieren. Nach Abschluss dieser Aufgabe kann das Formular ausgefüllt und die eingegebenen Daten im Terminal angezeigt werden.
Ergebnis:
4. Überprüfung und Vorbereitung der Daten
Bevor die Formulardaten in der Datenbank gespeichert werden, ist es wichtig zu prüfen, ob sie das richtige Format und die korrekten Typen aufweisen. In unserem Kurs verwenden wir ein bestimmtes Format für die Daten der Rechnungstabelle.
Um diesen Prozess zu erleichtern, stehen uns verschiedene Optionen zur Typvalidierung zur Verfügung. Anstatt die Typen manuell zu überprüfen, können wir Zod verwenden, eine Validierungsbibliothek mit Fokus auf TypeScript. Dieses Tool vereinfacht die Validierungsaufgabe erheblich.
Folgende Schritte sind in der Datei actions.ts
erforderlich:
- Zod in die Datei
actions.ts
importieren; - Ein Schema mit Zod erstellen, das der Struktur des Formularobjekts entspricht. Dieses Schema dient als Regelwerk, um sicherzustellen, dass die
formData
korrekt ist, bevor sie in die Datenbank geschrieben wird.
Anschließend wird das rawFormData
an CreateInvoice
übergeben, um die Typen zu validieren.
Den Betrag in Cent umwandeln und ein neues Datum im Format "YYYY-MM-DD" mit Vanilla JS erstellen.
5. Daten einfügen
Nachdem alle erforderlichen Werte vorliegen, kann sql
verwendet werden, um diese an die Datenbank zu senden.
6. Cache aktualisieren und zu Rechnungen zurückkehren
Next.js bietet eine praktische Funktion namens Client-side Router Cache. Diese verfolgt, welche Seiten die Nutzer innerhalb eines bestimmten Zeitraums besucht haben. Dieser Cache sorgt in Kombination mit Prefetching dafür, dass Nutzer schnell zwischen verschiedenen Seiten wechseln können, ohne den Server mit zu vielen Anfragen zu überlasten.
Folgendes soll nun umgesetzt werden:
- Da die Daten auf der Rechnungsseite aktualisiert wurden, sollen Nutzer stets die neuesten Informationen sehen. Dafür wird der Cache mit der Funktion
revalidatePath
geleert. So wird eine neue Anfrage an den Server gesendet und die aktuellsten Daten abgerufen; - Nach der Aktualisierung der Daten und dem Leeren des Caches sollen die Nutzer reibungslos zur Rechnungsseite zurückgeleitet werden. Dies wird mit der Funktion
redirect
erreicht. Sie dient als Wegweiser zurück zur vorherigen Seite.
In der Praxis
Danke für Ihr Feedback!