اتصال به ایمیل‌سرور در برنامه‌های NextJS

npm install nodemailer

MAIL_HOST=smtp.c1.liara.email
MAIL_PORT=587
MAIL_USER=my-app
MAIL_PASSWORD=87b9307a-dae9-410e-89a2-e77de60e4885
MAIL_FROM=test@example.com

import nodemailer from 'nodemailer';

// This function will handle the email sending process
export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Only POST requests are allowed' });
  }

  // Create reusable transporter object using the SMTP transport
  const transporter = nodemailer.createTransport({
    host: process.env.MAIL_HOST,
    port: process.env.MAIL_PORT,
    secure: false, // true for 465, false for 587 (we're using STARTTLS here)
    auth: {
      user: process.env.MAIL_USER,
      pass: process.env.MAIL_PASSWORD,
    },
  });

  // Email options
  const mailOptions = {
    from: `"My App" <${process.env.MAIL_FROM}>`, // sender address
    to: 'test@example.com', // list of receivers
    subject: 'Test Email', // Subject line
    text: 'This is a test email sent from a Next.js API route!', // plain text body
    html: '<b>This is a test email sent from a Next.js API route!</b>', // html body
    headers: {
        "x-liara-tag": "test_email", // Tags 
      },
  };

  // Try to send the email
  try {
    const info = await transporter.sendMail(mailOptions);
    res.status(200).json({ message: 'Email sent!', info });
  } catch (error) {
    res.status(500).json({ message: 'Error sending email', error: error.message });
  }
}

import { useState } from 'react';

export default function Home() {
  const [emailSent, setEmailSent] = useState(false);
  const [loading, setLoading] = useState(false);

  const sendTestEmail = async () => {
    setLoading(true);
    try {
      const res = await fetch('/api/send-email', {
        method: 'POST',
      });

      if (res.status === 200) {
        setEmailSent(true);
      } else {
        console.error('Failed to send email');
      }
    } catch (err) {
      console.error('Error:', err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <h1>Send Test Email</h1>
      <button onClick={sendTestEmail} disabled={loading}>
        {loading ? 'Sending...' : 'Send Email'}
      </button>
      {emailSent && <p>Email successfully sent!</p>}
    </div>
  );
}