Izradite elegantne Next.js obrasce s React Hook obrascima i korisničkim sučeljem materijala

Material UI (MUI) je popularna biblioteka komponenti koja implementira Googleov sustav Material Design. Omogućuje širok raspon unaprijed izgrađenih komponenti korisničkog sučelja koje možete koristiti za stvaranje funkcionalnih i vizualno privlačnih sučelja.

Iako je dizajniran za React, možete proširiti njegove mogućnosti na druge okvire unutar Reactovog ekosustava, poput Next.js.

Početak rada s React Hook obrascem i sučeljem materijala

React Hook obrazac je popularna biblioteka koja pruža jednostavan i deklarativan način za stvaranje, upravljanje i provjeru valjanosti obrazaca.

Integriranjem Materijalna sučelja Komponente i stilove korisničkog sučelja, možete stvoriti zgodne oblike koji su jednostavni za korištenje i primijeniti dosljedan dizajn na svoju Next.js aplikaciju.

Za početak, lokalno izradite Next.js projekt. U svrhu ovog vodiča, instalirajte najnovija verzija Next.js koja koristi imenik aplikacija.

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

Zatim instalirajte ove pakete u svoj projekt:

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

Evo pregleda onoga što ćete izgraditi:

Kôd ovog projekta možete pronaći ovdje GitHub spremište.

Stvaranje i stiliziranje obrazaca

React Hook Form pruža razne uslužne funkcije, uključujući useForm kuka.

Ova kuka pojednostavljuje proces rukovanja stanjem obrasca, provjerom valjanosti unosa i podnošenjem, pojednostavljujući temeljne aspekte upravljanja obrascima.

Da biste stvorili obrazac koji koristi ovu kuku, dodajte sljedeći kod u novu datoteku, src/components/form.js.

Prvo dodajte potrebne uvoze za React Hook Form i MUI pakete:

"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 pruža zbirku komponenti korisničkog sučelja spremnih za korištenje koje možete dodatno prilagoditi prosljeđivanjem stilskih rekvizita.

Unatoč tome, ako želite više fleksibilnosti i kontrole nad dizajnom korisničkog sučelja, možete se odlučiti za korištenje stilizirane metode za stiliziranje svojih elemenata korisničkog sučelja s CSS svojstvima. U ovom slučaju možete stilizirati glavne komponente obrasca: glavni spremnik, sam obrazac i polja za unos teksta.

Odmah ispod uvoza dodajte ovaj kod:

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

Održavanje modularne baze kodova važno je u razvoju. Iz tog razloga, umjesto da sav kod grupirate u jednu datoteku, trebali biste definirati i stilizirati prilagođene komponente u zasebnim datotekama.

Na taj način možete jednostavno uvesti i koristiti ove komponente u različitim dijelovima vaše aplikacije, čineći vaš kod organiziranijim i lakšim za održavanje.

Sada definirajte funkcionalnu komponentu:

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

Na kraju, uvezite ovu komponentu u svoj aplikacija/stranica.js datoteka. Izbrišite sav predložak Next.js koda i ažurirajte ga sljedećim:

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



 </main>
 )
}

Pokrenite razvojni poslužitelj i trebali biste vidjeti osnovni obrazac s dva polja za unos i gumbom za slanje u vašem pregledniku.

Rukovanje provjerom valjanosti obrazaca

Obrazac izgleda sjajno, ali još ništa ne radi. Da bi bio funkcionalan, morate dodati kod za provjeru valjanosti. useForm pomoćne funkcije kuke dobro će doći pri upravljanju i provjera valjanosti korisničkih unosa.

Najprije definirajte sljedeću varijablu stanja za upravljanje trenutnim statusom obrasca, ovisno o tome je li korisnik dao ispravne vjerodajnice. Dodajte ovaj kod unutar funkcionalne komponente:

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

Zatim izradite funkciju rukovatelja za provjeru valjanosti vjerodajnica. Ova funkcija će simulirati zahtjev HTTP API-ja koji se obično pojavljuje kada klijentske aplikacije stupaju u interakciju s API-jem za autentifikaciju pozadine.

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

Dodajte funkciju rukovatelja događajem onClick komponenti gumba – prosljeđujući je kao rekvizit – za pokretanje funkcije onSubmit kada korisnik klikne gumb za slanje.

onClick={handleSubmit(onSubmit)}

Vrijednost formStatus varijabla stanja je važna jer će odrediti kako ćete dati povratnu informaciju korisniku. Ako korisnik unese ispravne vjerodajnice, možda ćete prikazati poruku o uspjehu. Ako imate druge stranice u svojoj aplikaciji Next.js, možete ih preusmjeriti na drugu stranicu.

Također biste trebali dati odgovarajuće povratne informacije ako su vjerodajnice pogrešne. Material UI nudi izvrsnu povratnu komponentu koju možete koristiti zajedno Reactova tehnika uvjetnog prikazivanja za informiranje korisnika, na temelju vrijednosti formStatus.

Da biste to učinili, dodajte sljedeći kod odmah ispod StyledForm početna oznaka.

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

Sada, za snimanje i provjeru valjanosti korisničkog unosa, možete koristiti Registar za registraciju polja za unos obrasca, praćenje njegovih vrijednosti i određivanje pravila provjere valjanosti.

Ova funkcija uzima nekoliko argumenata, uključujući naziv polja za unos i objekt parametara provjere valjanosti. Ovaj objekt navodi pravila provjere valjanosti za polje unosa kao što je određeni uzorak i minimalna duljina.

Samo naprijed i uključite sljedeći kod kao potporu u korisničko ime StyledTextField komponenta.

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

Sada dodajte sljedeći objekt kao podupirač u lozinkaStyledTextField komponenta.

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

Dodajte sljedeći kod ispod polja za unos korisničkog imena kako biste pružili vizualnu povratnu informaciju o zahtjevima za unos.

Ovaj kôd će pokrenuti upozorenje s porukom o pogrešci kako bi obavijestio korisnika o zahtjevima, kako bi se osiguralo da ispravi sve pogreške prije podnošenja obrasca.

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

Na kraju, uključite sličan kod odmah ispod tekstualnog polja za unos lozinke:

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

Super! S ovim promjenama trebali biste imati vizualno privlačan, funkcionalan obrazac izrađen s React Hook Formom i korisničkim sučeljem materijala.

Unaprijedite svoj razvoj Next.js s bibliotekama na strani klijenta

Material UI i React Hook Form samo su dva primjera mnogih izvrsnih biblioteka na strani klijenta koje možete koristiti za ubrzavanje razvoja sučelja Next.js.

Knjižnice na strani klijenta pružaju niz značajki spremnih za proizvodnju i unaprijed izgrađenih komponenti koje vam mogu pomoći da brže i učinkovitije izgradite bolje front-end aplikacije.