Δημιουργήστε κομψές φόρμες Next.js με React Hook Form και Material UI

Δημιουργήστε κομψές φόρμες Next.js με React Hook Form και Material UI
Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

Το Material UI (MUI) είναι μια δημοφιλής βιβλιοθήκη στοιχείων που εφαρμόζει το σύστημα Σχεδιασμού Υλικού της Google. Παρέχει ένα ευρύ φάσμα προ-ενσωματωμένων στοιχείων διεπαφής χρήστη που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε λειτουργικές και οπτικά ελκυστικές διεπαφές.





ιστορία του σπιτιού κατά διεύθυνση δωρεάν
MUO Το βίντεο της ημέρας ΚΥΛΙΣΤΕ ΓΙΑ ΝΑ ΣΥΝΕΧΙΣΕΤΕ ΜΕ ΠΕΡΙΕΧΟΜΕΝΟ

Παρόλο που έχει σχεδιαστεί για το React, μπορείτε να επεκτείνετε τις δυνατότητές του σε άλλα πλαίσια εντός του οικοσυστήματος του React, όπως το Next.js.





Ξεκινώντας με το React Hook Form and Material UI

React Hook Form είναι μια δημοφιλής βιβλιοθήκη που παρέχει έναν απλό και δηλωτικό τρόπο δημιουργίας, διαχείρισης και επικύρωσης φορμών.





Με την ενσωμάτωση Διεπαφή χρήστη υλικού Τα στοιχεία και τα στυλ διεπαφής χρήστη, μπορείτε να δημιουργήσετε όμορφες φόρμες που είναι εύχρηστες και να εφαρμόσετε μια συνεπή σχεδίαση στην εφαρμογή 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

Ακολουθεί μια προεπισκόπηση του τι θα δημιουργήσετε:





 Η φόρμα Next.js δημιουργήθηκε με React Hook Form και Material UI που εκτελείται σε περιβάλλον ανάπτυξης τοπικού κεντρικού υπολογιστή.