Validasi dan Penanganan Kesalahan dalam Server Actions
Bangun Server Actions yang tangguh dengan memvalidasi masukan menggunakan Zod, mengembalikan status kesalahan terstruktur, dan menampilkannya di formulir menggunakan useActionState.
Validasi dan Penanganan Kesalahan dalam Server Actions adalah pelajaran Next.js 15 Fullstack (App Router + Server Actions) gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Next.js 15 Fullstack (App Router + Server Actions), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 3 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
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.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Validasi dan Penanganan Kesalahan dalam Server Actions” gratis?
Ya — teks lengkap “Validasi dan Penanganan Kesalahan dalam Server Actions” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack (App Router + Server Actions), upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 3 pelajaran total.
Apa yang akan aku pelajari di “Validasi dan Penanganan Kesalahan dalam Server Actions”?
Bangun Server Actions yang tangguh dengan memvalidasi masukan menggunakan Zod, mengembalikan status kesalahan terstruktur, dan menampilkannya di formulir menggunakan useActionState. Kamu berlatih Next.js 15 Fullstack (App Router + Server Actions) dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Next.js 15 Fullstack (App Router + Server Actions)?
Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack (App Router + Server Actions) di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 3.
Berapa lama pelajaran “Validasi dan Penanganan Kesalahan dalam Server Actions” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Next.js 15 Fullstack (App Router + Server Actions) ini?
Ya. Setiap pelajaran Next.js 15 Fullstack (App Router + Server Actions) menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Pembaruan UI Optimistis
- Unggah Berkas dengan Actions
- Validasi dan Penanganan Kesalahan dalam Server Actions