Using EmailJS with Next.js
Tags: tutorial, react, javascript, nextjs
Published: 2020-07-28 13:28:40

*This blog is part of a series where I document rebuilding a website that relies on HTML, CSS and Bootstrap in React.js using the Next.js framework to improve performance, reduce costs and increase my workflow for future changes.*

The finished website: https://wallisconsultancy.co.uk
The source code: https://github.com/james-wallis/wallisconsultancy

In the previous blog I had completed the social bar for the top of the website. Since then I've created the rest of the website and it now looks like the current implementation.

![Current implementation](https://dev-to-uploads.s3.amazonaws.com/i/yhwqk8md7bcicwq4nc87.jpg)
*Current implementation*

![New react implementation](https://dev-to-uploads.s3.amazonaws.com/i/lcp0ks2st7e891vowq5v.jpg)
*New React implementation*

You can see the contact form has been implemented in the screenshot but it doesn’t work. One way to activate it would be to make an API request to a backend server and use a service such as `nodemailer` to send the email. As this will be a static site, another method of sending emails must be used. EmailJS to the rescue!

## [EmailJS](https://www.emailjs.com/)
EmailJS is a service designed to help send emails using client side technologies only. It utilises templates that can be programatically changed through variables that are supplied when making the request.

Using EmailJS with React is easy due to the [emailjs-com](https://www.npmjs.com/package/emailjs-com) NPM package. This will be used in the new website as it seems perfect for a small site.

## Register and setup EmailJS
To use EmailJS you need to setup a free account, this gives you:
* 200 emails a month
* 2 templates
* Data Size of 50kb
* Limited contacts history
*There are other plans but for this project the free plan is fine*

Once your account is created, navigate to the email services page and select "Add new service" - this authorises EmailJS to send emails on your behalf from your email account.

![EmailJS providers](https://dev-to-uploads.s3.amazonaws.com/i/4obaenx2rrkkal20q03x.jpg)
*EmailJS provider selection screen*

Next we need to setup a template. Navigate to the Email Templates page and select “Create new template”, give it a name and an ID. You will then be taken to the template creation screen, from here you can configure exactly how you want the email to look, who you want it sent to and what you want the subject to be. 

My template looks like this:
![EmailJS template](https://dev-to-uploads.s3.amazonaws.com/i/0a131necp5kjb2e3mafe.jpg)

and gives the output:
![EmailJS output](https://dev-to-uploads.s3.amazonaws.com/i/diq52s3te7f65odv6yli.jpg)

To use variables which you can supply to EmailJS you use curly bracket notation. So for a variable called name I’d use `{{name}}`.
For more information on using variables visit [Dynamic variables in templates](https://www.emailjs.com/docs/user-guide/dynamic-variables-templates/)

## Using EmailJS in a React.js application
We’re now ready to add EmailJS into our React application.
Steps:
1. Run `npm install -s emailjs-com`
2. Follow the instructions on how to [use EmailJS with React](https://www.emailjs.com/docs/examples/reactjs/)

You’ll need to change the `YOUR*` variables to their actual values.

To get the SERVICE_ID and TEMPLATE_ID, go to the template overview and select `copy code` - this will show you their values.

![EmailJS template copy code output](https://dev-to-uploads.s3.amazonaws.com/i/vma7o64vyxrog9c4ijnf.jpg)
*An example output for the `copy code` overview*

To get the `USER_ID`, go to your account overview and click on the API KEYS tab.

*Note: It’s best practice to keep these in a `.env` file and not commit them to your source repository.*

See how I've implemented using EmailJS in a React application on [my Github - messageForm.js](https://github.com/james-wallis/wallisconsultancy/blob/master/components/messageForm.js).

[Key snippet](https://github.com/james-wallis/wallisconsultancy/blob/master/components/messageForm.js#L48):
```javascript
emailjs.send(
      process.env.EMAIL_JS_SERVICE,
      process.env.EMAIL_JS_TEMPLATE,
      params, // the values in your EmailJS template
      process.env.EMAIL_JS_USER,
    )
      .then(({ status }) => {
        // Show success message
        setFormSubmitted({ title: 'Message has been sent', paragraph: 'Mike will be in contact with you soon.' });
      }, () => {
        // Show error message
        setFormSubmitted({ title: 'Error sending message, try again later', paragraph: 'Please contact Mike either by phone or email.' });
      });
```

That’s it! You are now able to send emails from your React application without requiring a backend server.

## Round up
In this blog I’ve demonstrated how EmailJS can be used to send emails from React application with no requirement for a backend service.
 
In the next blog I will explore how Google reCaptcha can reduce the amount of spam sent from a contact form on a website and configured it to work with EmailJS.