Email management

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

August 10, 2023
Discover a seamless approach to sending transactional emails in Next.js without complex API integrations. Explore the alternative SuprSend method now!
TABLE OF CONTENTS

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
		
    
Copied ✔


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

    
cd my-next-project
		
    
Copied ✔

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
		
    
Copied ✔


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
		
    
Copied ✔


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}`);
});

		
    
Copied ✔

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");
  }
});

		
    
Copied ✔


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",
  },
};
    
		
    
Copied ✔


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": ""
}

		
    
Copied ✔


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!

Get a powerful notification engine with SuprSend
TABLE OF CONTENTS

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
		
    
Copied ✔


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

    
cd my-next-project
		
    
Copied ✔

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
		
    
Copied ✔


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
		
    
Copied ✔


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}`);
});

		
    
Copied ✔

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");
  }
});

		
    
Copied ✔


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",
  },
};
    
		
    
Copied ✔


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": ""
}

		
    
Copied ✔


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!

Written by:
ABOUT THE AUTHOR

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Implement a powerful stack for your notifications
By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.