EMZETT.
Login

Emzett Wiki

Server Actions: Formulare ohne eigene API (Next.js)

Properties1
tagsnextjs, frontend

2 Min. Lesezeit

Server Actions: Formulare ohne eigene API (Next.js)

Kurz: Server Actions sind Funktionen, die auf dem Server laufen und direkt aus Formularen oder Komponenten aufgerufen werden; sie ersetzen viele selbst geschriebene API-Routen.

Genauer: Statt für jedes Formular eine API-Route zu bauen, markiert man eine Funktion mit "use server" und übergibt sie als action an ein <form>. Beim Absenden ruft der Browser die Funktion auf dem Server auf; Next.js erledigt den Netzwerkaufruf.

Im Detail

Beispiel

// actions.ts
"use server";
export async function speichern(formData: FormData) {
  const titel = String(formData.get("titel") ?? "");
  // prüfen, speichern, dann Seite aktualisieren
}

<form action={speichern}> genügt. Das Formular funktioniert dank progressiver Verbesserung sogar ohne JavaScript. Nach dem Speichern aktualisiert man Daten mit revalidatePath/revalidateTag oder leitet mit redirect weiter.

Sicherheit: wie eine öffentliche API behandeln

Jede Server Action ist ein über HTTP erreichbarer Endpunkt, auch wenn sie nur ein Funktionsaufruf aussieht. Daher immer:

  • Eingaben validieren (zum Beispiel mit Zod); Typen aus TypeScript gelten zur Laufzeit nicht.
  • Anmeldung und Berechtigung in der Funktion selbst prüfen, nicht nur in der Oberfläche.
  • Rate Limiting bei missbrauchsanfälligen Aktionen.
  • Keine Geheimnisse zurückgeben; Fehlermeldungen allgemein halten.

Zustand und Rückmeldung

  • useActionState liefert Rückgabewert (zum Beispiel Fehlertexte) und Ausstehend-Zustand.
  • useFormStatus zeigt in Schaltflächen “Wird gespeichert…”.
  • useOptimistic zeigt Änderungen sofort an, bevor der Server antwortet.
  • Für Datei-Uploads und Streaming sind Route Handler manchmal besser geeignet.

Wann lieber eine API-Route?

Wenn fremde Clients (mobile App, Drittanbieter, Webhooks) die Schnittstelle nutzen sollen, ist eine dokumentierte, versionierte API sinnvoll. Server Actions sind für die eigene Oberfläche gedacht und ihre Adressen ändern sich beim Build.

Siehe auch: Next.js App Router, Formulare mit Zod validieren, CSRF

Backlinks