Material UI (MUI) er et populært komponentbibliotek som gir et bredt utvalg av forhåndsdefinerte brukergrensesnittskomponenter. Disse komponentene er designet for å implementere Googles Material Design-system, og de gjør det mulig for utviklere å skape funksjonelle og visuelt attraktive grensesnitt.
Selv om MUI er primært laget for React, kan bibliotekets funksjonalitet utvides til andre rammeverk som opererer innenfor React-økosystemet, inkludert Next.js.
Starte med React Hook Form og Material UI
React Hook Form er et anerkjent bibliotek som tilbyr en enkel og deklarativ tilnærming til å håndtere skjemaopprettelse, -administrasjon og -validering.
Ved å integrere Material UI sine komponenter og stiler, kan man designe elegante skjemaer som er brukervennlige og som har et enhetlig utseende i Next.js-applikasjoner.
For å begynne, må du sette opp et lokalt Next.js-prosjekt. I denne veiledningen installerer vi den nyeste versjonen av Next.js, som bruker app-katalogen.
npx create-next-app@latest next-project --app
Deretter installerer du de følgende pakkene i prosjektet:
npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled
Her er en visuell forhåndsvisning av resultatet du kan oppnå:
Du finner koden for dette prosjektet i følgende GitHub-repositorium.
Utforme og style skjemaer
React Hook Form har flere nyttige funksjoner, inkludert useForm-hooken.
Denne hooken forenkler håndteringen av skjemastatus, validering av inndata og innsending, og effektiviserer de mest grunnleggende aspektene ved skjemabehandling.
For å lage et skjema som bruker denne hooken, legger du til følgende kode i en ny fil, src/components/form.js.
Start med å legge 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 tilbyr en rekke brukervennlige UI-komponenter som kan tilpasses ytterligere ved hjelp av styling-props.
Hvis du ønsker større fleksibilitet og kontroll over UI-designet, kan du benytte den styled-metoden for å style UI-elementene dine med CSS-egenskaper. I dette tilfellet kan du style hovedkomponentene i skjemaet: hovedbeholderen, selve skjemaet og inndatafeltene.
Plasser følgende kode rett under importen:
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%',
});
Det er viktig å opprettholde en modulær kodebase under utviklingen. Derfor bør du definere og style tilpassede komponenter i separate filer i stedet for å samle all koden i en enkelt fil.
Dette gir deg muligheten til enkelt å importere og bruke disse komponentene i forskjellige deler av applikasjonen din, noe som gjør koden mer oversiktlig og vedlikeholdbar.
Definer nå den funksjonelle komponenten:
export default function Form() {
const { register, handleSubmit, formState: { errors } } = useForm();
return (
<>
<FormContainer>
<StyledForm>
<StyledTextField
label="Username"
type="text"
/>
<StyledTextField
label="Password"
type="password"
/>
<MuiButton
type="submit"
variant="contained"
color="primary"
margin="5px"
> Submit </MuiButton>
</StyledForm>
</FormContainer>
</>
);
}
Til slutt importerer du denne komponenten til app/page.js-filen. Slett all standard Next.js-koden og oppdater den med følgende:
import Form from 'src/components/Form'
export default function Home() {
return (
<main >
<Form />
</main>
)
}
Start utviklingsserveren, så skal du se et enkelt skjema med to inndatafelter og en send-knapp i nettleseren.
Håndtere skjemavalidering
Skjemaet ser bra ut, men det er ikke funksjonelt ennå. For å gjøre det funksjonelt må du legge til valideringskode. Funksjonaliteten i useForm-hooken vil være nyttig for å administrere og validere brukerdata.
Først definerer du en tilstandsvariabel som styrer gjeldende skjemastatus, avhengig av om en bruker har oppgitt korrekt påloggingsinformasjon. Legg til følgende kode i den funksjonelle komponenten:
const [formStatus, setFormStatus] = useState({ success: false, error: '' });
Deretter lager du en funksjon som validerer legitimasjonen. Denne funksjonen vil simulere en HTTP API-forespørsel, som er vanlig når klientapper samhandler med en back-end-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-eventhandler på knappekomponenten – legg den til som en prop – for å utløse onSubmit-funksjonen når brukeren trykker på send-knappen.
onClick={handleSubmit(onSubmit)}
Verdien på tilstandsvariabelen formStatus er viktig fordi den bestemmer hvordan du gir tilbakemelding til brukeren. Hvis brukeren legger inn riktig legitimasjon, kan du vise en suksessmelding. Hvis du hadde andre sider i Next.js-applikasjonen din, kan du omdirigere brukeren til en annen side.
Du bør også gi passende tilbakemelding hvis legitimasjonen er feil. Material UI tilbyr en fantastisk tilbakemeldingskomponent som kan brukes sammen med Reacts conditional rendering-teknikk for å informere brukeren basert på verdien av formStatus.
For å gjøre dette, legger du til følgende kode rett under den åpne taggen til StyledForm:
{formStatus.success ? (
<Alert severity="success">Form submitted successfully</Alert>
) : formStatus.error ? (
<Alert severity="error">{formStatus.error}</Alert>
) : null}
For å fange opp og validere brukerinndata kan du bruke register-funksjonen for å registrere skjemaets inndatafelt, spore verdier og spesifisere valideringsregler.
Denne funksjonen tar flere argumenter, inkludert navnet på inndatafeltet og et valideringsparameterobjekt. Dette objektet spesifiserer valideringsregler for inndatafeltet, for eksempel et spesifikt mønster eller minimumslengde.
Legg til følgende kode som en prop i brukernavn-komponenten:
{...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 prop i passord-komponenten:
{...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 en alert med en feilmelding for å informere brukeren om kravene, og sikre at eventuelle feil rettes opp før skjemaet sendes inn.
{errors.username && <Alert severity="error">{errors.username.message}</Alert>}
Til slutt, legg til tilsvarende kode rett under passordinntastingsfeltet:
{errors.password && <Alert severity="error">{errors.password.message}</Alert>}
Flott! Med disse endringene skal du ha et visuelt tiltalende og funksjonelt skjema laget med React Hook Form og Material UI.
Forbedre Next.js-utviklingen din med klientbiblioteker
Material UI og React Hook Form er bare to eksempler på de mange nyttige klientbibliotekene du kan bruke for å fremskynde utviklingen av Next.js front-end.
Klientbiblioteker gir en rekke funksjoner som er klare for produksjon og forhåndsbygde komponenter som kan hjelpe deg med å bygge bedre front-end-applikasjoner raskere og mer effektivt.