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

پروژه و کدهای مورد استفاده در ویدیوی فوق در اینجا قابل مشاهده و دسترسی هستند.

برای استفاده از سرویس ایمیل در برنامه‌های NextJS، می‌توانید از پکیج nodemailer استفاده کنید که بایستی با دستور زیر، آن را در پروژه خود، نصب کنید:

کپی

npm install nodemailer

پس از آن، کافیست تا طبق مستندات SMTP، یک دسترسی SMTP و طبق مستندات افزودن نشانی، یک نشانی برای ایمیل‌سرور خود، ایجاد کنید. در نهایت نیز، بایستی اطلاعات مربوط به ایمیل‌سرور خود را به متغیرهای محیطی برنامه خود (در فایل env.local. در حالت Development، و در فایل env.production. در حالت Production)، اضافه کنید؛ به عنوان مثال:

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

اکنون، کافیست که در مسیرpages/api یک فایل به نام send-email.js ایجاد کنید و قطعه کد زیر را، درون آن، قرار دهید:

کپی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: true, 
    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 });
  }
}

فیلد from باید یکی از نشانی‌های اضافه شده در سرویس ایمیل باشد.

تمامی کارها انجام شده است و شما می‌توانید از ایمیل‌سرور در برنامه خود استفاده کنید؛ به عنوان مثال، می‌توانید قطعه کد زیر را در فایل pages/index.js، قرار دهید:

کپی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>
  );
}

همچنین بخوانید: پورت‌های ایمیل‌سرور لیارا

ویرایش در گیت‌هاب