Next JS sitemde mail formunu nasıl çalışır hale getiririm?

Next.js, React tabanlı bir web uygulama çerçevesidir ve statik ve sunucu tarafı işlemleri destekler. Bir mail formu oluşturmak ve çalışır hale getirmek için aşağıdaki adımları takip edebilirsiniz:

  • Form bileşenini oluşturun: İlk olarak, form bileşenini oluşturun ve gerekli input alanlarını (isim, e-posta, konu, mesaj vb.) ekleyin. Formu bir handleSubmit fonksiyonu ile işlemek için onSubmit olayını kullanın.

Örnek form bileşeni:

import React, { useState } from "react";

function MailForm() {
const [formData, setFormData] = useState({});

const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};

const handleSubmit = async (e) => {
e.preventDefault();
// Form verilerini sunucuya gönder
};

return (
<form onSubmit={handleSubmit}>
<input type="text" name="name" placeholder="İsim" onChange={handleChange} />
<input type="email" name="email" placeholder="E-posta" onChange={handleChange} />
<input type="text" name="subject" placeholder="Konu" onChange={handleChange} />
<textarea name="message" placeholder="Mesajınız" onChange={handleChange} />
<button type="submit">Gönder</button>
</form>
);
}

export default MailForm;

  • API endpoint oluşturun: Next.js'te, API endpoint'leri pages/api klasöründe oluşturulan dosyalarla tanımlanır. Örneğin, pages/api/sendmail.js dosyasını oluşturun ve formdan gelen verileri işlemek için bir fonksiyon yazın.

Örnek API endpoint dosyası (pages/api/sendmail.js):

import nodemailer from "nodemailer";

export default async function handler(req, res) {
const { name, email, subject, message } = req.body;

// E-posta gönderimi için SMTP ayarları ve kimlik bilgilerini sağlayın
const transporter = nodemailer.createTransport({
host: "your_smtp_server",
port: 587,
auth: {
user: "your_email",
pass: "your_email_password",
},
});

// E-posta seçeneklerini ayarlayın
const mailOptions = {
from: email,
to: "your_email",
subject: `${subject} - ${name}`,
text: message,
};

// E-postayı gönderin ve sonucu döndürün
try {
const result = await transporter.sendMail(mailOptions);
res.status(200).json({ success: true, message: "E-posta başarıyla gönderildi." });
} catch (error) {
res.status(500).json({ success: false, message: "E-posta gönderilemedi." });
}
}

  • Form verilerini API endpoint'ine gönderin: handleSubmit fonksiyonunda, form verilerini oluşturduğunuz API endpoint'ine gönderin. Bu işlem, `fetch veya axios gibi bir HTTP istemcisi kullanarak gerçekleştirilebilir. Örneğin, form bileşenindeki handleSubmit fonksiyonunu aşağıdaki gibi güncelleyebilirsiniz:

const handleSubmit = async (e) => {
e.preventDefault();

try {
const response = await fetch("/api/sendmail", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(formData),
});

const data = await response.json();

if (data.success) {
// İşlem başarılı olduğunda yapılacaklar
alert(data.message);
} else {
// Hata olduğunda yapılacaklar
alert(data.message);
}
} catch (error) {
// İstisnai durumlar için hata yakalama
alert("Bir hata oluştu. Lütfen tekrar deneyin.");
}
};

Bu adımlar, Next.js uygulamanızda çalışan bir mail formu oluşturmanıza ve form verilerini API endpoint'ine göndererek e-posta göndermenize olanak tanır. Önemli not olarak, e-posta kimlik bilgilerinizi ve SMTP ayarlarını doğrudan API endpoint dosyasında saklamak güvenli değildir. Bunun yerine, Next.js'in ortam değişkenlerini (.env dosyası veya sunucu ortam değişkenleri) kullanarak bu bilgileri güvenli bir şekilde saklayın ve API dosyasında process.env.MY_VARIABLE şeklinde kullanın.