Vytvářejte stylové formuláře Next.js s uživatelským rozhraním React Hook Form a Material

Material UI (MUI) je široce používaná knihovna komponent, která implementuje vizuální styl Material Design od společnosti Google. Nabízí rozsáhlou paletu předdefinovaných prvků uživatelského rozhraní, které vám umožní vytvářet funkční a vizuálně atraktivní webové aplikace.

Ačkoliv je primárně určena pro React, lze její možnosti rozšířit i na další frameworky v rámci ekosystému React, například Next.js.

Začínáme s React Hook Form a Material UI

React Hook Form je populární knihovna, která nabízí jednoduchý a deklarativní způsob, jak vytvářet, spravovat a validovat formuláře.

Kombinací Materiálového UI komponent a stylů můžete vytvářet elegantní a snadno použitelné formuláře, které budou vizuálně konzistentní s celkovým designem vaší Next.js aplikace.

Pro začátek si vytvořte nový projekt Next.js. Pro tento návod doporučujeme nainstalovat nejnovější verzi Next.js, která využívá adresář App.

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

Následně do projektu nainstalujte následující balíčky:

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

Zde je malá ukázka toho, co budeme vytvářet:

Kód tohoto projektu je dostupný v GitHub repozitáři.

Tvorba a stylování formulářů

React Hook Form poskytuje několik užitečných funkcí, včetně háčku useForm.

Tento háček zjednodušuje proces zpracování stavu formuláře, ověřování vstupních dat a odesílání, což značně usnadňuje správu formulářů.

Pro vytvoření formuláře využívajícího tento háček přidejte následující kód do nového souboru src/components/form.js.

Nejprve importujte potřebné balíčky z React Hook Form a 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 nabízí sadu předpřipravených komponent UI, které lze dále upravovat pomocí stylingových rekvizit.

Pokud však požadujete větší flexibilitu a kontrolu nad vzhledem UI, můžete využít metodu styled pro stylování UI prvků pomocí CSS. V tomto případě můžete stylizovat hlavní součásti formuláře: hlavní kontejner, samotný formulář a textová pole.

Přímo pod importy vložte tento kód:

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

Během vývoje je klíčové udržovat modulární kód. Proto doporučujeme definovat a stylovat vlastní komponenty v samostatných souborech namísto hromadění veškerého kódu v jednom souboru.

Tímto způsobem můžete snadno importovat a používat tyto komponenty v různých částech vaší aplikace, což zajistí lepší organizaci a udržovatelnost kódu.

Nyní definujte funkční komponentu:

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

Nakonec importujte tuto komponentu do souboru app/page.js. Odstraňte veškerý výchozí kód Next.js a nahraďte jej následujícím:

import Form from 'src/components/Form'
export default function Home() {
  return (
    <main >
      <Form />
    </main>
  )
}
 

Spusťte vývojový server a v prohlížeči byste měli vidět základní formulář se dvěma vstupními poli a tlačítkem pro odeslání.

Zpracování validace formuláře

Formulář vypadá skvěle, ale zatím nemá žádnou funkci. Pro přidání funkčnosti je třeba implementovat validační kód. Funkce useForm hook vám pomůže se správou a validací uživatelského vstupu.

Nejprve definujte proměnnou stavu pro správu aktuálního stavu formuláře v závislosti na tom, zda uživatel zadal správné údaje. Přidejte tento kód do funkční komponenty:

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

Dále vytvořte funkci obsluhy pro validaci přihlašovacích údajů. Tato funkce bude simulovat HTTP API požadavek, který se obvykle odesílá při komunikaci klientské aplikace s autentizačním API backendu.

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

Přidejte do komponenty tlačítka funkci obsluhy události onClick – předejte ji jako rekvizitu – pro spuštění funkce onSubmit, když uživatel klikne na tlačítko Odeslat.

onClick={handleSubmit(onSubmit)}

Hodnota stavové proměnné formStatus je důležitá, protože určuje, jak budete uživateli poskytovat zpětnou vazbu. Pokud uživatel zadá správné přihlašovací údaje, zobrazí se zpráva o úspěchu. V případě, že máte v aplikaci Next.js více stránek, můžete provést přesměrování na jinou stránku.

V případě neplatných přihlašovacích údajů je také potřeba poskytnout zpětnou vazbu. Material UI nabízí vizuálně atraktivní zpětnou vazbu, kterou lze kombinovat s technikou podmíněného vykreslování React pro informování uživatele na základě stavu formStatus.

Pro tento účel přidejte následující kód přímo pod otevírací značku StyledForm.

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

Nyní můžete použít funkci register pro registraci vstupních polí formuláře, sledování jejich hodnot a specifikaci validačních pravidel. To vám umožní efektivně zachytávat a validovat uživatelský vstup.

Tato funkce akceptuje několik argumentů, včetně názvu vstupního pole a objektu validačních parametrů. Tento objekt specifikuje validační pravidla pro dané vstupní pole, jako je vzor a minimální délka.

Následující kód vložte jako rekvizitu do komponenty uživatelského jména StyledTextField.

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

Nyní přidejte následující objekt jako rekvizitu do komponenty hesla StyledTextField.

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

Přidejte následující kód pod vstupní pole uživatelského jména pro zobrazení vizuální zpětné vazby ohledně validačních požadavků.

Tento kód vygeneruje varovnou zprávu s chybou, která informuje uživatele o validačních požadavcích. Uživatel tak může opravit případné chyby před odesláním formuláře.

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

Nakonec vložte podobný kód přímo pod textové pole pro zadání hesla:

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

Výborně! S těmito změnami byste měli mít vizuálně přitažlivý a funkční formulář vytvořený s pomocí React Hook Form a Material UI.

Zlepšete svůj vývoj Next.js pomocí knihoven na straně klienta

Material UI a React Hook Form jsou pouze dva příklady z mnoha skvělých knihoven na straně klienta, které vám mohou pomoci urychlit vývoj frontendu v Next.js.

Knihovny na straně klienta nabízí řadu funkcí a předdefinovaných komponent, které jsou připravené pro produkční nasazení. S nimi můžete vytvářet kvalitnější frontendové aplikace rychleji a efektivněji.