Metti in ordine i tuoi moduli con questa combinazione di librerie funzionali e di design.

Material UI (MUI) è una libreria di componenti popolare che implementa il sistema Material Design di Google. Fornisce un'ampia gamma di componenti dell'interfaccia utente predefiniti che è possibile utilizzare per creare interfacce funzionali e visivamente accattivanti.

Anche se è progettato per React, puoi estendere le sue capacità ad altri framework all'interno dell'ecosistema React, come Next.js.

Iniziare con l'interfaccia utente del modulo e del materiale di React Hook

Forma del gancio di reazione è una libreria popolare che fornisce un modo semplice e dichiarativo per creare, gestire e convalidare i moduli.

Integrando IU materiali Con componenti e stili dell'interfaccia utente, puoi creare moduli di bell'aspetto facili da usare e applicare un design coerente alla tua applicazione Next.js.

Per iniziare, impalcatura di un progetto Next.js localmente. Ai fini di questa guida, installare il file ultima versione di Next.js che utilizza la directory dell'app.

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

Successivamente, installa questi pacchetti nel tuo progetto:

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

Ecco un'anteprima di ciò che costruirai:

Puoi trovare il codice di questo progetto in questo GitHub deposito.

Creazione e stilizzazione di moduli

React Hook Form fornisce una varietà di funzioni di utilità, incluso useForm gancio.

Questo hook semplifica il processo di gestione dello stato del modulo, della convalida dell'input e dell'invio, semplificando gli aspetti fondamentali della gestione dei moduli.

Per creare un modulo che utilizzi questo hook, aggiungi il seguente codice a un nuovo file, src/components/form.js.

Innanzitutto, aggiungi le importazioni richieste per i pacchetti React Hook Form e 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 fornisce una raccolta di componenti dell'interfaccia utente pronti all'uso che puoi personalizzare ulteriormente passando oggetti di stile.

Tuttavia, se desideri maggiore flessibilità e controllo sulla progettazione dell'interfaccia utente, puoi scegliere di utilizzare il metodo con stile per definire lo stile degli elementi dell'interfaccia utente con proprietà CSS. In questo caso, puoi definire lo stile dei componenti principali del modulo: il contenitore principale, il modulo stesso e i campi di testo di input.

Proprio sotto le importazioni, aggiungi questo codice:

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

Mantenere una base di codice modulare è importante nello sviluppo. Per questo motivo, anziché raggruppare tutto il codice in un unico file, è necessario definire e definire lo stile dei componenti personalizzati in file separati.

In questo modo, puoi importare e utilizzare facilmente questi componenti in diverse parti della tua applicazione, rendendo il tuo codice più organizzato e gestibile.

Ora definiamo il componente funzionale:

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

Infine, importa questo componente nel tuo file app/pagina.js file. Elimina tutto il codice boilerplate Next.js e aggiornalo con quanto segue:

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



 </main>
 )
}

Avvia il server di sviluppo e dovresti vedere un modulo di base con due campi di input e un pulsante di invio nel tuo browser.

Gestione della convalida dei moduli

Il modulo sembra fantastico, ma non fa ancora nulla. Per renderlo funzionale, è necessario aggiungere del codice di convalida. useForm le funzioni di utilità hook torneranno utili durante la gestione e convalidare gli input dell'utente.

Innanzitutto, definisci la seguente variabile di stato per gestire lo stato corrente del modulo, a seconda che un utente abbia fornito le credenziali corrette. Aggiungi questo codice all'interno del componente funzionale:

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

Creare quindi una funzione di gestione per convalidare le credenziali. Questa funzione simulerà una richiesta API HTTP che in genere si verifica quando le app client interagiscono con un'API di autenticazione back-end.

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

Aggiungi una funzione del gestore eventi onClick al componente pulsante, passandola come prop, per attivare la funzione onSubmit quando un utente fa clic sul pulsante di invio.

onClick={handleSubmit(onSubmit)}

Il valore del formStatus La variabile di stato è importante perché determinerà il modo in cui fornisci feedback all'utente. Se l'utente inserisce le credenziali corrette, potresti mostrare un messaggio di successo. Se avessi altre pagine nella tua applicazione Next.js, potresti reindirizzarle a una pagina diversa.

Dovresti anche fornire un feedback appropriato se le credenziali sono errate. L'interfaccia utente del materiale offre un ottimo componente di feedback che puoi utilizzare insieme La tecnica di rendering condizionale di React per informare l'utente, in base al valore di formStatus.

Per fare ciò, aggiungi il seguente codice proprio sotto il file StyledForm etichetta di apertura.

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

Ora, per acquisire e convalidare l'input dell'utente, puoi utilizzare il file Registrati funzione per registrare i campi di input del modulo, tracciarne i valori e specificare le regole di convalida.

Questa funzione accetta diversi argomenti, incluso il nome del campo di input e un oggetto parametri di convalida. Questo oggetto specifica le regole di convalida per il campo di input come il modello specifico e la lunghezza minima.

Vai avanti e includi il seguente codice come supporto nel nome utente Campo di testo in stile componente.

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

Ora aggiungi il seguente oggetto come oggetto di scena nel file parola d'ordineCampo di testo in stile componente.

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

Aggiungi il seguente codice sotto il campo di input del nome utente per fornire un feedback visivo sui requisiti di input.

Questo codice attiverà un avviso con un messaggio di errore per informare l'utente dei requisiti, per garantire che corregga eventuali errori prima di inviare il modulo.

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

Infine, includi un codice simile proprio sotto il campo di testo di immissione della password:

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

Eccezionale! Con queste modifiche, dovresti avere un modulo visivamente accattivante e funzionale realizzato con React Hook Form e Material UI.

Migliora il tuo sviluppo Next.js con le librerie lato client

Material UI e React Hook Form sono solo due esempi delle tante fantastiche librerie lato client che puoi utilizzare per accelerare lo sviluppo del frontend Next.js.

Le librerie lato client forniscono una varietà di funzionalità pronte per la produzione e componenti predefiniti che possono aiutarti a creare applicazioni front-end migliori in modo più rapido ed efficiente.