Using EmailJS with Next.js

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

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

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

and gives the output:

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

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

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.

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.

Key snippet:

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.