Next JS - Nodemailer İle Mail Gönderme

20 Ağustos 2024

#Next.Js#Yazılım#Nodemailer#HTML

Bu yazımızda, Nodemailer uygulamasını kullanarak web sitesi üzerinden nasıl mail gönderebileceğimizden bahsedeceğiz. Aslında oldukça basi ve oldukça kulanışlı bir araç. Şimdi adım adım uygulamaya geçelim.

- Öncelikle uygulama için gmail kullanacağız. Siz başka bir mail uzantısı ile yapacaksanız bunu uyarlamanız gerekiyor.

- İlk başta öncelikle nodemail ugulamasını package'larımıza indiriyoruz.

- npm install nodemailer

- package yüklendikten sonra config dosyasını yazabiliriz. Bu config dosyasını illa app dosyasına içine yazmamız gerekmiyor. Ben utils içinde bir yere yazıyorum.

import nodemailer from "nodemailer";

export const envEmail = process.env.NEXT_PUBLIC_EMAIL as string;
const pass = process.env.NEXT_PUBLIC_EMAIL_PASS as string;

if (!envEmail || !pass) {
  throw new Error("Email or password environment variables are not set");
}

export const transporter = nodemailer.createTransport({
  host:"smtp.gmail.com",
  port:587,
  secure:false,
  auth: {
    user:envEmail,
    pass,
  },
});

transporter.verify((error, success) => {
  if (error) {
    console.error("Error setting up transporter:", error);
  } else {
    console.log("Transporter is ready to send emails");
  }
});

- Burada .env dosyasından aldığımız envMail, kendi mail adresimiz veya site üzerinden mail kimden gidecek ise onun mail adresi.

- Yine .env dosyasından aldığımız pass ise gmail hesabından almamız gerekiyor. Bunun için google hasabınıza gidip güvenlik kısmına gidin. Oradan app passwords seçeneğinden alabilirsiniz.

- Burada oluşturduğumuz transporter bizim için öndemli.

- Şimdi server component olarak kullandığımız sayfalardan birinde mail gönderme fonksiyonunu yazalım.

export const sendEmail = async (prevState:any, formData:any) => {
  try {
    await dbConnect();
  } catch (error) {
    console.error(error);
    return [];
  }
  const templatePath = path.join(
    process.cwd(),
    "templates",
    "contactEmailTemp.html"
  );
  let htmlTemplate = fs.readFileSync(templatePath, "utf8");
  try {
    const email = formData.get("email");
    const title = formData.get("title");
    const message = formData.get("message");

    htmlTemplate = htmlTemplate
      .replace("{{senderEmail}}", email)
      .replace("{{subject}}", title)
      .replace("{{message}}", message);

    await transporter.sendMail({
      to: envEmail,
      from: email,
      subject: title,
      html: htmlTemplate,
    });
    return { msg:"Mesajınız Gönderildi", success:true };
  } catch (error) {
    return { msg:"Mesajınız Gönderildi: "+ error, success:false };
  }
};

- Bu fonksiyon örnek olarak email, title ve message, sitenizden alınan bir formdan geliyor. Buradaki email, size mail atarak ulaşmaya çalışan kişinin mail adresi.

- html kısmında ki htmlTemplate bize gelen mailin stilini belirtyor. Normal html formatında. .html olarak yine utils dosyalarınızın yanında aşağıdaki örnekte ki gibi oluşturabilirsiniz.

<html>

  <head>

    <style>

      body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 0;
      }
      .

container {
        background-color: #ffffff;
        margin: 20px auto;
        padding: 20px;
        max-width: 600px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }

      h1 {
        color: #333333;
        font-size: 24px;
        text-align: center;
      }

      .message-header {
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #dddddd;
      }

      .message-header h2 {
        font-size: 20px;
        color: #555555;
      }

      .message-header p {
        font-size: 14px;
        color: #777777;
        margin: 5px 0;
      }

      .message-body {
        font-size: 16px;
        color: #333333;
        line-height: 1.6;
        margin-bottom: 20px;
      }

      .footer {
        text-align: center;
        font-size: 12px;
        color: #aaaaaa;
        margin-top: 20px;
        border-top: 1px solid #dddddd;
        padding-top: 10px;
      }

    </style>
  </head>
  <body>

    <div class="container">

      <h1>Altan's Blog Yeni Mesaj</h1>
      <div class="message-header">

        <h2>Mesaj Detayı</h2>

        <p><strong>From:</strong> ({{senderEmail}})</p>

        <p><strong>Subject:</strong> {{subject}}</p>

      </div>
      <div class="message-body">

        <p>{{message}}</p>
      </div>
      <div class="footer">
        <p>Bu mail Altan's websitesinden gelmiştir</p>
      </div>

      <p class="footer2">
        Web sitemizi ziyaret ederek detalı bilgi alabilirsiniz
      </p>

      <a href="http://localhost:3000/home"><strong>Altan's Blog</strong></a>

    </div>

  </body>

</html>

- Yukarıdaki html kodu sonrası artık uygulama kullanıldığında bana aşağıdaki gibi bir mesaj geliyor.

Altan's Blog Yeni Mesaj

Mesaj Detayı

From: ({{senderEmail}})

Subject: {{subject}}

Web sitemizi ziyaret ederek detalı bilgi alabilirsiniz

Altan's Blog

Bu yazımız da burada bitiyor. Konu ile alakalı soru, sorun veya katkınız için aşağıya yorum yazabilir yada iletişim kısmından bana ulaşabilirsiniz.