Next.js 15 fullstack (App Router + Server Actions) · Lektion

Validering och felhantering i Server Actions

Bygg robusta Server Actions genom att validera indata med Zod, returnera strukturerade feltillstånd och visa dem i formulären med useActionState.

Lektion 3 av 313 steg

Validering och felhantering i Server Actions är en gratis lektion i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Detta är lektion 3 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Next.js 15 fullstack (App Router + Server Actions), och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Next.js 15 fullstack (App Router + Server Actions) innehåller totalt 3 lektioner.

Varför validera Server Actions?

Server Actions tar emot data direkt från klienten, som aldrig kan betraktas som betrodd. Validering skyddar mot felaktig indata, injektioner och brutna affärsregler innan något når databasen.

Läsa FormData

En Server Action som är bunden till ett formulär tar emot ett FormData-objekt. Ni läser fält efter namn, men varje värde kommer in som en sträng.

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

Definiera ett Zod-schema

Zod beskriver formen på och reglerna för Era data. coerce konverterar strängvärden från formulär till rätt typer automatiskt.

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

Säker parsning

Använd safeParse i stället för parse så att valideringsfel returnerar ett resultatobjekt i stället för att kasta ett fel. Kontrollera success för att välja gren.

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

Returnera ett strukturerat feltillstånd

I stället för att kasta ett fel returnerar du ett objekt som beskriver vad som gick fel. Med meddelanden på fältnivå kan gränssnittet visa fel bredvid rätt inmatningsfält.

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

Koppla in useActionState

På klienten håller useActionState reda på värdet som din action returnerar. Den ger dig det senaste state samt en omsluten action som du skickar till formuläret.

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

Visa felfel på fältnivå

Rendera meddelanden från state.errors under varje fält så att användarna ser exakt vad som behöver åtgärdas.

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

Fånga oväntade fel

Validering hanterar felaktiga indata, men databas- eller nätverksanrop kan fortfarande misslyckas. Omslut dem i try/catch och returnera ett användarvänligt meddelande i stället för att läcka intern information.

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

Validera om vid lyckat resultat

Efter en lyckad skrivning anropar du revalidatePath så att cachade sidor hämtas på nytt och de nya uppgifterna visas direkt.

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

Lita aldrig på klienten

Validering på klientsidan förbättrar användarupplevelsen men kan kringgås. Validera alltid på nytt på servern. Server Action är din verkliga säkerhetsgräns.

Bästa praxis

Robusta actions följer ett mönster:

Validera med Zod safeParse
Returnera strukturerade felfel på fältnivå
Visa dem med useActionState
Omslut sidoeffekter i try/catch
Validera om vid lyckat resultat

Snabbtest

Testa dina kunskaper om validering.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du har gjort dina Server Actions robustare:

Validera FormData med ett Zod-schema och safeParse
Returnera strukturerade errors och ett message
Håll reda på dem med useActionState och rendera fel per fält
Fånga körningsfel och validera om vid lyckat resultat

Dina formulär hanterar nu fel på ett bra sätt och förblir säkra.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 22
Lektioner: 88

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Validering och felhantering i Server Actions” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Next.js 15 fullstack (App Router + Server Actions), inklusive ”Validering och felhantering i Server Actions”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Next.js 15 fullstack (App Router + Server Actions) innehåller totalt 3 lektioner.

Vad lär jag mig i ”Validering och felhantering i Server Actions”?

Bygg robusta Server Actions genom att validera indata med Zod, returnera strukturerade feltillstånd och visa dem i formulären med useActionState. Ni övar på Next.js 15 fullstack (App Router + Server Actions) med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Next.js 15 fullstack (App Router + Server Actions)?

Du behöver inga förkunskaper. Utbildningen i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 3.

Hur lång tid tar lektionen ”Validering och felhantering i Server Actions”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Next.js 15 fullstack (App Router + Server Actions)-lektionen?

Ja. Varje Next.js 15 fullstack (App Router + Server Actions)-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Optimistiska UI-uppdateringar
Filuppladdningar med Actions
Validering och felhantering i Server Actions

← Tillbaka till Next.js 15 fullstack (App Router + Server Actions)