Xử lý biểu mẫu (form) là một phần không thể thiếu trong các ứng dụng web. Với Next.js – đặc biệt là từ phiên bản 13 trở đi – ta có nhiều cách tiếp cận khác nhau để xử lý form. Mỗi cách đều có ưu, nhược điểm riêng và phù hợp với từng tình huống cụ thể. Bài viết này sẽ phân tích ba cách phổ biến để xử lý form trong Next.js: sử dụng useState, Server Actions, và thư viện react-hook-form.

1. Sử dụng useState và onSubmit: đơn giản, dễ hiểu

Đây là cách tiếp cận quen thuộc trong React, dùng useState để lưu trạng thái của các trường dữ liệu và xử lý submit bằng sự kiện onSubmit.

Ưu điểm:

• Cách tiếp cận cơ bản, dễ hiểu với người mới bắt đầu.
• Không cần cài thêm thư viện.

Nhược điểm:

• Mỗi thay đổi trên input đều gây re-render.
• Không phù hợp với form có nhiều trường và yêu cầu kiểm tra dữ liệu phức tạp.

Khi nào nên dùng:

• Với các form đơn giản, ít trường dữ liệu, không yêu cầu validate nâng cao.

2. Sử dụng Server Actions: đơn giản hóa backend, bảo mật tốt hơn

Từ Next.js 14, bạn có thể xử lý form mà không cần gọi API thủ công. Chỉ cần khai báo một hàm xử lý ở phía server và truyền trực tiếp vào prop action của <form>.

File app/form/actions.tsFile app/form/page.tsxƯu điểm

• Không cần viết API riêng – logic xử lý nằm trong cùng một dự án.
• Bảo mật tốt hơn vì dữ liệu gửi trực tiếp đến server.

Nhược điểm

• Chỉ hoạt động trên Next.js 14 trở lên.
• Ít linh hoạt hơn khi cần xử lý nhiều trạng thái client.

Khi nào nên dùng

• Khi bạn muốn làm việc trực tiếp với dữ liệu trên server (ví dụ: lưu vào database) mà không muốn viết nhiều tầng API trung gian.

3. Sử dụng react-hook-form: tối ưu hiệu suất và validate mạnh mẽ

Thư viện react-hook-form giúp giảm thiểu re-render, tăng hiệu suất và cung cấp nhiều công cụ để kiểm tra dữ liệu đầu vào.

Cài đặt:

npm install react-hook-form

Ví dụ:Ưu điểm

• Giảm re-render, hiệu suất cao.
• Hỗ trợ validate chi tiết và linh hoạt.
• Dễ mở rộng với nhiều trường dữ liệu.

Nhược điểm

• Cần cài đặt thư viện ngoài.
• Cú pháp ban đầu hơi khác so với cách truyền thống.

Khi nào nên dùng

• Khi làm việc với form phức tạp, có nhiều trường nhập và cần kiểm tra dữ liệu nghiêm ngặt.

So sánh tổng quan

Cách tiếp cận	Ưu điểm	Nhược điểm	Phù hợp khi…
useState + onSubmit	Dễ học, không cần thư viện	Re-render nhiều, không tối ưu	Form đơn giản, ít trường
react-hook-form	Hiệu suất cao, kiểm tra dữ liệu mạnh	Cần cài thư viện	Form có nhiều trường, cần tối ưu hiệu suất
Server Actions	Không cần API riêng, bảo mật tốt	Chỉ dùng với Next.js 14+, thiếu linh hoạt	Làm việc trực tiếp với server/database

Giảng viên Nguyễn Quang Hùng
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM