أنشئ نماذج Next.js أنيقة باستخدام نموذج React Hook وواجهة المستخدم المادية

أنشئ نماذج Next.js أنيقة باستخدام نموذج React Hook وواجهة المستخدم المادية
القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا، قد نكسب عمولة تابعة. اقرأ أكثر.

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





فيديو MUO لهذا اليوم قم بالتمرير للمتابعة مع المحتوى

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





لن يفتح pdf في الكروم

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

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





بالدمج واجهة المستخدم المادية مكونات وأنماط واجهة المستخدم، يمكنك إنشاء نماذج جيدة المظهر وسهلة الاستخدام، وتطبيق تصميم متسق على تطبيق Next.js الخاص بك.

للبدء، قم بدعم مشروع Next.js محليًا. لغرض هذا الدليل، قم بتثبيت أحدث إصدار من Next.js الذي يستخدم دليل التطبيقات .



5 جيل شجرة عائلة قالب يتفوق
 npx create-next-app@latest next-project --app

بعد ذلك، قم بتثبيت هذه الحزم في مشروعك:

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

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





 تم إنشاء نموذج Next.js باستخدام نموذج React Hook وواجهة المستخدم المادية التي تعمل على بيئة تطوير المضيف المحلي.