قم بترتيب النماذج الخاصة بك مع هذه المجموعة من المكتبات الوظيفية ومكتبات التصميم.

Material UI (MUI) هي مكتبة مكونات شائعة تنفذ نظام التصميم متعدد الأبعاد من Google. فهو يوفر مجموعة واسعة من مكونات واجهة المستخدم المعدة مسبقًا والتي يمكنك استخدامها لإنشاء واجهات وظيفية وجذابة بصريًا.

على الرغم من أنه مصمم لـ React، يمكنك توسيع قدراته لتشمل أطر عمل أخرى ضمن النظام البيئي لـ React، مثل Next.js.

البدء باستخدام نموذج React Hook وواجهة المستخدم المادية

رد فعل هوك النموذج هي مكتبة شائعة توفر طريقة بسيطة ومصرحية لإنشاء النماذج وإدارتها والتحقق من صحتها.

بالدمج واجهة المستخدم المادية مكونات وأنماط واجهة المستخدم، يمكنك إنشاء نماذج جيدة المظهر وسهلة الاستخدام، وتطبيق تصميم متسق على تطبيق 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

فيما يلي معاينة لما ستبنيه:

instagram viewer

يمكنك العثور على رمز هذا المشروع في هذا جيثب مخزن.

إنشاء وتصميم النماذج

يوفر 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 مجموعة من مكونات واجهة المستخدم الجاهزة للاستخدام والتي يمكنك تخصيصها بشكل أكبر من خلال تمرير دعائم التصميم.

ومع ذلك، إذا كنت تريد مزيدًا من المرونة والتحكم في تصميم واجهة المستخدم، فيمكنك اختيار استخدام الطريقة المصممة لتصميم عناصر واجهة المستخدم الخاصة بك باستخدام خصائص 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%',
});

يعد الحفاظ على قاعدة التعليمات البرمجية المعيارية أمرًا مهمًا في التطوير. لهذا السبب، بدلاً من تجميع كل التعليمات البرمجية في ملف واحد، يجب عليك تحديد المكونات المخصصة وتصميمها في ملفات منفصلة.

بهذه الطريقة، يمكنك بسهولة استيراد هذه المكونات واستخدامها عبر أجزاء مختلفة من تطبيقك، مما يجعل التعليمات البرمجية الخاصة بك أكثر تنظيمًا وقابلية للصيانة.

الآن، حدد المكون الوظيفي:

exportdefaultfunctionForm() {
const { register, handleSubmit, formState: { errors } } = useForm();

return (
 <>


 label="Username"
 type="text"
 />
 label="Password"
 type="password"
 />
 type="submit"
 variant="contained"
 color="primary"
 margin="5px"
 > Submit </MuiButton>
 </StyledForm>
 </FormContainer>
 </>
 );
}

أخيرًا، قم باستيراد هذا المكون إلى ملفك التطبيق/page.js ملف. احذف كافة التعليمات البرمجية النمطية Next.js وقم بتحديثها بما يلي:

import Form from'src/components/Form'
exportdefaultfunctionHome() {
return (



 </main>
 )
}

ابدأ تشغيل خادم التطوير، ومن المفترض أن ترى نموذجًا أساسيًا يحتوي على حقلي إدخال وزر إرسال في متصفحك.

التعامل مع التحقق من صحة النموذج

يبدو النموذج رائعًا، لكنه لا يفعل أي شيء حتى الآن. لجعله فعالاً، تحتاج إلى إضافة بعض رموز التحقق من الصحة. useForm ستكون وظائف الخطاف مفيدة عند إدارة و التحقق من صحة مدخلات المستخدم.

أولاً، حدد متغير الحالة التالي لإدارة حالة النموذج الحالية، اعتمادًا على ما إذا كان المستخدم قد قدم بيانات الاعتماد الصحيحة. أضف هذا الكود داخل المكون الوظيفي:

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

بعد ذلك، قم بإنشاء وظيفة معالج للتحقق من صحة بيانات الاعتماد. ستقوم هذه الوظيفة بمحاكاة طلب HTTP API الذي يحدث عادةً عندما تتفاعل تطبيقات العميل مع واجهة برمجة تطبيقات مصادقة الواجهة الخلفية.

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، فيمكنك إعادة توجيهها إلى صفحة مختلفة.

يجب عليك أيضًا تقديم التعليقات المناسبة إذا كانت بيانات الاعتماد خاطئة. توفر واجهة المستخدم المادية مكونًا رائعًا للتعليقات التي يمكنك استخدامها جنبًا إلى جنب تقنية العرض الشرطي في React لإعلام المستخدم، بناءً على قيمة formStatus.

للقيام بذلك، قم بإضافة التعليمات البرمجية التالية مباشرة أسفل StyledForm علامة الافتتاح.

{formStatus.success? (
"success">Form submitted successfully</Alert>
): formStatus.error? (
"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 && <Alertseverity="error">{errors.username.message}Alert>}

وأخيرًا، قم بتضمين رمز مشابه مباشرةً أسفل حقل نص إدخال كلمة المرور:

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

مذهل! مع هذه التغييرات، يجب أن يكون لديك نموذج وظيفي وجذاب بصريًا مصنوع باستخدام React Hook Form وMaterial UI.

عزز تطوير Next.js الخاص بك باستخدام المكتبات من جانب العميل

تعد واجهة المستخدم المادية ونموذج React Hook مجرد مثالين على العديد من مكتبات العميل الرائعة التي يمكنك استخدامها لتسريع عملية تطوير الواجهة الأمامية لـ Next.js.

توفر المكتبات من جانب العميل مجموعة متنوعة من الميزات الجاهزة للإنتاج والمكونات المعدة مسبقًا والتي يمكن أن تساعدك في إنشاء تطبيقات أمامية أفضل بسرعة وكفاءة أكبر.