Veidojiet stilīgas Next.js veidlapas ar React Hook formu un materiāla lietotāja interfeisu

Material UI (MUI) ir populāra komponentu bibliotēka, kas ievieš Google materiālu dizaina sistēmu. Tas nodrošina plašu iepriekš izveidotu lietotāja interfeisa komponentu klāstu, ko varat izmantot, lai izveidotu funkcionālas un vizuāli pievilcīgas saskarnes.

Lai gan tas ir paredzēts React, varat paplašināt tā iespējas uz citiem React ekosistēmas ietvariem, piemēram, Next.js.

Darba sākšana ar React Hook veidlapas un materiāla lietotāja interfeisu

Reaģē āķa forma ir populāra bibliotēka, kas nodrošina vienkāršu un deklaratīvu veidu, kā izveidot, pārvaldīt un apstiprināt veidlapas.

Integrējot Materiāla lietotāja saskarne UI komponentus un stilus, varat izveidot izskatīgas veidlapas, kuras ir viegli lietot, un lietot konsekventu dizainu savai Next.js lietojumprogrammai.

Lai sāktu darbu, lokāli izveidojiet Next.js projektu. Šīs rokasgrāmatas vajadzībām instalējiet jaunākā Next.js versija, kas izmanto lietotņu direktoriju.

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

Pēc tam savā projektā instalējiet šīs pakotnes:

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

Šeit ir priekšskatījums par to, ko veidosit:

Jūs varat atrast šī projekta kodu GitHub krātuve.

Veidlapu veidošana un veidošana

React Hook Form nodrošina dažādas utilītas funkcijas, tostarp lietošanas veidlapa āķis.

Šis āķis racionalizē veidlapas stāvokļa apstrādes, ievades validācijas un iesniegšanas procesu, vienkāršojot veidlapu pārvaldības pamataspektus.

Lai izveidotu veidlapu, kas izmanto šo āķi, pievienojiet šādu kodu jaunam failam, src/components/form.js.

Vispirms pievienojiet nepieciešamos importus React Hook Form un MUI pakotnēm:

"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 nodrošina lietošanai gatavu lietotāja interfeisa komponentu kolekciju, ko varat tālāk pielāgot, nododot stila rekvizītus.

Tomēr, ja vēlaties lielāku elastību un kontroli pār lietotāja interfeisa dizainu, varat izvēlēties izmantot stilizētu metodi, lai veidotu UI elementu stilu ar CSS rekvizītiem. Šajā gadījumā varat veidot stilu galvenās veidlapas sastāvdaļas: galveno konteineru, pašu veidlapu un ievades teksta laukus.

Tieši zem importētajiem failiem pievienojiet šo kodu:

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

Moduļu koda bāzes uzturēšana ir svarīga izstrādes procesā. Šī iemesla dēļ, nevis apvienot visu kodu vienā failā, jums vajadzētu definēt un veidot pielāgotus komponentus atsevišķos failos.

Tādā veidā varat viegli importēt un izmantot šos komponentus dažādās lietojumprogrammas daļās, padarot kodu sakārtotāku un apkopējamāku.

Tagad definējiet funkcionālo 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>
 </>
 );
}

Visbeidzot importējiet šo komponentu savā app/page.js failu. Izdzēsiet visu standarta Next.js kodu un atjauniniet to ar šādu informāciju:

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



 </main>
 )
}

Sāciet izstrādes serveri, un pārlūkprogrammā vajadzētu redzēt pamata veidlapu ar diviem ievades laukiem un iesniegšanas pogu.

Veidlapas apstiprināšana

Forma izskatās lieliski, bet tā vēl neko nedara. Lai tas būtu funkcionāls, jums jāpievieno kāds validācijas kods. lietošanas veidlapa hook utilīta funkcijas noderēs, pārvaldot un lietotāja ievadīto datu apstiprināšana.

Vispirms definējiet šādu stāvokļa mainīgo, lai pārvaldītu pašreizējo veidlapas statusu atkarībā no tā, vai lietotājs ir norādījis pareizos akreditācijas datus. Pievienojiet šo kodu funkcionālajam komponentam:

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

Pēc tam izveidojiet apdarinātāja funkciju, lai apstiprinātu akreditācijas datus. Šī funkcija simulēs HTTP API pieprasījumu, kas parasti rodas, kad klienta programmas mijiedarbojas ar aizmugursistēmas autentifikācijas API.

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

Pievienojiet pogu onClick notikumu apstrādātāja funkciju, nododot to kā palīgierīci, lai aktivizētu funkciju onSubmit, kad lietotājs noklikšķina uz pogas Iesniegt.

onClick={handleSubmit(onSubmit)}

Vērtība formStatus stāvokļa mainīgais ir svarīgs, jo tas noteiks, kā lietotājam sniedzat atsauksmes. Ja lietotājs ievada pareizos akreditācijas datus, iespējams, tiks parādīts veiksmes ziņojums. Ja jūsu lietojumprogrammā Next.js bija citas lapas, varat tās novirzīt uz citu lapu.

Ja akreditācijas dati ir nepareizi, jums ir arī jāsniedz atbilstoša atsauksme. Materiāla lietotāja saskarne piedāvā lielisku atgriezeniskās saites komponentu, ko varat izmantot kopā React nosacījuma renderēšanas tehnika informēt lietotāju, pamatojoties uz formStatus vērtību.

Lai to izdarītu, pievienojiet šo kodu tieši zem StyledForm sākuma tags.

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

Tagad, lai uztvertu un apstiprinātu lietotāja ievadi, varat izmantot reģistrēties funkciju, lai reģistrētu veidlapas ievades laukus, izsekotu tās vērtībām un norādītu validācijas noteikumus.

Šai funkcijai ir nepieciešami vairāki argumenti, tostarp ievades lauka nosaukums un validācijas parametru objekts. Šis objekts norāda ievades lauka validācijas noteikumus, piemēram, konkrēto modeli un minimālo garumu.

Turpiniet un lietotājvārdā iekļaujiet tālāk norādīto kodu StyledTextField komponents.

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

Tagad pievienojiet šo objektu kā rekvizītu paroleStyledTextField komponents.

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

Pievienojiet tālāk norādīto kodu zem lietotājvārda ievades lauka, lai sniegtu vizuālu atgriezenisko saiti par ievades prasībām.

Šis kods aktivizēs brīdinājumu ar kļūdas ziņojumu, lai informētu lietotāju par prasībām, lai nodrošinātu, ka viņš pirms veidlapas iesniegšanas izlabo visas kļūdas.

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

Visbeidzot, tieši zem paroles ievades teksta lauka iekļaujiet līdzīgu kodu:

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

Satriecošs! Izmantojot šīs izmaiņas, jums vajadzētu iegūt vizuāli pievilcīgu, funkcionālu formu, kas izveidota, izmantojot React Hook Form un Material UI.

Uzlabojiet savu Next.js izstrādi, izmantojot klienta puses bibliotēkas

Materiāla lietotāja saskarne un React Hook Form ir tikai divi piemēri daudzajām lieliskajām klienta puses bibliotēkām, kuras varat izmantot, lai paātrinātu Next.js priekšgala izstrādi.

Klienta puses bibliotēkas nodrošina dažādas ražošanai gatavas funkcijas un iepriekš iebūvētus komponentus, kas var palīdzēt ātrāk un efektīvāk izveidot labākas priekšgala lietojumprogrammas.