با React Hook Form و Material UI فرم های شیک Next.js بسازید

با این ترکیب از کتابخانه های کاربردی و طراحی فرم های خود را مرتب کنید.

Material UI (MUI) یک کتابخانه مؤلفه محبوب است که سیستم طراحی متریال گوگل را پیاده سازی می کند. طیف گسترده ای از اجزای رابط کاربری از پیش ساخته شده را ارائه می دهد که می توانید از آنها برای ایجاد رابط های کاربردی و بصری جذاب استفاده کنید.

حتی اگر برای React طراحی شده است، می‌توانید قابلیت‌های آن را به سایر چارچوب‌های موجود در اکوسیستم React مانند Next.js گسترش دهید.

شروع کار با React Hook Form و Material UI

React Hook Form یک کتابخانه محبوب است که روشی ساده و شفاف برای ایجاد، مدیریت و اعتبارسنجی فرم ها ارائه می دهد.

با ادغام مولفه‌ها و سبک‌های رابط کاربری Material UI، می‌توانید فرم‌های خوش‌قیافه‌ای ایجاد کنید که استفاده از آن‌ها آسان است، و طراحی ثابتی را در برنامه Next.js خود اعمال کنید.

برای شروع، یک پروژه Next.js را به صورت محلی داربست کنید. برای اهداف این راهنما، آخرین نسخه Next.js را نصب کنید که از فهرست برنامه استفاده می کند.

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

بعد، این بسته ها را در پروژه خود نصب کنید:

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

در اینجا پیش نمایشی از آنچه می سازید آمده است:

می توانید کد این پروژه را در این مخزن GitHub پیدا کنید.

ایجاد و استایل دادن به فرم ها

React Hook Form انواع مختلفی از توابع کاربردی از جمله قلاب useForm را ارائه می دهد.

این قلاب فرآیند رسیدگی به حالت فرم، اعتبار سنجی ورودی و ارسال را ساده می کند و جنبه های اساسی مدیریت فرم را ساده می کند.

برای ایجاد فرمی که از این قلاب استفاده می کند، کد زیر را به فایل جدید src/components/form.js اضافه کنید.

ابتدا، واردات مورد نیاز را برای بسته‌های React Hook Form و MUI اضافه کنید:

"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 مجموعه‌ای از اجزای رابط کاربری آماده برای استفاده را ارائه می‌کند که می‌توانید با استفاده از لوازم استایل‌سازی بیشتر آن‌ها را سفارشی کنید.

با این وجود، اگر می‌خواهید انعطاف‌پذیری و کنترل بیشتری بر طراحی UI داشته باشید، می‌توانید از روش استایل برای استایل دادن به عناصر UI خود با ویژگی‌های CSS استفاده کنید. در این مورد، می توانید اجزای اصلی فرم را استایل کنید: محفظه اصلی، خود فرم و فیلدهای متن ورودی.

درست زیر واردات، این کد را اضافه کنید:

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%',
});

حفظ یک پایگاه کد مدولار در توسعه مهم است. به همین دلیل، به جای جمع کردن همه کدها در یک فایل، باید اجزای سفارشی را در فایل های جداگانه تعریف و استایل دهید.

به این ترتیب، می‌توانید به راحتی این مؤلفه‌ها را در بخش‌های مختلف برنامه خود وارد کرده و از آنها استفاده کنید و کد خود را سازماندهی‌تر و قابل نگهداری‌تر کنید.

حالا مولفه تابعی را تعریف کنید:

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>
    </>
  );
}

در نهایت، این مؤلفه را در فایل app/page.js خود وارد کنید. تمام کدهای boilerplate Next.js را حذف کنید و آن را با موارد زیر به روز کنید:

import Form from 'src/components/Form'

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

سرور توسعه را راه اندازی کنید و باید یک فرم اصلی با دو فیلد ورودی و یک دکمه ارسال را در مرورگر خود مشاهده کنید.

مدیریت فرم اعتبار سنجی

فرم عالی به نظر می رسد، اما هنوز هیچ کاری انجام نمی دهد. برای اینکه آن را کاربردی کنید، باید مقداری کد اعتبار سنجی اضافه کنید. توابع ابزار کاربردی useForm hook هنگام مدیریت و اعتبارسنجی ورودی های کاربر مفید خواهند بود.

ابتدا متغیر حالت زیر را برای مدیریت وضعیت فرم فعلی تعریف کنید، بسته به اینکه کاربر اعتبارنامه صحیحی را ارائه کرده است یا خیر. این کد را داخل کامپوننت عملکردی اضافه کنید:

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

در مرحله بعد، یک تابع handler برای تأیید اعتبار ایجاد کنید. این تابع یک درخواست HTTP API را شبیه‌سازی می‌کند که معمولاً زمانی اتفاق می‌افتد که برنامه‌های سرویس گیرنده با یک API احراز هویت Backend تعامل داشته باشند.

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

یک تابع کنترل کننده رویداد onClick را به مؤلفه دکمه اضافه کنید – آن را به عنوان یک پایه ارسال کنید – تا زمانی که کاربر روی دکمه ارسال کلیک می کند، عملکرد onSubmit فعال شود.

onClick={handleSubmit(onSubmit)}

مقدار متغیر حالت formStatus مهم است زیرا نحوه ارائه بازخورد به کاربر را تعیین می کند. اگر کاربر اعتبارنامه صحیح را وارد کند، ممکن است یک پیام موفقیت آمیز نشان دهید. اگر صفحات دیگری در برنامه Next.js خود داشتید، می توانید آنها را به صفحه دیگری هدایت کنید.

همچنین در صورت اشتباه بودن اعتبارنامه ها، باید بازخورد مناسب ارائه دهید. Material UI یک مولفه بازخورد عالی ارائه می دهد که می توانید در کنار تکنیک رندر شرطی React برای اطلاع دادن به کاربر بر اساس مقدار formStatus استفاده کنید.

برای انجام این کار، کد زیر را درست زیر تگ بازکننده StyledForm اضافه کنید.

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

اکنون، برای گرفتن و اعتبارسنجی ورودی کاربر، می‌توانید از تابع ثبت برای ثبت فیلدهای ورودی فرم، ردیابی مقادیر آن و تعیین قوانین اعتبارسنجی استفاده کنید.

این تابع چندین آرگومان از جمله نام فیلد ورودی و یک شیء پارامترهای اعتبارسنجی را می گیرد. این شی قوانین اعتبارسنجی فیلد ورودی مانند الگوی خاص و حداقل طول را مشخص می کند.

ادامه دهید و کد زیر را به عنوان یک پایه در کامپوننت نام کاربری 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'
    },
})}

اکنون، شی زیر را به عنوان پایه در مولفه رمز عبور StyledTextField اضافه کنید.

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

برای ارائه بازخورد بصری در مورد نیازهای ورودی، کد زیر را در زیر قسمت ورودی نام کاربری اضافه کنید.

این کد یک هشدار با یک پیام خطا را برای اطلاع کاربر از شرایط مورد نیاز راه اندازی می کند تا اطمینان حاصل شود که قبل از ارسال فرم هرگونه خطا را تصحیح می کند.

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

در نهایت، کد مشابه را درست در زیر فیلد متنی ورودی رمز عبور وارد کنید:

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

عالی! با این تغییرات، شما باید یک فرم بصری جذاب و کاربردی داشته باشید که با React Hook Form و Material UI ساخته شده است.

توسعه Next.js خود را با کتابخانه های سمت مشتری افزایش دهید

Material UI و React Hook Form تنها دو نمونه از بسیاری از کتابخانه های عالی سمت کلاینت هستند که می توانید برای سرعت بخشیدن به توسعه Frontend Next.js استفاده کنید.

کتابخانه های سمت سرویس گیرنده انواع ویژگی های آماده تولید و اجزای از پیش ساخته شده را ارائه می دهند که می تواند به شما کمک کند تا برنامه های جلویی بهتری را سریعتر و کارآمدتر بسازید.

منبع مقاله