Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) · Les

Validatie en foutafhandeling in Server Actions

Bouw robuuste Server Actions door invoer met Zod te valideren, gestructureerde foutstatussen terug te geven en deze met useActionState in uw formulieren te tonen.

Les 3 van 313 stappen

Validatie en foutafhandeling in Server Actions is een gratis Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)-les op CoddyKit. Dit is les 3 van 3. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Fullstackontwikkeling met Next.js 15 (App Router + Server Actions). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 3 lessen.

Waarom Server Actions valideren?

Server Actions ontvangen gegevens rechtstreeks van de client, die nooit kan worden vertrouwd. Validatie beschermt tegen ongeldige invoer, injecties en geschonden bedrijfsregels voordat er iets in je database terechtkomt.

FormData lezen

Een Server Action die aan een formulier is gekoppeld, ontvangt een FormData-object. Je leest velden op naam, maar elke waarde komt binnen als een tekenreeks.

'use server';
export async function createPost(formData: FormData) {
  const title = formData.get('title');
  const views = formData.get('views');
}

Een Zod-schema definiëren

Zod beschrijft de vorm en regels van je gegevens. coerce zet tekenreekswaarden uit formulieren automatisch om naar de juiste typen.

import { z } from 'zod';
const PostSchema = z.object({
  title: z.string().min(3, 'Title too short'),
  views: z.coerce.number().int().min(0)
});

Veilig parseren

Gebruik safeParse in plaats van parse, zodat validatiefouten een resultaatobject retourneren in plaats van een uitzondering te veroorzaken. Controleer success om een vertakking te maken.

const parsed = PostSchema.safeParse({
  title: formData.get('title'),
  views: formData.get('views')
});
if (!parsed.success) {
  // handle errors
}

Een gestructureerde foutstatus retourneren

Retourneer in plaats van een uitzondering te veroorzaken een object dat beschrijft wat er mis is gegaan. Met berichten op veldniveau kan de gebruikersinterface fouten naast het juiste invoerveld tonen.

if (!parsed.success) {
  return {
    errors: parsed.error.flatten().fieldErrors,
    message: 'Validation failed'
  };
}

useActionState koppelen

Op de client houdt useActionState de waarde bij die je actie retourneert. Je krijgt de meest recente state en een omwikkelde actie die je aan het formulier kunt doorgeven.

'use client';
const [state, formAction] = useActionState(createPost, { errors: {} });

Fouten bij velden weergeven

Geef de berichten uit state.errors onder elk veld weer, zodat gebruikers precies zien wat ze moeten herstellen.

<input name="title" />
{state.errors?.title && (
  <p className="error">{state.errors.title[0]}</p>
)}

Onverwachte fouten opvangen

Validatie handelt ongeldige invoer af, maar aanroepen van databases of netwerken kunnen nog steeds mislukken. Omwikkel ze met try/catch en retourneer een gebruiksvriendelijk bericht in plaats van interne details naar buiten te brengen.

try {
  await prisma.post.create({ data: parsed.data });
} catch (e) {
  return { message: 'Database error. Please try again.' };
}

Opnieuw valideren bij succes

Roep na een geslaagde schrijfbewerking revalidatePath aan, zodat pagina's uit de cache opnieuw worden opgehaald en de nieuwe gegevens direct verschijnen.

import { revalidatePath } from 'next/cache';
revalidatePath('/posts');
return { message: 'Post created!' };

Vertrouw de client nooit

Validatie aan de clientzijde verbetert de gebruikerservaring, maar kan worden omzeild. Valideer altijd opnieuw op de server. De Server Action is je echte beveiligingsgrens.

Aanbevolen werkwijzen

Robuuste acties volgen een vast patroon:

Valideer met Zod safeParse
Retourneer gestructureerde fouten per veld
Toon ze met useActionState
Omwikkel bijwerkingen met try/catch
Valideer opnieuw bij succes

Korte controle

Test je kennis van validatie.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt je Server Actions robuuster gemaakt:

Valideer FormData met een Zod-schema en safeParse
Retourneer gestructureerde errors en een message
Houd ze bij met useActionState en geef ze per veld weer
Vang fouten tijdens runtime op en valideer opnieuw bij succes

Je formulieren falen nu netjes en blijven veilig.

Gratis beginnen

Leer TypeScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 22
Lessen: 88

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Validatie en foutafhandeling in Server Actions” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackontwikkeling met Next.js 15 (App Router + Server Actions), waaronder “Validatie en foutafhandeling in Server Actions”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 3 lessen.

Wat leer ik in “Validatie en foutafhandeling in Server Actions”?

Bouw robuuste Server Actions door invoer met Zod te valideren, gestructureerde foutstatussen terug te geven en deze met useActionState in uw formulieren te tonen. Je oefent met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) te beginnen?

Ervaring vooraf is niet nodig. Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 3.

Hoe lang duurt de les “Validatie en foutafhandeling in Server Actions”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)?

Ja. Elke les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

Optimistische UI-updates
Bestanden uploaden met Actions
Validatie en foutafhandeling in Server Actions

← Terug naar Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)