Email Testing with Mailtrap in NextJS

#Introduction to Mailtrap

Testing email functionality locally can be tricky without sending actual emails to users. Mailtrap solves this problem by providing a secure virtual inbox for testing email flows. It allows developers to inspect email content, check HTML/CSS rendering, and validate email headers without spamming real inboxes.

If you're new to email functionality in Next.js, I recommend first reading How to Send E-Mail Using NodeMailer and React Email in Next.js. It covers setting up NodeMailer and creating React-based email templates in detail.

#Setting Up Your Mailtrap Account

1. Visit Mailtrap's official website and create a free account.
2. Once logged in, create a new inbox and copy the SMTP credentials provided under the "Integration" tab.
   • Host: e.g., smtp.mailtrap.io
   • Port: e.g., 587
   • User: Your unique username
   • Password: Your unique password

#Configuring SMTP in Next.js

Update your .env file with the Mailtrap credentials:

EMAIL_HOST=smtp.mailtrap.io  
EMAIL_PORT=587  
EMAIL_USER=your-mailtrap-username  
EMAIL_PASS=your-mailtrap-password  

#Updating Your Email Configuration

Modify your existing server/email.ts file to use the new SMTP credentials. If you followed the setup in How to Send E-Mail Using NodeMailer and React Email in Next.js, this step will feel familiar.

"server-only";  
 
import { render } from '@react-email/components';  
import nodemailer, { Transporter } from 'nodemailer';  
import SMTPTransport from 'nodemailer/lib/smtp-transport';  
import { ReactElement } from 'react';  
 
let transporter: Transporter<SMTPTransport.SentMessageInfo> | null = null;  
 
const getTransporter = (): Transporter<SMTPTransport.SentMessageInfo> => {  
  if (!transporter) {  
    transporter = nodemailer.createTransport({  
      host: process.env.EMAIL_HOST as string,  
      port: parseInt(process.env.EMAIL_PORT as string),  
      secure: false,  
      auth: {  
        user: process.env.EMAIL_USER as string,  
        pass: process.env.EMAIL_PASS as string,  
      },  
    } as SMTPTransport.Options);  
  }  
  return transporter;  
};  
 
export const sendEmail = async ({  
  to,  
  subject,  
  component,  
}: {  
  to: string;  
  subject: string;  
  component: ReactElement;  
}) => {  
  const transport = getTransporter();  
  const emailHtml = await render(component);  
 
  return transport.sendMail({  
    from: 'noreply@yourdomain.com',  
    to: to,  
    subject: subject,  
    html: emailHtml,  
  });  
};  

#Testing Emails Locally with Mailtrap

1. Start your Next.js development server using npm run dev.
2. Trigger the email-sending functionality from your application.
3. Log in to Mailtrap, navigate to your inbox, and verify the test email's content and delivery status.

If you're unfamiliar with how to trigger email functionality in Next.js, refer to How to Send E-Mail Using NodeMailer and React Email in Next.js for a guide on setting up the frontend integration.

#Conclusion

Integrating Mailtrap into your Next.js workflow ensures a safe and efficient way to test email functionality. By simulating real-world email delivery scenarios, you can debug and validate email flows without the risk of reaching end-user inboxes.