Bu yazımda Next.Js ile e-posta nasıl gönderiliri öğrenceksiniz.

Gereksinimler

Next.Js ile e-posta göndermek için için SMTP bilgilerine sahip olmamız gerekiyor. SMTP ne diye soracak olursanız mail göndermemize yarayan sunucu diyebiliriz. SMTP bilgilerini elde etmek için birden fazla yol vardır bunlardan en yaygını gmail ve eğer siteniz varsa kendi SMTP bilgileriniz.

Bu yazımda kendi websitemin SMTP bilgilerini kullanarak anlatacağım. Yakında gmail smtp hakkında da yazı yazacağım takip edebilirsiniz.

SMTP Bilgileri Nasıl Öğrenilir ?

Şimdi analatacağım yöntem için bir adet alan adı ve hostinge ihtiyacınız var. Nasıl sıfırdan websitesi yapılır onu anlatmayacağım belki başka bir yazımda anlatabilirim. Var olan siteniz üzerinden nasıl SMTP bilgerini elde edebilirsiniz onu anlatacağım.

Bende bulunan Cpanel ve Direct Admin panellerinden anlatacağım.

Cpanel

Cpanele giriş yaptıktan sonra araçların altında bulnan E-Posta Hesapları kısmna tıklayın.

Karşınıza böyle bir ekran geldikten sonra sağ yukarıda bulunan Oluştur seçeneğine tıklayın.

Karşınıza yeni eposta oluşturma ekranı gelecektir. Buradan kullanıcı adınız ve şifreinizi belirleyerek Oluştur botununa tıklayın.

E-posta adresiniz oluştuktan sonra en sağda bulunan Connect Devices seçeneğine tıklayın.

Çıkan ekrandan bağlantı bilgilerinizi öğrenebilirsiniz.

Direct Admin

Panele giriş yaptıktan sonra karşınıza böyle bir ekran gelecektir. Bu ekrandan E-mail Manager altında bulunan E-mail accounts kısmına tıklayın.

Gelen ekrandan sağ yukarı da bulunan Create Account seçeneğine tıklayarak yeni bir e-posta oluşturun.

E Posta oluştuktan sonra karşınıza bu bilgilendirme ekranı çıkacaktır.

IMAP Ayarları

• IMAP Gelen Sunucusu : mail.siteismi.com
• Smtp Giden Sunucusu : mail.siteismi.com
• IMAP Gelen Port : 143
• Smtp Giden : 587
• Kullanıcı adı : mail@siteismi.com (oluşturduğunuz e-posta adresi)
• Parola :E-posta şifreniz.

POP3 Ayarları

• Pop3 Gelen Sunucusu : mail.siteismi.com
• Smtp Giden Sunucusu : mail.siteismi.com
• Pop3 Gelen Port : 110
• Smtp Giden : 587
• Kullanıcı adı : mail@siteismi.com
• Parola : E-posta şifreniz.

E-Posta Göndermek (App Route)

İlk olarak nodemailer paketinni kurmamız lazım.

npm install nodemailer

npm i --save-dev @types/nodemailer

Kodları terminale yapıştırarak gerekli paketleri kurun.

Daha sonra next.config.mjs dosyasına giderek SMTP bilgilerini giriniz.

  env: {
        SMTP_HOST:"mail.websiteniz.com",
        SMTP_PORT :"465",
        SMTP_USER :"deneme@websiteniz.com",
        SMTP_PASSWORD :"E-Posta Şifreniz",
        SMTP_FROM_EMAIL :"deneme@websiteniz.com",
        SMTP_TO_EMAIL :"gönderilecek mail",
      },

Bilgileri girdikten sonra /app/api/send-mail/route.ts dosyasını oluşturun.

import { NextRequest, NextResponse } from 'next/server';
import nodemailer from 'nodemailer';
import Mail from 'nodemailer/lib/mailer';
import { render } from "@react-email/render";
import NewMessage from '@/emails/news-message';

export async function POST(request: NextRequest) {
  const { name, surname, email, phoneNumber, message } = await request.json(); 
  // Gerekli bilgileri steğinize göre düzenleyebilirsiniz.

  const transport = nodemailer.createTransport({
    host: process.env.SMTP_HOST,
    port: parseInt(process.env.SMTP_PORT || "587"),
    secure: true,
    auth: {
      user: process.env.SMTP_USER,
      pass: process.env.SMTP_PASSWORD,
    },
  });

  try {
    await transport.verify(); 
    const mailOptions: Mail.Options = {
      from: process.env.SMTP_FROM_EMAIL,
      to: process.env.SMTP_TO_EMAIL,
      // cc: email, Bilgi göndermek istiyorsanız bırayı aktif hale getirin.
      subject: `${name} kişisinden mesajınız var`,
      text: message,
    };

    await transport.sendMail(mailOptions);
    return NextResponse.json({ message: 'Email sent' }); //Başırılı dönüş
    
  } catch (err) {
    return NextResponse.json({ error: err }, { status: 500 }); //Hata
  }
}

E-posta apimiz hazır sıra bunu kullanmada.

 const response = await fetch('/api/send-email', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),//Request'de yazdığımız kısımları burada yazmalıyız.
            });

E-Posta gönderme işlemimiz bu kadar. Eğer SMTP bilgilerini doğru girdiyseniz sorunsuz olarak e-posta gönderiyor olmalısınız.

E-postayı şablon ile göndermek için