Få orden på skjemaene dine med denne kombinasjonen av funksjonelle og designbiblioteker.

Material UI (MUI) er et populært komponentbibliotek som implementerer Googles materialdesignsystem. Det gir et bredt spekter av forhåndsbygde UI-komponenter som du kan bruke til å lage funksjonelle og visuelt tiltalende grensesnitt.

Selv om den er designet for React, kan du utvide funksjonene til andre rammeverk innenfor Reacts økosystem, som Next.js.

Komme i gang med React Hook Form og Material UI

React Hook Form er et populært bibliotek som gir en enkel og deklarativ måte å opprette, administrere og validere skjemaer på.

Ved å integrere Materiale UI UI-komponenter og stiler, kan du lage flotte skjemaer som er enkle å bruke, og bruke et konsistent design på Next.js-applikasjonen din.

For å komme i gang, stillas et Next.js-prosjekt lokalt. For formålet med denne veiledningen, installer siste versjon av Next.js som bruker appkatalogen.

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

Installer deretter disse pakkene i prosjektet ditt:

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

Her er en forhåndsvisning av hva du skal bygge:

Du finner dette prosjektets kode i denne GitHub oppbevaringssted.

Opprette og style skjemaer

React Hook Form gir en rekke verktøyfunksjoner, inkludert useForm krok.

Denne kroken effektiviserer prosessen med å håndtere skjemastatus, inndatavalidering og innsending, og forenkler de grunnleggende aspektene ved skjemabehandling.

For å lage et skjema som bruker denne kroken, legg til følgende kode i en ny fil, src/components/form.js.

Først legger du til de nødvendige importene for React Hook Form og MUI-pakkene:

"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 gir en samling klare til bruk UI-komponenter som du kan tilpasse ytterligere ved å sende stylingrekvisitter.

Ikke desto mindre, hvis du vil ha mer fleksibilitet og kontroll over UI-designet, kan du velge å bruke den stilede metoden for å style UI-elementene dine med CSS-egenskaper. I dette tilfellet kan du style hovedkomponentene i skjemaet: hovedbeholderen, selve skjemaet og inndatafeltene.

Rett under importen legger du til denne koden:

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

Å opprettholde en modulær kodebase er viktig i utviklingen. Av denne grunn, i stedet for å klumpe all koden i en enkelt fil, bør du definere og style tilpassede komponenter i separate filer.

På denne måten kan du enkelt importere og bruke disse komponentene på tvers av ulike deler av applikasjonen din, noe som gjør koden mer organisert og vedlikeholdbar.

Definer nå den funksjonelle komponenten:

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

Til slutt importerer du denne komponenten i din app/page.js fil. Slett all boilerplate Next.js-koden og oppdater den med følgende:

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



 </main>
 )
}

Start utviklingsserveren, og du skal se et grunnleggende skjema med to inndatafelt og en send-knapp i nettleseren din.

Håndtering av skjemavalidering

Formen ser flott ut, men den gjør ingenting ennå. For å gjøre det funksjonelt, må du legge til en valideringskode. useForm Hook-verktøyfunksjoner vil komme godt med når du administrerer og validering av brukerinndata.

Først definerer du følgende tilstandsvariabel for å administrere gjeldende skjemastatus, avhengig av om en bruker har oppgitt riktig påloggingsinformasjon. Legg til denne koden i den funksjonelle komponenten:

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

Deretter oppretter du en behandlerfunksjon for å validere legitimasjonen. Denne funksjonen vil simulere en HTTP API-forespørsel som vanligvis oppstår når klientapper samhandler med en backend-autentiserings-API.

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

Legg til en onClick-hendelsesbehandlingsfunksjon til knappekomponenten – legg den til som en rekvisitt – for å utløse onSubmit-funksjonen når en bruker klikker på send-knappen.

onClick={handleSubmit(onSubmit)}

Verdien av formStatus tilstandsvariabel er viktig fordi den vil avgjøre hvordan du gir tilbakemelding til brukeren. Hvis brukeren oppgir riktig legitimasjon, kan du vise en suksessmelding. Hvis du hadde andre sider i Next.js-applikasjonen din, kan du omdirigere dem til en annen side.

Du bør også gi passende tilbakemelding hvis legitimasjonen er feil. Material UI tilbyr en flott tilbakemeldingskomponent som du kan bruke sammen med Reacts betingede gjengivelsesteknikk å informere brukeren, basert på verdien av formStatus.

For å gjøre dette, legg til følgende kode rett under StyledForm åpningsmerke.

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

Nå, for å fange opp og validere brukerinndata, kan du bruke registrere funksjon for å registrere skjemainndatafeltene, spore verdiene og spesifisere valideringsreglene.

Denne funksjonen tar flere argumenter, inkludert navnet på inndatafeltet og et valideringsparameterobjekt. Dette objektet spesifiserer valideringsreglene for inndatafeltet, for eksempel det spesifikke mønsteret og minimumslengden.

Gå videre og inkluder følgende kode som en rekvisitt i brukernavnet StyledTextField komponent.

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

Legg nå til følgende objekt som en rekvisitt i passordStyledTextField komponent.

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

Legg til følgende kode under inndatafeltet for brukernavn for å gi visuell tilbakemelding om inndatakrav.

Denne koden vil utløse et varsel med en feilmelding for å informere brukeren om kravene, for å sikre at de retter opp eventuelle feil før skjemaet sendes inn.

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

Til slutt, inkluder lignende kode rett under passordinntastingstekstfeltet:

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

Rått! Med disse endringene bør du ha en visuelt tiltalende, funksjonell form laget med React Hook Form og Material UI.

Forbedre Next.js-utviklingen din med biblioteker på klientsiden

Material UI og React Hook Form er bare to eksempler på de mange flotte klientsidebibliotekene du kan bruke for å fremskynde Next.js frontend-utvikling.

Biblioteker på klientsiden tilbyr en rekke produksjonsklare funksjoner og forhåndsbygde komponenter som kan hjelpe deg med å bygge bedre front-end-applikasjoner raskere og mer effektivt.