Send emails using SendGrid from Next.js and Express.js applications

We need a few things to send emails using SendGrid. First, install @sendgrid/mail as a dependency in your project. Next, sign up for a SendGrid account if you haven't already. Then sign in to your account, navigate to 'Settings' -> 'API Keys', and click the 'Create API Key' button.

In the following screen, give your API key a name and choose 'Restricted Access' from the 'API Key Permissions' section. Next, click on 'Mail Send' from the 'Access Details' section, select full access to both the 'Mail Send' and 'Scheduled Sends', scroll down, and click the 'Create & View' button.

In the next screen, you will see the API key. Click the API key to copy it to your clipboard, save it to a safe place, and click the 'Done' button. Note that, once you click the 'Done' button, you can't view the API key anymore. So, it's important that you save the API key first.

You may have noticed that we've restricted the ability of this API key to send and schedule emails only for security measures. Feel free to add more access to the key as your application requires.

Now, navigate to SendGrid 'Settings' -> 'Sender Authentication' to authenticate a sender. Here you have two options: authenticate a domain or a particular email address. I recommend authenticating a domain, which gives you the flexibility to send emails from any email using the domain.

To authenticate a domain, click the 'Authenticate Your Domain' button. On the following screen, select your 'DNS host' from the dropdown list and click the 'Next' button. On the next screen, enter your domain, e.g., example.com, and click the 'Next' button.

On the following screen, click on the 'Manual Setup' tab, copy each 'HOST' and 'VALUE', and create respective records in your DNS host. Note that the HOST provided by SendGrid (e.g., em6159.example.com) isn't correct. The correct HOST to add to your DNS host would be the part before '.example.com'. In this case, just 'em6159'.

Once you've added all four records, scroll down, check the "I've added these records." box, and click the 'Verify' button. Depending on your DNS host it may take some time to propagate the records and complete the verification.

Email template

Now, to send an email using SendGrid, we need a template object that has a to, from, subject, and an html field, where the html is the email body. Following is an example:

const template = {
  to: 'john@johndoe.com',
  from: 'no-reply@example.com',
  subject: `Example Order Confirmation`,
  html: `
            <p>Hi there, this email confirms that your Example order has been successfully placed.</p>
            <p>Thanks,</p>
            <p>Example Team</p>
        `,
};

I usually export these templates from a @lib/templates module.

Next.js implementation

Once you have a template, create an environment variable named SENDGRID_API_KEY with your API key in your Next.js project. Then, navigate to the route handler or the server action from where you want to send the email. In that module, import mail and template from the @sendgrid/mail package and @lib/templates module respectively.

After that, within the route handler or the server action, set the SendGrid API key using the mail.setApiKey method and use the mail.send method with the template as an argument.

import mail from '@sendgrid/mail';
import { template } from '@lib/templates';

mail.setApiKey(process.env.SENDGRID_API_KEY as string);
await mail.send(template as MailDataRequired);

Note that the above code must be within an async function in a server environment, e.g., in a route handler or a server action. Also, every time you use the mail.send method, you have to set the API key first.

Express.js implementation

Like Next.js, create an environment variable named SENDGRID_API_KEY with your API key in your Express.js project. Then navigate to your app.ts file, import mail from the @sendgrid/mail package, and set the SendGrid API key using the mail.setApiKey method.

import mail from '@sendgrid/mail';

mail.setApiKey(process.env.SENDGRID_API_KEY as string);

Unlike Next.js, we don't need to set the API key every time we want to send an email in Express.js. Rather, setting the API key in the app.ts file sets it when the server starts. After that, you can use the mail.send method and pass a template to it to send emails from any route or function in your Express.js app.

That's it! You now know how to generate a secure SendGrid API key, authenticate your domain on SendGrid, and send emails from your Next.js and Express.js applications using SendGrid. Feel free to share this article with someone who might find it useful. Cheers!