Next.js 15 Form Bileşeni: Yeni Başlayanlar İçin Bir Rehber

Next.js 15 Form Bileşeni: Yeni Başlayanlar İçin Bir Rehber

Next.js, modern web uygulamaları geliştirmek için popüler bir çerçevedir. Formlar, web uygulamalarının önemli bir parçasıdır ve Next.js, form oluşturmayı kolaylaştıran güçlü bir form bileşeni sunmaktadır. Bu makalede, Next.js 15’teki yeni form bileşenini kullanarak form oluşturmanın temellerini ele alacağız. Ayrıca, form gönderme, doğrulama ve veri işleme gibi önemli konuları da inceleyeceğiz.

Next.js Form Bileşenini Kullanma

Next.js 15’te, form oluşturmak için yeni bir form bileşeni sunulmuştur. Bu bileşen, form işlevselliğini kolaylaştırmak için çeşitli özellikler sunar. Form bileşenini kullanmak için, önce `next/form` paketini projeye eklemeniz gerekir:

“`bash
npm install next/form
“`

Form bileşenini kullanarak basit bir form oluşturmak için aşağıdaki kodu kullanabilirsiniz:

“`javascript
import { useState } from ‘react’;
import { useForm } from ‘next/form’;

function MyForm() {
const [formData, setFormData] = useState(null);

const { data, state, errors, reset, submit } = useForm({
id: ‘my-form’,
method: ‘POST’,
action: ‘/api/submit’,
defaultValues: {
name: ”,
email: ”
},
validationSchema: {
name: {
required: ‘Lütfen adınızı girin.’
},
email: {
required: ‘Lütfen e-postanızı girin.’
}
}
});

const handleSubmit = async (event) => {
event.preventDefault();
await submit();
setFormData(data);
};

return (

);
}

export default MyForm;
“`

Yukarıdaki kodda, önce `useForm` işlevini kullanarak bir form örneği oluşturuyoruz. `useForm` işlevi, form için çeşitli seçenekler alır. Bunlar arasında form ID’si, yöntem, eylem, varsayılan değerler ve doğrulama şeması bulunur. Ardından, `handleSubmit` işlevini kullanarak form gönderme işlemini ele alıyoruz. Bu işlevde, önce `submit()` işlevini çağırıyoruz ve ardından form verilerini `setFormData` işlevini kullanarak güncelliyoruz.

Form Doğrulaması

Form doğrulaması, web uygulamaları için önemlidir ve kullanıcıların doğru bilgiler girmesini sağlar. Next.js form bileşeni, doğrulama için çeşitli seçenekler sunar. Bunlar arasında, `validationSchema` seçeneği kullanılarak belirtilebilen, kendi özel doğrulama kurallarınızı tanımlamanıza olanak tanır.

Yukarıdaki örnekte, `validationSchema` seçeneği kullanılarak “name” ve “email” alanları için doğrulama kuralları belirtilmiştir. Bu kurallar, alanların zorunlu olup olmadığını ve değerlerinin geçerli olup olmadığını kontrol eder. Form gönderildiğinde, doğrulama kuralları uygulanır ve herhangi bir hata varsa, `errors` nesnesinde gösterilir. `errors` nesnesini, form alanlarının altında hata mesajlarını görüntülemek için kullanabilirsiniz.

Form Veri İşleme

Form gönderildiğinde, form verileri bir sunucu uç noktasına gönderilir. Next.js form bileşeni, form verilerini işlemeyi kolaylaştırmak için `action` seçeneği sunar. `action` seçeneği, form gönderildiğinde verilerin gönderileceği sunucu uç noktasını belirtir. Sunucu uç noktası, genellikle API uç noktasını temsil eden bir HTTP isteği işleyicisi olur. API uç noktası, form verilerini alır ve bunları veri tabanına kaydeder veya diğer işlemler yapar.

Örneğin, yukarıdaki örnekte, `action` seçeneği `/api/submit` olarak ayarlanmıştır. Bu, form verilerinin `/api/submit` uç noktasına gönderileceği anlamına gelir. `/api/submit` uç noktası, gelen form verilerini işlemeyi ve bir yanıt döndürmeyi sağlayacak bir HTTP isteği işleyicisi içerir. Sunucu uç noktası, form verilerini işlemek ve bir yanıt döndürmek için aşağıdaki kodu kullanabilir:

“`javascript
import { NextApiRequest, NextApiResponse } from ‘next’;

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const { name, email } = req.body;

// Form verilerini işlemek için buraya kod ekleyin
// Örneğin, verileri bir veri tabanına kaydedebilirsiniz.

res.status(200).json({ message: ‘Form başarıyla gönderildi.’ });
}
“`

Sonuç

Next.js form bileşeni, form oluşturmayı ve işlemeyi kolaylaştıran güçlü bir araçtır. Bu makalede, form bileşenini kullanmanın temellerini, doğrulama ve veri işleme gibi önemli konuları ele aldık. Next.js form bileşeni, web uygulamalarınız için form oluşturmak için harika bir seçenektir.

Eğer Next.js form bileşeni hakkında daha fazla bilgi edinmek istiyorsanız, lütfen Next.js resmi belgesine göz atın. [Next.js Form Bileşenleri](https://nextjs.org/docs/app/building-your-application/data-fetching/forms) Ayrıca, kendi web sitenizi oluşturmak için Next.js kullanmayı da düşünebilirsiniz. Kendi web sitemi [Fatih Soysal](https://fatihsoysal.com/) oluşturmak için Next.js kullandım ve çok memnunum.

#Etiketler: Next.js, Form, Bileşen, Doğrulama, Veri İşleme, Web Geliştirme, Uygulamalar, Form Gönderme, API, Uç Noktası, HTTP, İstek İşleyici