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

Validering og feilhåndtering i Server Actions

Bygg robuste Server Actions ved å validere inndata med Zod, returnere strukturerte feiltilstander og vise dem i skjemaene med useActionState.

Leksjon 3 av 313 trinn

Validering og feilhåndtering i Server Actions er en gratis leksjon i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Dette er leksjon 3 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Next.js 15 fullstack (App Router + Server Actions), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 3 leksjoner.

Hvorfor validere Server Actions?

Server Actions mottar data direkte fra klienten, som aldri kan stoles på. Validering beskytter mot ugyldige inndata, injeksjon og brudd på forretningsregler før noe når databasen.

Lese FormData

En Server Action som er bundet til et skjema, mottar et FormData-objekt. De leser felter etter navn, men alle verdier kommer inn som strenger.

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

Definere et Zod-schema

Zod beskriver formen på og reglene for dataene. coerce konverterer strengverdier fra skjemaet til riktige typer automatisk.

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

Trygg parsing

Bruk safeParse i stedet for parse, slik at valideringsfeil returnerer et resultatobjekt i stedet for å utløse et unntak. Undersøk success for å velge videre flyt.

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

Returnere en strukturert feiltilstand

I stedet for å utløse et unntak kan De returnere et objekt som beskriver hva som gikk galt. Meldinger på feltnivå lar brukergrensesnittet vise feil ved siden av riktig inndatafelt.

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

Koble til useActionState

På klienten sporer useActionState verdien handlingen returnerer. Den gir Dem den nyeste state-verdien og en innpakket handling som De kan sende til skjemaet.

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

Vise feltfeil

Gjengi meldinger fra state.errors under hvert felt, slik at brukerne ser nøyaktig hva de må rette.

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

Fange uventede feil

Validering håndterer ugyldige inndata, men database- eller nettverkskall kan fortsatt mislykkes. Pakk dem inn i try/catch, og returner en brukervennlig melding i stedet for å lekke interne detaljer.

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

Revalidere ved suksess

Etter en vellykket skriving kaller De revalidatePath, slik at bufrede sider henter dataene på nytt og de nye dataene vises umiddelbart.

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

Stol aldri på klienten

Validering på klientsiden gir bedre brukeropplevelse, men kan omgås. Valider alltid på nytt på serveren. Serverhandlingen er den faktiske sikkerhetsgrensen.

Anbefalte fremgangsmåter

Robuste handlinger følger et mønster:

Valider med Zod safeParse
Returner strukturerte feltfeil
Vis dem med useActionState
Pakk bivirkninger inn i try/catch
Revalider ved suksess

Rask kontroll

Test kunnskapene Deres om validering.

Besvar den i den interaktive leksjonen

Oppsummering

De har sikret Server Actions:

Valider FormData med et Zod-skjema og safeParse
Returner strukturerte errors og en message
Spor dem med useActionState og gjengi dem per felt
Fang kjøretidsfeil og revalider ved suksess

Skjemaene Deres håndterer nå feil på en god måte og forblir sikre.

Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 22
Leksjoner: 88

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Validering og feilhåndtering i Server Actions» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 fullstack (App Router + Server Actions), inkludert «Validering og feilhåndtering i Server Actions», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 3 leksjoner.

Hva lærer jeg i «Validering og feilhåndtering i Server Actions»?

Bygg robuste Server Actions ved å validere inndata med Zod, returnere strukturerte feiltilstander og vise dem i skjemaene med useActionState. Du øver på Next.js 15 fullstack (App Router + Server Actions) med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Next.js 15 fullstack (App Router + Server Actions)?

Ingen tidligere erfaring er nødvendig. Next.js 15 fullstack (App Router + Server Actions) på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 3.

Hvor lang tid tar leksjonen «Validering og feilhåndtering i Server Actions»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Next.js 15 fullstack (App Router + Server Actions)-leksjonen?

Ja. Alle Next.js 15 fullstack (App Router + Server Actions)-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Optimistiske UI-oppdateringer
Filopplasting med actions
Validering og feilhåndtering i Server Actions

← Tilbake til Next.js 15 fullstack (App Router + Server Actions)