Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) · Pelajaran

Pengesahan dan Pengendalian Ralat dalam Tindakan Pelayan

Bina Tindakan Pelayan yang kukuh dengan mengesahkan input menggunakan Zod, memulangkan keadaan ralat berstruktur dan memaparkannya dalam borang anda dengan useActionState.

Pelajaran 3 daripada 313 langkah

Pengesahan dan Pengendalian Ralat dalam Tindakan Pelayan ialah pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) percuma di CoddyKit. Ini ialah pelajaran 3 daripada 3. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 3 pelajaran.

Sebab Mengesahkan Tindakan Pelayan

Tindakan Pelayan menerima data terus daripada klien, dan data itu tidak boleh dipercayai. Pengesahan melindungi daripada input yang cacat, suntikan dan peraturan perniagaan yang rosak sebelum apa-apa menyentuh pangkalan data Anda.

Membaca FormData

Tindakan Pelayan yang terikat pada borang menerima objek FormData. Anda membaca medan mengikut nama, tetapi setiap nilai tiba sebagai rentetan.

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

Menentukan Skema Zod

Zod mengisytiharkan bentuk dan peraturan data Anda. coerce menukar nilai borang rentetan kepada jenis yang betul secara automatik.

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

Penghuraian Selamat

Gunakan safeParse dan bukannya parse supaya kegagalan pengesahan mengembalikan objek hasil dan bukannya mencetuskan pengecualian. Periksa success untuk menentukan cabang.

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

Mengembalikan Keadaan Ralat Berstruktur

Daripada mencetuskan pengecualian, kembalikan objek yang menerangkan perkara yang tidak berlaku dengan betul. Mesej pada peringkat medan membolehkan UI memaparkan ralat di sebelah input yang betul.

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

Menyambungkan useActionState

Pada bahagian klien, useActionState menjejaki nilai yang dikembalikan oleh tindakan anda. Ia memberikan state terkini dan tindakan terbungkus untuk dihantar kepada borang.

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

Memaparkan Ralat Medan

Render mesej daripada state.errors di bawah setiap medan supaya pengguna dapat melihat perkara yang perlu dibaiki dengan tepat.

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

Menangkap Ralat Tidak Dijangka

Pengesahan mengendalikan input yang tidak sah, tetapi pangkalan data atau panggilan rangkaian masih boleh gagal. Bungkusnya dalam try/catch dan kembalikan mesej yang mudah difahami dan bukannya mendedahkan butiran dalaman.

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

Mengesahkan Semula Selepas Berjaya

Selepas penulisan berjaya, panggil revalidatePath supaya halaman cache mendapatkan data semula dan data baharu dipaparkan dengan serta-merta.

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

Jangan Percayai Klien

Pengesahan pada bahagian klien meningkatkan pengalaman pengguna tetapi boleh dipintas. Sentiasa sahkan semula pada pelayan. Server Action ialah sempadan keselamatan sebenar anda.

Amalan Terbaik

Tindakan yang teguh mengikut corak berikut:

Sahkan dengan Zod safeParse
Kembalikan ralat medan yang berstruktur
Paparkannya dengan useActionState
Bungkus kesan sampingan dalam try/catch
Sahkan semula selepas berjaya

Semakan Pantas

Uji pengetahuan anda tentang pengesahan.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah memperkukuh Server Actions anda:

Sahkan FormData dengan skema Zod dan safeParse
Kembalikan errors dan message yang berstruktur
Jejaki ralat tersebut dengan useActionState dan render mengikut medan
Tangkap kegagalan semasa pelaksanaan dan sahkan semula selepas berjaya

Borang anda kini mengendalikan kegagalan dengan baik dan kekal selamat.

Percuma untuk bermula

Pelajari TypeScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 22
Pelajaran: 88

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pengesahan dan Pengendalian Ralat dalam Tindakan Pelayan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), termasuk “Pengesahan dan Pengendalian Ralat dalam Tindakan Pelayan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 3 pelajaran.

Apakah yang akan saya pelajari dalam “Pengesahan dan Pengendalian Ralat dalam Tindakan Pelayan”?

Bina Tindakan Pelayan yang kukuh dengan mengesahkan input menggunakan Zod, memulangkan keadaan ralat berstruktur dan memaparkannya dalam borang anda dengan useActionState. Anda berlatih Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 3.

Berapa lamakah pelajaran “Pengesahan dan Pengendalian Ralat dalam Tindakan Pelayan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) ini?

Ya. Setiap pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Kemas Kini UI Optimistik
Muat Naik Fail dengan Tindakan
Pengesahan dan Pengendalian Ralat dalam Tindakan Pelayan

← Kembali ke Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)