Các cách thức sử dụng form trong Next.js

Trong phát triển web, form là thành phần quan trọng giúp thu thập dữ liệu từ người dùng. Khi làm việc với Next.js, bạn có nhiều cách để xử lý form, từ phương pháp truyền thống đến các thư viện hiện đại tối ưu hiệu suất. Bài này sẽ hướng dẫn cách sử dụng form trong Next.js 15 với nhiều phương pháp khác nhau, từ đơn giản đến nâng cao

Sử dụng HTML Form cơ bản

Cách đơn giản nhất là sử dụng thẻ <form> và xử lý dữ liệu trong một API route của NextHS. Với cách này , bạn chỉ định route api trong thuộc tính action của form và rồi tạo route api trong Next là xong. Mời xem cách thực hiện như sau:

Tạo form đơn giản trong trang Next.js:

//app/BasicForm/page.tsx
export default function BasicForm() {
return (
<form action=”/api/form-handler” method=”POST” className=”w-[300px]”>
  <input type=”text” name=”username” placeholder=”Nhập tên” className=”border” />
  <button type=”submit” className=”bg-gray-300 px-3″>Gửi</button>
</form>
)}

Tạo API route để xử lý dữ liệu:

//app/api/form-handler/route.ts
import { NextRequest, NextResponse } from “next/server”;
export async function POST(req: NextRequest) {
  const formData = await req.formData();
  const username = formData.get(“username”);
  return NextResponse.json({ message: `Xin chào, ${username}!` });
}

Cách này sử dụng hành động submit mặc định của trình duyệt, gửi dữ liệu đến API để xử lý

Sử dụng state để kiểm soát form

Cách thứ hai là sử dụng useState – một hook rất thường dủng trong React để cập nhật giá trị form theo thời gian thực. Mời xem code gợi ý sau đây:

// app/ControlledForm/page.tsx
“use client”;
import { useState } from “react”;
export default function ControlledForm() {
  const [name, setName] = useState(“”);
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    alert(`Tên đã nhập: ${name}`);
  };
  return (
  <form onSubmit={handleSubmit} >
    <input type=”text” placeholder=”Nhập tên” className=”border”
    value={name} onChange={(e) => setName(e.target.value)} />
    {name}
    <button type=”submit” className=”bg-gray-300 px-3 block”> Gửi </button>
  </form>
)}

Cách này giúp cập nhật giá trị user nhập ngay khi được nhập nhưng sẽ gây re render component mỗi khi user nhập dữ liệu vào form.

Sử dụng server action trong Next.JS

Next.js 15 hỗ trợ server action giúp xử lý dữ liệu khi form submit rất dễ dàng. Server Action là những hàm bạn định nghĩa sẵn và chạy khi form submit. Xử lý kiểu này rất đơn giản. Mời xem ví dụ sau:

Tạo form: app/ServerActionForm/page.tsx

Quảng cáo

// app/ServerActionForm/page.tsx
import handleSubmit from “../handleSubmit”
export default function ServerActionForm() {
return (
<form action={handleSubmit}>
    <input type=”text” name=”username” placeholder=”Nhập tên” />
    <button type=”submit”>Gửi</button>
</form>
)}  

Xử lý dữ liệu trên server:

// app/handleSubmit.ts
“use server”;
export default async function handleSubmit(formData: FormData) {
  const username = formData.get(“username”);
  console.log(“Dữ liệu:”, username);
}

Đây là cách tiếp cận tối ưu trong Next.js 15.

Sử dụng useRef để quản lý form (tránh re-render)

Cách thứ tư là sử dụng useRef . Cách này giúp truy cập trực tiếp vào DOM mà không gây re-render khi nhập dữ liệu. Phù hợp khi bạn không cần kiểm tra dữ liệu trong quá trình nhập.

// app/RefForm/page.tsx
“use client”;
import { useRef } from “react”;
export default function RefForm() {
  const inputRef = useRef<HTMLInputElement>(null);
const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault();
  alert(`Tên đã nhập: ${inputRef.current?.value}`);
};
return (
<form onSubmit={handleSubmit}>
    <input ref={inputRef} type=”text” placeholder=”Nhập tên”
    className= “border” />
    <button type=”submit”
    className=”bg-gray-300 px-3 block”> Gửi
    </button>
</form>
)}

Ưu điểm & nhược điểm

• Tránh re – render không cần thiết (không giống useState).
• Dễ dùng cho form nhỏ, không cần kiểm tra dữ liệu khi nhập.
• Không thể kiểm soát dữ liệu theo thời gian thực.
• Không phù hợp với form lớn hoặc có nhiều logic.

Sử dụng formik

Module Formik giúp quản lý form hiệu quả hơn, đặc biệt là khi có nhiều field. Muốn dùng thì cài thêm vào dự án với lệnh npm install formik yup

Tạo file app/FormikForm/page.tsx

// app/FormikForm/page.tsx
“use client”;
import { Formik, Form, Field, ErrorMessage } from “formik”;
import * as Yup from “yup”;
const validationSchema = Yup.object({
  username: Yup.string().required(“Tên không được để trống”),
});
export default function FormikForm() {
  return (
  <Formik
    initialValues={{ username: “” }}
    validationSchema={validationSchema}
    onSubmit={(values) => alert(`Tên: ${values.username}`)} >
    {() => (
    <Form>
      <Field type=”text” name=”username”
      placeholder=”Nhập tên” className=”border” />
      <ErrorMessage name=”username” component=”div”
      className=”text-red-500 text-[12px]” />
      <button type=”submit”
      className=”bg-gray-300 px-3 block “>Gửi
      </button>
    </Form>
  )}
  </Formik>
)}

Cách này giúp kiểm tra dữ liệu đầu vào dễ dàng.

Sử dụng react hook form

React Hook Form nhẹ hơn Formik và tối ưu hiệu suất. Muốn dùng thì cài đặt module với lệnh npm install react-hook-form

Tạo file: app/HookForm/page.tsx

// app/HookForm/page.tsx
“use client”;
import { useForm } from “react-hook-form”;
export default function HookForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data: any) => alert(`Tên: ${data.username}`);
  return (
  <form onSubmit={handleSubmit(onSubmit)}>
  <input {…register(“username”, { required: true })}
  placeholder=”Nhập tên” className=”border” />
  <button type=”submit”  className=”bg-gray-300 px-3 block”>
  Gửi
  </button>
  </form>
)}

React Hook Form hoạt động nhanh và hỗ trợ dễ dàng.

So sánh các cách thức

Tóm lại , sử dụng form trong Next.js phong phú, nhiều cách từ cách truyền thống, dùng các hook như usestate, useref, hoặc dùng Server Action…. Bạn có thể linh hoạt sử dụng tùy nhu cầu, sở thích và mức độ phức tạp của form…Xem thêm các link này nếu muốn tìm hiểu thêm: 

https://nextjs.org/docs/app/api-reference/components/form, 

https://nextjs.org/docs/pages/building-your-application/data-fetching/forms-and-mutations

Giảng viên Nguyễn Văn Long
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM

Hỗ trợ tư vấn và giải đáp thông tin tuyển sinh FPT Polytechnic

Zalo

Góp ý

Gọi tổng đài ×

HOTLINE HỖ TRỢ TƯ VẤN THÔNG TIN TUYỂN SINH

Gọi đến 0981725836 để tư vấn về ngành học, cách thức xét tuyển tại Trường

Hoặc Zalo Đóng

Gửi thông tin tư vấn ×

Các cách thức sử dụng form trong Next.js

Trong phát triển web, form là thành phần quan trọng giúp thu thập dữ liệu từ người dùng. Khi làm việc với Next.js, bạn có nhiều cách để xử lý form, từ phương pháp truyền thống đến các thư viện hiện đại...

Địa điểm học Hà Nội Hải Phòng Hà Nam Thanh Hoá TP HCM Quy Nhơn Đà Nẵng Tây Nguyên Cần Thơ Đồng Nai Thái Nguyên Huế Hệ 9+ Vĩnh Phúc

TRƯỜNG CAO ĐẲNG FPT POLYTECHNIC - Tuyển sinh tại 13 cơ sở: Hà Nội, Hồ Chí Minh, Cần Thơ, Đà Nẵng, Tây Nguyên, Hà Nam, Hải Phòng, Thanh Hoá, Thái Nguyên, Quy Nhơn, Đồng Nai, Huế, Vĩnh Phúc. Để lại thông tin để được hỗ trợ thông tin quan trọng nhất về tuyến sinh: Thời gian đào tạo, học phí, ngành học, học bổng,....

Gửi thông tin