
Email Testing with Mailtrap in NextJS
Posted by
kamlesh paulon
Jan 16, 2025| 3 min read
Last updated on : Jan 16, 2025
Table of contents
- Introduction to Mailtrap
- Setting Up Your Mailtrap Account
- Configuring SMTP in Next.js
- Updating Your Email Configuration
- Testing Emails Locally with Mailtrap
- Conclusion
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
- Visit Mailtrap's official website and create a free account.
- 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
- Start your Next.js development server using
npm run dev
. - Trigger the email-sending functionality from your application.
- 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.
Get updates directly to your inbox.
Join 500+ developers getting updates on Laravel & Next.js tips. No spam,
unsubscribe anytime.