İşlevsel ve tasarım kitaplıklarının bu kombinasyonuyla formlarınızı düzenli hale getirin.

Material UI (MUI), Google'ın Materyal Tasarımı sistemini uygulayan popüler bir bileşen kitaplığıdır. İşlevsel ve görsel olarak çekici arayüzler oluşturmak için kullanabileceğiniz çok çeşitli önceden oluşturulmuş kullanıcı arayüzü bileşenleri sağlar.

React için tasarlanmış olsa da yeteneklerini React ekosistemindeki Next.js gibi diğer çerçevelere genişletebilirsiniz.

React Hook Formu ve Malzeme Kullanıcı Arayüzüne Başlarken

Tepki Kanca Formu formları oluşturmak, yönetmek ve doğrulamak için basit ve bildirime dayalı bir yol sağlayan popüler bir kitaplıktır.

Entegre ederek Malzeme kullanıcı arayüzleri Kullanıcı arayüzü bileşenleri ve stilleri sayesinde kullanımı kolay, güzel görünümlü formlar oluşturabilir ve Next.js uygulamanıza tutarlı bir tasarım uygulayabilirsiniz.

Başlamak için bir Next.js projesini yerel olarak destekleyin. Bu kılavuzun amacı doğrultusunda, Next.js'nin Uygulama dizinini kullanan en son sürümü.

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

Daha sonra bu paketleri projenize yükleyin:

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

İşte oluşturacağınız şeyin bir önizlemesi:

Bu projenin kodunu burada bulabilirsiniz GitHub depo.

Form Oluşturma ve Şekillendirme

React Hook Form, aşağıdakiler de dahil olmak üzere çeşitli yardımcı işlevler sağlar: Kullanım Formu kanca.

Bu kanca, form yönetiminin temel yönlerini basitleştirerek form durumunu, giriş doğrulamayı ve gönderimi yönetme sürecini kolaylaştırır.

Bu kancayı kullanan bir form oluşturmak için aşağıdaki kodu yeni bir dosyaya ekleyin, src/components/form.js.

Öncelikle React Hook Form ve MUI paketleri için gerekli içe aktarmaları ekleyin:

"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, stil aksesuarlarını geçerek daha da özelleştirebileceğiniz, kullanıma hazır UI bileşenlerinden oluşan bir koleksiyon sağlar.

Bununla birlikte, kullanıcı arayüzü tasarımı üzerinde daha fazla esneklik ve kontrol istiyorsanız, kullanıcı arayüzü öğelerinizi CSS özellikleriyle stillendirmek için stillendirilmiş yöntemi kullanmayı tercih edebilirsiniz. Bu durumda formun ana bileşenlerine stil uygulayabilirsiniz: ana kapsayıcı, formun kendisi ve giriş metni alanları.

İçe aktarmaların hemen altına şu kodu ekleyin:

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

Modüler bir kod tabanını korumak geliştirmede önemlidir. Bu nedenle, tüm kodu tek bir dosyada toplamak yerine, özel bileşenleri ayrı dosyalarda tanımlamalı ve stillendirmelisiniz.

Bu şekilde, bu bileşenleri uygulamanızın farklı bölümlerinde kolayca içe aktarabilir ve kullanabilirsiniz, böylece kodunuzu daha düzenli ve bakımı kolay hale getirebilirsiniz.

Şimdi fonksiyonel bileşeni tanımlayın:

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

Son olarak bu bileşeni cihazınıza aktarın. app/page.js dosya. Tüm ortak metin Next.js kodunu silin ve aşağıdakilerle güncelleyin:

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



 </main>
 )
}

Geliştirme sunucusunu başlattığınızda, tarayıcınızda iki giriş alanı ve bir gönder düğmesi olan temel bir form görmelisiniz.

Form Doğrulama İşleme

Form harika görünüyor, ancak henüz hiçbir şey yapmıyor. İşlevsel hale getirmek için bazı doğrulama kodları eklemeniz gerekir. Kullanım Formu kanca yardımcı programı işlevleri, yönetim sırasında kullanışlı olacaktır ve kullanıcı girişlerinin doğrulanması.

Öncelikle, kullanıcının doğru kimlik bilgilerini sağlayıp sağlamadığına bağlı olarak mevcut form durumunu yönetmek için aşağıdaki durum değişkenini tanımlayın. Bu kodu işlevsel bileşenin içine ekleyin:

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

Daha sonra kimlik bilgilerini doğrulamak için bir işleyici işlevi oluşturun. Bu işlev, genellikle istemci uygulamaları bir arka uç kimlik doğrulama API'si ile etkileşime girdiğinde oluşan bir HTTP API isteğini simüle edecektir.

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

Kullanıcı gönder düğmesini tıkladığında onSubmit işlevini tetiklemek için düğme bileşenine bir onClick olay işleyici işlevi ekleyin (bunu destek olarak iletin).

onClick={handleSubmit(onSubmit)}

Değeri formDurum durum değişkeni önemlidir çünkü kullanıcıya nasıl geri bildirim sağlayacağınızı belirleyecektir. Kullanıcı doğru kimlik bilgilerini girerse bir başarı mesajı gösterebilirsiniz. Next.js uygulamanızda başka sayfalarınız varsa bunları farklı bir sayfaya yönlendirebilirsiniz.

Kimlik bilgilerinin yanlış olması durumunda da uygun geri bildirimde bulunmalısınız. Material UI, birlikte kullanabileceğiniz harika bir geri bildirim bileşeni sunar React'ın koşullu oluşturma tekniği formStatus'un değerine göre kullanıcıyı bilgilendirmek.

Bunu yapmak için aşağıdaki kodu hemen altına ekleyin. Tarz Formu açılış etiketi.

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

Artık kullanıcı girişini yakalamak ve doğrulamak için kayıt olmak form giriş alanlarını kaydetme, değerlerini izleme ve doğrulama kurallarını belirleme işlevi.

Bu işlev, giriş alanının adı ve doğrulama parametreleri nesnesi dahil olmak üzere çeşitli bağımsız değişkenler alır. Bu nesne, belirli bir model ve minimum uzunluk gibi giriş alanı için doğrulama kurallarını belirtir.

Devam edin ve aşağıdaki kodu kullanıcı adına destek olarak ekleyin Tarz Metin Alanı bileşen.

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

Şimdi aşağıdaki nesneyi prop olarak ekleyin. şifreTarz Metin Alanı bileşen.

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

Giriş gereksinimlerine ilişkin görsel geri bildirim sağlamak için kullanıcı adı giriş alanının altına aşağıdaki kodu ekleyin.

Bu kod, formu göndermeden önce hataları düzelttiklerinden emin olmak için kullanıcıyı gereksinimler konusunda bilgilendirmek amacıyla hata mesajı içeren bir uyarıyı tetikleyecektir.

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

Son olarak, şifre girişi metin alanının hemen altına benzer kodu ekleyin:

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

Mükemmel! Bu değişikliklerle React Hook Form ve Material UI ile oluşturulmuş görsel olarak çekici, işlevsel bir forma sahip olmalısınız.

İstemci Tarafı Kitaplıklarla Next.js Geliştirmenizi Geliştirin

Material UI ve React Hook Form, Next.js ön uç gelişimini hızlandırmak için kullanabileceğiniz birçok harika istemci tarafı kitaplığından yalnızca iki örnektir.

İstemci tarafı kitaplıkları, daha iyi ön uç uygulamaları daha hızlı ve verimli bir şekilde oluşturmanıza yardımcı olabilecek çeşitli üretime hazır özellikler ve önceden oluşturulmuş bileşenler sağlar.