Validierung und Fehlerbehandlung in Server Actions
Erstellen Sie robuste Server Actions, indem Sie Eingaben mit Zod validieren, strukturierte Fehlerzustände zurückgeben und diese mit useActionState in Ihren Formularen anzeigen
Validierung und Fehlerbehandlung in Server Actions ist eine kostenlose Next.js 15 Fullstack (App Router + Server Actions)-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Next.js 15 Fullstack (App Router + Server Actions)-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Next.js 15 Fullstack (App Router + Server Actions)-Kurs umfasst insgesamt 3 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Why Validate Server Actions?
Server Actions receive data straight from the client, which can never be trusted. Validation guards against malformed input, injection, and broken business rules before anything touches your database.
Reading FormData
A Server Action bound to a form receives a FormData object. You read fields by name, but every value arrives as a string.
'use server';
export async function createPost(formData: FormData) {
const title = formData.get('title');
const views = formData.get('views');
}Defining a Zod Schema
Zod declares the shape and rules of your data. coerce converts string form values into the right types automatically.
import { z } from 'zod';
const PostSchema = z.object({
title: z.string().min(3, 'Title too short'),
views: z.coerce.number().int().min(0)
});Safe Parsing
Use safeParse instead of parse so validation failures return a result object rather than throwing. Inspect success to branch.
const parsed = PostSchema.safeParse({
title: formData.get('title'),
views: formData.get('views')
});
if (!parsed.success) {
// handle errors
}Returning a Structured Error State
Rather than throwing, return an object describing what went wrong. Field-level messages let the UI show errors next to the right input.
if (!parsed.success) {
return {
errors: parsed.error.flatten().fieldErrors,
message: 'Validation failed'
};
}Wiring useActionState
On the client, useActionState tracks the value your action returns. It gives you the latest state and a wrapped action to pass to the form.
'use client';
const [state, formAction] = useActionState(createPost, { errors: {} });Displaying Field Errors
Render messages from state.errors beneath each field so users see exactly what to fix.
<input name="title" />
{state.errors?.title && (
<p className="error">{state.errors.title[0]}</p>
)}Catching Unexpected Errors
Validation handles bad input, but database or network calls can still fail. Wrap them in try/catch and return a friendly message instead of leaking internals.
try {
await prisma.post.create({ data: parsed.data });
} catch (e) {
return { message: 'Database error. Please try again.' };
}Revalidating on Success
After a successful write, call revalidatePath so cached pages refetch and the new data appears immediately.
import { revalidatePath } from 'next/cache';
revalidatePath('/posts');
return { message: 'Post created!' };Never Trust the Client
Client-side validation improves UX but can be bypassed. Always re-validate on the server. The Server Action is your real security boundary.
Best Practices
Robust actions follow a pattern:
- Validate with Zod safeParse
- Return structured field errors
- Surface them with useActionState
- Wrap side effects in try/catch
- Revalidate on success
Quick Check
Test your validation knowledge.
Recap
You hardened your Server Actions:
- Validate
FormDatawith a Zod schema andsafeParse - Return structured
errorsand amessage - Track them with
useActionStateand render per field - Catch runtime failures and revalidate on success
Your forms now fail gracefully and stay secure.
Häufig gestellte Fragen
Ist die Lektion „Validierung und Fehlerbehandlung in Server Actions“ kostenlos?
Ja — der vollständige Text von „Validierung und Fehlerbehandlung in Server Actions“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Next.js 15 Fullstack (App Router + Server Actions)-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Next.js 15 Fullstack (App Router + Server Actions)-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Validierung und Fehlerbehandlung in Server Actions“?
Erstellen Sie robuste Server Actions, indem Sie Eingaben mit Zod validieren, strukturierte Fehlerzustände zurückgeben und diese mit useActionState in Ihren Formularen anzeigen Du übst Next.js 15 Fullstack (App Router + Server Actions) mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Next.js 15 Fullstack (App Router + Server Actions) zu starten?
Keine Vorkenntnisse erforderlich. Next.js 15 Fullstack (App Router + Server Actions) auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 3.
Wie lange dauert die Lektion „Validierung und Fehlerbehandlung in Server Actions“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Next.js 15 Fullstack (App Router + Server Actions)-Lektion Code schreiben und ausführen?
Ja. Jede Next.js 15 Fullstack (App Router + Server Actions)-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Optimistische UI-Aktualisierungen
- Datei-Uploads mit Actions
- Validierung und Fehlerbehandlung in Server Actions