Fokus auf CRUD-Operationen. Bisher wurden lediglich Daten vom Server gelesen und dem Benutzer angezeigt. Nun liegt der Schwerpunkt auf dem Erstellen, Aktualisieren und Löschen von Daten. All dies wird für die Rechnungsseite umgesetzt.

Theorie

Vor der Implementierung wird der Begriff Server Actions in Next.js betrachtet.

Server Actions ermöglichen das Ausführen spezieller Logik direkt auf dem Server. Anstatt komplexe Methoden zur Datenänderung zu entwickeln, können diese Aktionen genutzt werden.

Warum sind Server Actions wichtig?

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

Wie verwendet man Formulare mit Server Actions?

Es ist möglich, Formulare zu erstellen, die Server Actions nutzen. Vereinfacht gesagt, wird ein spezieller Code im Formular eingefügt, der angibt, welche Aktion ausgeführt werden soll. Diese Aktion erhält automatisch die im Formular eingegebenen Daten.

// 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>;
}