Element Erstellen

Erstellen Sie eine Rechnung - Schritt für Schritt

1. Ein Formular erstellen: Zuerst benötigen wir ein Formular, um die Details zu erfassen. Hier gibt der Benutzer die Informationen für die neue Rechnung ein;
2. Verwenden Sie eine Serveraktion: Erstellen Sie eine spezielle Aktion auf dem Server, um die Formulardaten zu verarbeiten. Wenn jemand das Formular ausfüllt, wird diese Aktion ausgelöst;
3. Daten aus dem Formular abrufen: Nehmen Sie innerhalb der Serveraktion die Informationen aus dem Formular heraus. Denken Sie daran, es ist wie das Auspacken einer Schachtel - Sie möchten sehen, was drin ist;
4. Daten überprüfen und vorbereiten: Schauen Sie sich die Daten an und stellen Sie sicher, dass alles in Ordnung ist. Es ist wie das Überprüfen, ob die Zutaten für ein Rezept frisch und korrekt sind. Sobald alles in Ordnung ist, bereiten Sie es vor, um es in die Datenbank einzufügen;
5. Daten einfügen: Fügen Sie die Daten in die Datenbank ein;
6. Cache aktualisieren und zur Rechnungsseite zurückkehren: Nachdem die Daten hinzugefügt wurden, aktualisieren Sie den Cache. Es ist wie sicherzustellen, dass jeder die neuesten Informationen erhält. Senden Sie dann den Benutzer zurück zur Rechnungsseite, damit er die neue Rechnung sehen kann, die er gerade erstellt hat.

Zurück zum Projekt

1. Erstellen Sie ein Formular

Erstellen Sie einen neuen Ordner mit dem Namen 'create' im Verzeichnis app/dashboard/invoices. Erstellen Sie eine neue Datei namens page.tsx in diesem Ordner. Diese Datei dient als neue Seite, die es Benutzern ermöglicht, eine Rechnung zu erstellen.

Kopieren und fügen Sie den folgenden Code in die Datei page.tsx ein:

Die Seite verwendet eine Serverkomponente, um Benutzerinformationen zu sammeln und sie dann an eine fertige <Form>-Komponente zu senden. Hier ist eine Aufschlüsselung der <Form>-Komponente:

• Dropdown für Benutzer;
• Eingabefeld für den Betrag;
• Optionsfelder für den Status;
• Absenden-Button zum Abschließen.

Wenn Sie auf die Schaltfläche "Rechnung erstellen" klicken, sollten Sie zu einem Formular weitergeleitet werden, das Sie auffordert, die erforderlichen Informationen auszufüllen.

2. Verwenden Sie eine Serveraktion

1. Navigieren Sie zum Verzeichnis lib;
2. Erstellen Sie eine neue Datei mit dem Namen actions.ts;
3. Fügen Sie die Direktive 'use server' am Anfang hinzu;
   • Warum 'use server'? - Es ermöglicht, dass die Funktionen vielseitig und sowohl in Client- als auch in Serverkomponenten verwendbar sind. Es ist eine praktische Möglichkeit, Serveraktionen zu organisieren, aber wir können sie bei Bedarf auch direkt in Serverkomponenten einbetten.
4. Erstellen einer Serveraktionsfunktion.

Als nächstes importieren Sie innerhalb der <Form>-Komponente createInvoice aus der Datei actions.ts. Fügen Sie ein action-Attribut im <form>-Element hinzu und rufen Sie die createInvoice-Aktion auf.

3. Daten aus dem Formular abrufen

Kehren Sie zu app/lib/actions.ts zurück, um die Werte von formData mit der Methode .get(name) zu extrahieren. Sobald Sie diese Aufgabe abgeschlossen haben, können Sie das Formular ausfüllen und die eingegebenen Daten in der Terminalkonsole überprüfen.

Ergebnis:

4. Überprüfen und Vorbereiten der Daten

Bevor die Formulardaten in der Datenbank gespeichert werden, ist es wichtig zu überprüfen, ob sie im richtigen Format und mit den richtigen Typen vorliegen. In unserem Kurs haben wir ein spezifisches Format für die Rechnungsdatentabelle verwendet.

Um diesen Prozess zu erleichtern, haben wir ein paar Optionen zur Typvalidierung. Anstatt die Typen manuell zu überprüfen, können wir Zod verwenden, eine TypeScript-first Validierungsbibliothek. Es ist ein praktisches Werkzeug, das die Validierungsaufgabe vereinfacht.

Folgendes müssen wir in der Datei actions.ts tun:

1. Importieren Sie Zod in die Datei actions.ts;
2. Erstellen Sie ein Schema mit Zod, das der Struktur des Formularobjekts entspricht. Dieses Schema fungiert als Satz von Regeln, um sicherzustellen, dass die formData korrekt ist, bevor sie in die Datenbank gelangt.

Dann übergeben wir die rawFormData an CreateInvoice, um die Typen zu validieren.

Lassen Sie uns den Betrag in Cent umwandeln und ein neues Datum im Format "YYYY-MM-DD" mit Vanilla JS erstellen.

5. Daten einfügen

Jetzt, da wir alle notwendigen Werte haben, können wir sql verwenden, um sie an die Datenbank zu senden.

6. Cache aktualisieren und zurück zu Rechnungen gehen

Next.js hat ein praktisches Feature namens Client-side Router Cache. Es verfolgt, wo Benutzer sich auf der Website für einen bestimmten Zeitraum aufgehalten haben. Dieser Cache, kombiniert mit Prefetching, stellt sicher, dass Benutzer schnell zwischen verschiedenen Seiten wechseln können, ohne den Server mit zu vielen Anfragen zu überlasten.

Nun, hier ist, was wir tun möchten:

1. Da wir die Daten auf der Rechnungsseite aktualisiert haben, möchten wir sicherstellen, dass Benutzer die neuesten Informationen sehen. Dazu leeren wir den Cache mit der Funktion revalidatePath. Dies stellt sicher, dass eine frische Anfrage an den Server gesendet wird, um die neuesten Daten abzurufen;
2. Nachdem wir die Daten aktualisiert und den Cache geleert haben, möchten wir den Benutzer reibungslos zurück zur Rechnungsseite führen. Dies erreichen wir mit der Funktion redirect. Es ist, als würden wir ihnen den Weg zurück zeigen, wo sie waren.

In der Praxis