Next.js'te Nodemailer ve Server Actions ile Basit E-Posta Gönderme

Next.js ile projeler geliştirirken bir noktada e-posta gönderme ihtiyacı neredeyse kaçınılmaz oluyor: ister bir iletişim formu, ister şifre sıfırlama, ister bir kullanıcıya bildirim gönderme. Araştırmalarım sırasında birçok farklı servis karşıma çıktı: Resend, EmailJS, Mailgun, SendGrid… Derken, Nodemailer Node.js kütüphanesi dikkatimi çekti. Kurulumu basit, ücretsiz, kendin kontrol edebiliyorsun ve Gmail gibi SMTP servisleriyle direkt çalışabiliyor olması benim için onu avantajlı kıldı. Bu yüzden deneyimlemek istedim.

Hemen küçük bir demo oluşturarak Nodemailer'ı test ettim. Bu yazıda, hem kendi deneyimlerimi paylaşmak hem de sizin de kolayca uygulayabilmeniz için adım adım nasıl e-posta gönderimi yapılacağını göstermek istiyorum.

🛠️ İlk Olarak Ne Yaptım?

İşe Gmail hesabımı yapılandırarak başladım. Çünkü Nodemailer'ın Gmail üzerinden e-posta gönderebilmesi için bazı izinlere ihtiyacı var.

Ben zaten 2 adımlı doğrulama kullandığım için (eğer kullanmıyorsanız e-posta güvenlik ayarlarından bunu aktifleştirmeniz gerekecek), Gmail hesabımda Uygulama Şifresi (app password) oluşturdum. Uygulama olarak "Mail", cihaz olarak "Diğer" seçip bir isim verdikten sonra (örneğin: Nodemailer) Gmail size 16 karakterlik bir şifre veriyor. Bu şifreyi .env dosyamızda kullanacağız. Bunu bir yere not almayı unutmayın.

🔒 Nodemailer'ı Kurdum ve Ortam Değişkenlerini Ayarladım

Gmail tarafındaki ayarları hallettikten sonra artık projeye dönebiliriz. İlk olarak Nodemailer'ı projemize ekliyoruz:

npm install nodemailer

Daha sonrasında projenin kök dizininde bir .env.local dosyası oluşturuyoruz ve aşağıdaki gibi dolduruyoruz:

EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=seningmailadresi@gmail.com
# Biraz önce oluşturduğumuz uygulama şifresi
EMAIL_PASS=uygulama_sifresi_buraya
EMAIL_FROM_NAME="SeninAdın veya ProjeAdı"

📄 Server Action ile Mail Gönder

Biz server action özelliği kullanarak formdan gelen verileri alıp Nodemailer ile e-posta göndereceğiz.

// app/actions/sendEmail.ts
'use server';

import nodemailer from 'nodemailer';

export async function sendEmail(formData: FormData) {
  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  // Mail gönderici (transporter) tanımı
  const transporter = nodemailer.createTransport({
    host: process.env.EMAIL_HOST,
    port: Number(process.env.EMAIL_PORT),
    auth: {
      user: process.env.EMAIL_USER,
      pass: process.env.EMAIL_PASS,
    },
  });

  try {
    await transporter.sendMail({
      from: `"${process.env.EMAIL_FROM_NAME}" <${process.env.EMAIL_USER}>`,
      to: process.env.EMAIL_USER,
      subject: `📬 New Contact Form Message - ${name}`,
      text: `
You have a new message:

👤 Sender: ${name}
📧 Email: ${email}

📝 Message:
${message}
    `,
    });

    return { success: true, message: 'Email sent successfully!' };
  } catch (error) {
    console.error('Error sending email:', error);
    return { success: false, message: 'Failed to send email. :(' };
  }
}

🔸 Not: Bu işlem API Route kullanılarak da yapılabilirdi. Ama Server Actions sayesinde form verilerini doğrudan sunucu tarafında işleyebiliyorum, bu da fazladan bir api/send endpoint'i yazma ihtiyacını ortadan kaldırıyor. Kod daha modüler, sade, basit ve doğrudan formla ilişkili hale geliyor.

📄 Formu Oluşturup Server Action'ı Tetikledim

Kendi demo çalışmamda shadcn + React Hook Form + Zod kullanarak formumu oluşturdum ancak burada basit kullanım açısından şöyle örneklemek istedim:

// app/contact/page.tsx
"use client";

import { sendEmail } from "../actions/sendEmail";

export default function ContactForm() {
  // Server Action'ı formun action özelliğiyle bağladık
  async function handleSubmit(formData: FormData) {
    const result = await sendEmail(formData);
    alert(result.message);
  }

  return (
    <form action={handleSubmit}>
      <input type="text" name="name" placeholder="Your Name" required />
      <input type="email" name="email" placeholder="Your Email" required />
      <textarea name="message" placeholder="Your Message" required />
      <button type="submit">Send Email</button>
    </form>
  );
}

🧩 Test Et

Artık formumuzu oluşturduk ve server action ile Nodemailer'ı entegre ettik. Şimdi sıra bunu test etmekte.

Formu doldurup gönder tuşuna bastığımızda, Nodemailer arka planda Gmail SMTP üzerinden e-postamızı başarıyla gönderdi! Konsolda herhangi bir hata görünmedi ve alıcı adresine mesajımız ulaştı.

📦 Aldığımız e-posta da bu şekildedir:

Bu basit test, Next.js'in server actions özelliği ile Nodemailer kullanarak nasıl hızlıca bir e-posta gönderme servisi kurulabileceğini gösterdi.

🎯 Sonuç

Bu yazıda, Next.js'in modern mimarisiyle Nodemailer kullanarak nasıl pratik bir e-posta gönderme sistemi kurabileceğimizi adım adım gördük. Server actions sayesinde daha sade ve okunabilir bir backend mantığı kurabiliyoruz.

Bu yaklaşımın en güzel yanı, tamamen ücretsiz olması. Yani ekstra bir alan adı satın almaya veya ücretli e-posta servislerine kaydolmaya gerek yok. Gmail gibi yaygın servislerle hızlıca entegre olup projenize hemen başlayabilirsiniz.

Ayrıca kurulum süreci oldukça basit olduğu için özellikle yeni başlayanlar için ideal. Daha karmaşık altyapılara geçmeden önce temel mantığı öğrenmek için birebir.

Daha büyük projelerde veya profesyonel ortamda farklı çözümler tercih edilse de, bu yöntem küçük uygulamalar ve hızlı prototipleme için fazlasıyla yeterli olacaktır.

Umarım bu rehber sizin için faydalı olmuştur. Keyifli kodlamalar! ☕💻

Bu yazı ilk olarak Medium'da yayınlandı.