Creați formulare elegante Next.js cu React Hook Form și Material UI

Material UI (MUI) este o bibliotecă de componente populară care implementează sistemul Google Material Design. Oferă o gamă largă de componente UI pre-construite pe care le puteți folosi pentru a crea interfețe funcționale și atractive vizual.

Chiar dacă este conceput pentru React, îi puteți extinde capacitățile la alte cadre din ecosistemul React, cum ar fi Next.js.

Noțiuni introductive cu React Hook Form și Material UI

React Hook Form este o bibliotecă populară care oferă o modalitate simplă și declarativă de a crea, gestiona și valida formulare.

Prin integrare UI-uri materiale Componente și stiluri ale interfeței de utilizare, puteți crea formulare arătoase, ușor de utilizat și puteți aplica un design consistent aplicației dvs. Next.js.

Pentru a începe, construiți un proiect Next.js local. În scopul acestui ghid, instalați cea mai recentă versiune a Next.js care folosește directorul App.

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

Apoi, instalați aceste pachete în proiectul dvs.:

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

Iată o previzualizare a ceea ce vei construi:

Puteți găsi codul acestui proiect în aceasta GitHub repertoriu.

Crearea și stilizarea formularelor

React Hook Form oferă o varietate de funcții utilitare, inclusiv useForm cârlig.

Acest cârlig eficientizează procesul de gestionare a stării formularelor, de validare a intrărilor și de trimitere, simplificând aspectele fundamentale ale gestionării formularelor.

Pentru a crea un formular care folosește acest cârlig, adăugați următorul cod într-un fișier nou, src/components/form.js.

Mai întâi, adăugați importurile necesare pentru pachetele React Hook Form și 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 oferă o colecție de componente UI gata de utilizare pe care le puteți personaliza în continuare prin trecerea elementelor de recuzită pentru stil.

Cu toate acestea, dacă doriți mai multă flexibilitate și control asupra designului interfeței de utilizator, puteți opta pentru a utiliza metoda de stil pentru a vă stila elementele de interfață cu proprietăți CSS. În acest caz, puteți stila componentele principale ale formularului: containerul principal, formularul în sine și câmpurile de text de intrare.

Chiar sub importuri, adăugați acest cod:

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

Menținerea unei baze de cod modulare este importantă în dezvoltare. Din acest motiv, în loc să grupați tot codul într-un singur fișier, ar trebui să definiți și să stilați componentele personalizate în fișiere separate.

În acest fel, puteți importa și utiliza cu ușurință aceste componente în diferite părți ale aplicației dvs., făcând codul mai organizat și mai ușor de întreținut.

Acum, definiți componenta funcțională:

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

În cele din urmă, importați această componentă în dvs app/page.js fişier. Ștergeți tot codul boilerplate Next.js și actualizați-l cu următoarele:

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



 </main>
 )
}

Porniți serverul de dezvoltare și ar trebui să vedeți un formular de bază cu două câmpuri de introducere și un buton de trimitere în browser.

Gestionarea validării formularelor

Forma arată grozav, dar încă nu face nimic. Pentru a-l face funcțional, trebuie să adăugați un cod de validare. useForm funcțiile utilitare cârlig vor fi utile atunci când gestionați și validarea intrărilor utilizatorului.

Mai întâi, definiți următoarea variabilă de stare pentru a gestiona starea curentă a formularului, în funcție de dacă un utilizator a furnizat acreditările corecte. Adăugați acest cod în interiorul componentei funcționale:

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

Apoi, creați o funcție de gestionare pentru a valida acreditările. Această funcție va simula o solicitare HTTP API care apare de obicei atunci când aplicațiile client interacționează cu un API de autentificare backend.

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

Adăugați o funcție de gestionare a evenimentelor onClick la componenta butonului - trecând-o ca prop - pentru a declanșa funcția onSubmit atunci când un utilizator face clic pe butonul de trimitere.

onClick={handleSubmit(onSubmit)}

Valoarea formStatus variabila de stare este importantă deoarece va determina modul în care oferiți feedback utilizatorului. Dacă utilizatorul introduce acreditările corecte, este posibil să afișați un mesaj de succes. Dacă ați avut alte pagini în aplicația dvs. Next.js, le puteți redirecționa către o altă pagină.

De asemenea, ar trebui să oferiți feedback adecvat dacă acreditările sunt greșite. Material UI oferă o componentă excelentă de feedback pe care o puteți folosi alături Tehnica de redare condiționată a lui React pentru a informa utilizatorul, pe baza valorii formStatus.

Pentru a face acest lucru, adăugați următorul cod chiar sub StyledForm eticheta de deschidere.

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

Acum, pentru a captura și valida intrarea utilizatorului, puteți utiliza Inregistreaza-te funcția pentru a înregistra câmpurile de introducere a formularului, a urmări valorile acestora și a specifica regulile de validare.

Această funcție preia mai multe argumente, inclusiv numele câmpului de intrare și un obiect de parametri de validare. Acest obiect specifică regulile de validare pentru câmpul de intrare, cum ar fi modelul specific și lungimea minimă.

Continuați și includeți următorul cod ca suport în numele de utilizator StyledTextField componentă.

{...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'
 },
})}

Acum, adăugați următorul obiect ca recuzită în parolaStyledTextField componentă.

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

Adăugați următorul cod sub câmpul de introducere a numelui de utilizator pentru a oferi feedback vizual cu privire la cerințele de introducere.

Acest cod va declanșa o alertă cu un mesaj de eroare pentru a informa utilizatorul despre cerințe, pentru a se asigura că corectează orice erori înainte de a trimite formularul.

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

În cele din urmă, includeți un cod similar chiar sub câmpul text de introducere a parolei:

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

Minunat! Cu aceste modificări, ar trebui să aveți o formă funcțională atrăgătoare din punct de vedere vizual, realizată cu React Hook Form și Material UI.

Îmbunătățiți-vă dezvoltarea Next.js cu biblioteci pe partea clientului

Material UI și React Hook Form sunt doar două exemple ale numeroaselor biblioteci excelente pe partea client pe care le puteți folosi pentru a accelera dezvoltarea front-end Next.js.

Bibliotecile la nivelul clientului oferă o varietate de caracteristici pregătite pentru producție și componente prefabricate care vă pot ajuta să construiți aplicații front-end mai bune, mai rapid și mai eficient.