Alternative Method - Send Transactional Emails in Next.js Using Any Email Provider Without API Integrations

In a previous guide, we delved into the process of sending transactional emails using AWS SES, highlighting its complexities and setup intricacies. Building upon that foundation, we now present an alternative path that promises simplicity and efficiency: sending transactional emails using SuprSend in your Next.js application. Whether you are using AWS SES, Brevo (formerly Sendinblue), Sendgrid, Mailchimp, Mailjet, Mandrill, Postmark or other, this guide will walk you through the streamlined process of integrating SuprSend, and configuring your email vendor without any manual vendor API integrations.

Introducing SuprSend

SuprSend is a powerful platform that simplifies the process of sending transactional emails and notifications, making it an excellent alternative to manual setups like AWS SES. With SuprSend, you can enjoy the following benefits:

• Effortless Setup: Skip the complex setup procedures. SuprSend offers a user-friendly interface that allows you to integrate transactional email functionality with minimal code.
• Centralized Reporting: SuprSend provides a dashboard where you can monitor the delivery status of your emails, ensuring that your communications are reaching the intended recipients.
• Template Management: Create, edit, and manage email templates from a centralized dashboard. SuprSend simplifies the template design process, making it easy to craft engaging emails.

Now, let's dive into the steps to set up and implement transactional email sending using SuprSend in your Next.js application.

Step 1: Initial Setup

To get started, you'll need a Next.js application up and running. If you haven't already, follow these steps:

1. Install Node.js: Ensure that Node.js is installed on your system. You can download the latest LTS version from the official Node.js website.

2. Create a New Next.js Project: Open your terminal and run the following command to create a new Next.js project:

    
npx create-next-app my-next-project
		
    

3. Navigate to the Project: Move into the newly created project directory:

    
cd my-next-project
		
    

Step 2: Integrating SuprSend

1. Sign Up and Obtain API Credentials: If you haven't already, sign up for a SuprSend account. After registration, navigate to your SuprSend dashboard to obtain your API key and secret.

2. Installing Required Packages: In your project directory, install the necessary packages using the following command:

    
npm install @suprsend/node-sdk express body-parser
		
    

3. Configure SuprSend Credentials: In your project's root directory, create a `.env` file and add your SuprSend API key and secret:

    
WORKSPACE_KEY=Your_Suprsend_Workspace_Key
WORKSPACE_SECRET=Your_Suprsend_Workspace_Secret
		
    

‍
4. Setting Up the Express Server: Create a file named `index.js` in your project directory. This file will be the main entry point of your application:

    
// index.js
require("dotenv").config();
const express = require("express");
const bodyParser = require("body-parser");

const { Suprsend } = require("@suprsend/node-sdk");
const { Workflow } = require("@suprsend/node-sdk");

const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static("public"));

const workspace_key = process.env.WORKSPACE_KEY;
const workspace_secret = process.env.WORKSPACE_SECRET;
const supr_client = new Suprsend(workspace_key, workspace_secret);

// Define routes and email-sending logic here

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server started on port ${port}`);
});

		
    

Step 3: Implementing Email Sending

Now that we have the foundation in place, let's implement the email-sending functionality using SuprSend.

1. Sending Notifications Route: In your `index.js` file, add the route to handle sending notifications:

    
app.post("/send-notification", async (req, res) => {
  let { user_id, user_phone, tenant_id } = req.body;
  if (!tenant_id) tenant_id = "suprsend1";

  try {
    const workflow_body = {
      // Define your workflow configuration here
    };

    const wf = new Workflow(workflow_body, { brand_id: tenant_id });
    const response = await supr_client.trigger_workflow(wf);

    console.log("Email notification sent:", response);
    res.json({ user_id, user_phone });
  } catch (err) {
    console.error("Error sending notification:", err);
    res.status(500).send("Internal Server Error");
  }
});

		
    

2. Workflow Configuration: Define the workflow configuration within the `workflow_body` object:

    
const workflow_body = {
  name: "Suprsend-NotificationApi",
  template: "suprsend-api-notification-system",
  notification_category: "transactional",
  users: [
    {
      distinct_id: user_id,
      $email: [user_id],
      $sms: [user_phone],
    },
  ],
  delivery: {
    success: "seen",
    mandatory_channels: [],
  },
  data: {
    Data: "Suprsend is a platform where you can send notifications",
  },
};
    
		
    

3. Invoking the Route: To send a notification, make a POST request to the `/send-notification` route. You'll need to provide the following details in the request body:

    
{
    "user_id": "user@example.com",
    "user_phone": "user_phone_number",
    "tenant_id": ""
}

		
    

Before sending the request, ensure that the `tenant_id` is present in the Brands section in your SuprSend dashboard. The next process would be to choose your email vendor, set their API keys in the SuprSend application, create workflows and brands. Everything can be done on the application, without ever needing to write a single line of code.

Setting Email Vendor without API Integration

Head to 'Vendors' tab on the application, where you can choose your preferred vendor, and put in the necessary API details for integration.

‍

For setting workflows, follow this documentation: Workflows

For setting Brands & branding elements, follow this documentation: Brands

Check your triggered emails from above method here: Mail Check

Conclusion

By following this comprehensive guide, you've successfully integrated SuprSend into your Next.js application for sending transactional emails. SuprSend's simplified setup and centralized reporting provide a powerful alternative to manual email setups. You can now enjoy streamlined communication with your users, allowing you to focus on building exceptional user experiences.

Remember that SuprSend offers even more advanced features, such as centralized template management and insightful delivery reports, making it an ideal solution for your transactional email needs.

Happy emailing with SuprSend!