Konzentrieren wir uns auf CRUD-Operationen. Bisher haben wir nur Daten vom Server gelesen und dem Benutzer angezeigt. Jetzt wollen wir uns auf das Erstellen, Aktualisieren und Löschen von Daten konzentrieren. All dies werden wir für die Rechnungsseite tun.

Theorie

Bevor wir mit der Implementierung beginnen, betrachten wir den Begriff Server Actions in Next.js

Server Actions ermöglichen es Ihnen, speziellen Code direkt auf dem Server auszuführen. Anstatt komplizierte Wege zu schaffen, um Ihre Daten zu ändern, können Sie diese Aktionen nutzen.

Warum sind Server Actions wichtig?

Webanwendungen müssen sicher sein, da sie auf unterschiedliche Weise angegriffen werden können. Server Actions helfen erheblich bei der Sicherheit. Sie verwenden verschiedene Techniken wie spezielle Anfragen, codierte Nachrichten, strenge Prüfungen und Einschränkungen, um Ihre App vor Angriffen zu schützen, Ihre Daten zu sichern und sicherzustellen, dass nur autorisierte Personen darauf zugreifen können.

Wie verwenden wir Formulare mit Serveraktionen?

Wir können Formulare erstellen, die Serveraktionen verwenden. Einfach ausgedrückt, fügen wir einen speziellen Code in das Formular ein, um ihm mitzuteilen, welche Aktion es ausführen soll. Diese Aktion erhält automatisch die Daten, die wir in das Formular eingeben.

// Server Component
export default function Page() {
  // Action
  async function create(formData: FormData) {
    'use server';
 
    // Logic to change data...
  }
 
  // Put the action in the `action` attribute
  return <form action={create}>...</form>;
}