Server Actions trong Next.js là gì? Làm thế nào để xử lý form submission và validate dữ liệu an toàn với Server Actions?

Question

Accepted Answer

Khái niệm Server Actions Server Actions là các hàm bất đồng bộ (async functions) được thực thi trên server. Chúng có thể được gọi từ cả Server Components và Client Components để xử lý các thao tác ghi dữ liệu (mutations) như thêm, sửa, xóa dữ liệu trong database mà không cần phải tự mình tạo các API Route riêng biệt (/api/...). Xử lý Form Submission và Validate Để xử lý form an toàn, chúng ta kết hợp Server Actions với các thư viện validation như Zod và hook useFormStatus hoặc useActionState (trước đây là useFormState) của React. Ví dụ thực tế // app/actions.ts 'use server'; import { z } from 'zod'; const schema = z.object({ email: z.string().email({ message: 'Email không hợp lệ' }), }); ' export async function createUser(prevState: any, formData: FormData) { const validatedFields = schema.safeParse({ email: formData.get('email'), }); if (!validatedFields.success) { return { errors: validatedFields.error.flatten().fieldErrors, message: 'Vui lòng kiểm tra lại thông tin.', }; } // Thực hiện lưu vào database ở đây return { message: 'Đăng ký thành công!' }; } Sử dụng trong Client Component // app/contact/page.tsx 'use client'; import { useActionState } from 'react'; import { createUser } from '@/app/actions'; const initialState = { message: '', errors: {}, }; export default function SignupForm() { const [state, formAction] = useActionState(createUser, initialState); return ( ); } Lưu ý thực chiến Luôn luôn kiểm tra xác thực (authentication) và phân quyền (authorization) bên trong Server Actions trước khi thực hiện các thay đổi nhạy cảm trên database.

Server Actions trong Next.js là gì? Làm thế nào để xử lý form submission và validate dữ liệu an toàn với Server Actions?

Khái niệm Server Actions

Khóa học Next.js App Router Chuyên Sâu

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi next.js liên quan cùng chủ đề