Cách xây dựng biểu mẫu Next.js đẹp bằng React Hook và Material UI

Bạn đang muốn xây dựng biểu mẫu Next.JS đẹp mắt. Vậy thì hãy thử làm điều đó với React Hook Form và Material UI.

Material UI (MUI) là một thư viện thành phần phổ biến, triển khai hệ thống Material Design của Google. Nó cung cấp một loạt thành phần UI được tạo trước mà bạn có thể dùng để thiết kế những giao diện đẹp mắt, đa năng và trực quan.

Mặc dù được thiết kế dành cho React, bạn có thể mở rộng chức năng của nó cho những framework khác trong hệ sinh thái của React, chẳng hạn như Next.js.

Hướng dẫn sử dụng React Hook Form và Material UI

React Hook Form là một thư viện phổ biến, mang tới cách khai báo đơn giản để tạo, quản lý và xác thực biểu mẫu.

Bằng cách tích hợp các thành phần và kiểu UI của Material UI, bạn có thể tạo những biểu mẫu đẹp mắt, dễ dùng và áp dụng thiết kế nhất quán cho ứng dụng Next.js.

Để bắt đầu, hãy tạo một dự án Next.js cục bộ. Ở ví dụ này, hãy cài đặt Next.js phiên bản mới nhất:

npx create-next-app@latest next-project --app

Tiếp theo, cài đặt những gói này trong dự án:

npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled

Kết quả như sau:

Tạo và định kiểu biểu mẫu

React Hook Form cung cấp một loạt các hàm tiện ích, bao gồm hook useForm.

Hook này sắp xếp gọn gàng quá trình xử lý trạng thái, xác thực đầu vào và gửi dữ liệu, đơn giản hóa các khía cạnh cơ bản trong quản lý biểu mẫu.

Để tạo biểu mẫu dùng hook này, thêm code sau vào file mới: src/components/form.js.

Đầu tiên, thêm các import cần thiết cho các gói MUI và Reack Hook Form:

"use client"
import React, {useState} from 'react';
import { useForm } from 'react-hook-form';
import { TextField, Button as MuiButton, Alert } from '@mui/material';
import { styled } from '@mui/system';

MUI cung cấp một bộ sưu tập các thành phần UI sẵn sàng sử dụng mà bạn có thể tùy biến sâu hơn bằng cách chuyển các thuộc tính tạo kiểu.

Tuy nhiên, nếu bạn muốn linh hoạt hơn và kiểm soát thiết kế giao diện người dùng, bạn có thể chọn sử dụng phương pháp được tạo kiểu để thiết kế từng thành phần UI bằng các thuộc tính CSS. Trong trường hợp này, bạn có thể tạo kiểu cho các thành phần chính của biểu mẫu: vùng chứa chính, chính biểu mẫu và các trường văn bản đầu vào.

Ngay bên dưới các import, thêm code sau:

const FormContainer = styled('div')({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100vh',
});

const StyledForm = styled('form')({
  width: '80%',
  maxWidth: '400px',
  padding: '20px',
  borderRadius: '10px',
  border: '2px solid #1E3A8A',
  boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.2)',
  backgroundColor: '#ffffff',
  textAlign: 'center',
});

const StyledTextField = styled(TextField)({
  marginBottom: '16px',
  width: '100%',
});

Duy trì codebase mô đun quan trọng trong lập trình. Vì lí do này, thay vì gộp tất cả mã vào một tệp duy nhất, bạn nên xác định và tạo kiểu các thành phần tùy chỉnh trong từng tệp riêng biệt.

Bằng cách này, bạn dễ dàng nhập và dùng những thành phần đó trên các phần khác nhau của ứng dụng, việc này khiến việc sắp xếp và bảo trì code dễ dàng hơn.

Giờ, xác định thành phần chức năng:

export default function Form() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  
  return (
    <>
      <FormContainer>
        <StyledForm>
          <StyledTextField
            label="Username"
            type="text"
          />
          <StyledTextField
            label="Password"
            type="password"
          />
          <MuiButton 
            type="submit" 
            variant="contained" 
            color="primary" 
            margin="5px" 
          > Submit </MuiButton>
        </StyledForm>
      </FormContainer>
    </>
  );
}

Cuối cùng, nhập thành phần này vào file app/page.js. Xóa toàn bộ code Next.js soạn sẵn và update nó như sau:

import Form from 'src/components/Form'

export default function Home() {
  return (
    <main >
      <Form />
    </main>
  )
}

Khởi động server lập trình, bạn sẽ thấy một biểu mẫu cơ bản với hai trường đầu vào và nút gửi trong trình duyệt.

Xử lý xác thực biểu mẫu

Biểu mẫu trông đẹp nhưng nó vẫn chưa làm được gì cả. Để nó có thể chạy, bạn cần thêm một số code xác thực. Các hàm tiện ích hook useForm sẽ hữu ích khi quản lý và xác thực các input của người dùng.

Đầu tiên, xác định biến trạng thái để quản lý trạng thái biểu mẫu hiện tại, phụ thuộc vào việc người dùng có cung cấp thông tin xác thực chính xác hay không. Thêm code này vào bên trong thành phần chức năng:

const [formStatus, setFormStatus] = useState({ success: false, error: '' });

Tiếp theo, tạo hàm xử lý để xác thực thông tin đăng nhập. Hàm này sẽ mô phỏng truy vấn HTTP API thường xảy ra khi các app client tương tác với API xác thực backend.

const onSubmit = (data) => {
    if (data.username === 'testuser' && data.password === 'password123') {
        setFormStatus({ success: true, error: '' });
    } else {
        setFormStatus({ success: false, error: 'Invalid username or password' });
    }
};

Thêm hàm xử lý sự kiện onClick vào thành phần nút bấm - chuyển nó dưới dạng thuộc tính - để kích hoạt hàm onSubmit khi người dùng click vào nút bấm gửi.

onClick={handleSubmit(onSubmit)}

Giá trị của biến trạng thái formStatus quan trọng bởi vì nó sẽ quyết định cách bạn cung cấp phản hồi tới người dùng. Nếu người dùng nhập thông tin xác thực chính xác, bạn có thể hiện thông báo thành công. Nếu có các trang khác trong ứng dụng Next.js, bạn có thể điều hướng chúng tới một trang khác.

Bạn cũng nên cung cấp phản hồi phù hợp nếu thông tin xác thực sai. Material UI cung cấp thành phần phản hồi tuyệt vời mà bạn có thể dùng cùng với kỹ thuật render theo điều kiện của React để thông báo cho người dùng, dựa trên giá trị của formStatus.

Để làm việc này, thêm code sau ngay bên dưới tag mở StyleForm.

{formStatus.success ? (
    <Alert severity="success">Form submitted successfully</Alert>
) : formStatus.error ? (
    <Alert severity="error">{formStatus.error}</Alert>
) : null}

Giờ, để nắm bắt và xác thực thông tin đầu vào của người dùng, bạn có thể sử dụng hàm register để đăng ký trường đầu vào của biểu mẫu, theo dõi các giá trị của nó và chỉ định quy tắc xác thực.

Hàm này nhận một số đối số, bao gồm tên của trường nhập và đối tượng các tham số xác thực. Đối tượng này chỉ định các quy tắc xác thực cho trường đầu vào như kiểu và độ dài tối thiểu.

Tiếp tục và bao gồm code sau như một thuộc tính trong tên người dùng, thành phần StyledTextField.

{...register('username', {
    required: 'Username required',
    pattern: {
        value: /^[a-zA-Z0-9_.-]*$/,
        message: 'Invalid characters used'
    },
    minLength: {
        value: 6,
        message: 'Username must be at least 6 characters'
    },
})}

Giờ, thêm đối tượng sau làm thuộc tính trong thành phần password StyledTextField.

{...register('password', {
    required: 'Password required',
    minLength: {
        value: 8,
        message: 'Password must be at least 8 characters'
    },
})}

Thêm code sau vào bên dưới trường đầu vào username để cung cấp phản hồi trực quan theo yêu cầu đầu vào.

Code này sẽ kích hoạt cảnh báo kèm theo thông báo lỗi để thông báo cho người dùng về các yêu cầu, nhằm đảm bảo họ sửa mọi lỗi trước khi gửi biểu mẫu.

{errors.username && <Alert severity="error">{errors.username.message}</Alert>}

Cuối cùng, bao gồm code tương tự ngay bên dưới trường nhập mật khẩu:

{errors.password && <Alert severity="error">{errors.password.message}</Alert>}

Thế là xong! Chúc các bạn thành công!