Eine Rechnung erstellen – Schritt für Schritt

1. 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;
2. 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;
3. 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;
4. 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;
5. Daten einfügen: Die Daten in die Datenbank eintragen;
6. 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

1. Zum Verzeichnis lib navigieren;
2. Eine neue Datei mit dem Namen actions.ts erstellen;
3. 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.
4. 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:

1. Zod in die Datei actions.ts importieren;
2. 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:

1. 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;
2. 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