Setting Up Transactional Emails with Mailgun

Overview

This guide will walk you through the process of setting up transactional emails using Mailgun for your Next.js 14 SaaS application. You'll learn how to create a new account, retrieve your API key and domain, create a template, and configure your environment variables.

Step 1: Create a Mailgun Account

- Go to the Mailgun website.

- Click on "Sign Up" and follow the prompts to create a new account.

- After signing up, verify your email address by clicking on the verification link sent to your email.

- Once your account is verified, log in to the Mailgun dashboard.

Step 2: Retrieve Your Mailgun API Key

- In the Mailgun dashboard, navigate to the "Settings" tab and select "API Keys".

- Find the "Private API key" and click the "View" button.

- Copy the API key and store it securely.

- Open your .env file in your project and add the following line, replacing your_mailgun_api_key with the API key you copied earlier:

Step 3: Retrieve Your Mailgun Domain

- In the Mailgun dashboard, go to the "Sending" tab and select "Domains".

- If you don't have a domain already, click on "Add New Domain" and follow the instructions to set up a new domain.

- Copy the domain name provided by Mailgun.

- Add the following line to your .env file, replacing your_mailgun_domain with your actual Mailgun domain:

Step 4: Create a Template in Mailgun

- In the Mailgun dashboard, go to the "Sending" tab and select "Templates".

- Click on "New Template" to create a new email template.

- Give your template a name (e.g., "WelcomeEmail") and add the HTML content for your email.

- After adding the content, click "Save Template".

- After saving the template, click on the template name to view its details.

- Click on the "Code Examples" tab and select "Node.js" to see the code example for using this template.

Step 5: Adjust the Code in Your Project

- In your project, navigate to the utils/mailgun/ directory and locate the welcomeMail.ts file.

- Look at the Node.js code example provided by Mailgun after you create your new template.

- Adjust the existing code in welcomeMail.ts according to the example provided by Mailgun to ensure it integrates properly with your new template.