How to Send Emails from Your React/Next.js App Using EmailJS

Tutorial · EmailJS

Send Emails from React & Next.js Without a Backend

EM

EmailJS Guide · 5 min read · Frontend

On this page

1. What is EmailJS?
2. Why use it?
3. Setting up your account
4. Install the SDK
5. Example component code
6. Important tips
7. What next?

01 What is EmailJS?

EmailJS is a service that lets you send emails directly from client-side JavaScript — no backend required. It bridges your frontend app to your email provider (Gmail, Outlook, custom SMTP) through a clean API, so users can trigger emails from contact forms, feedback widgets, or order requests right from the browser.

💡 EmailJS handles the email delivery infrastructure so you don't have to spin up a Node.js server, configure SMTP, or manage credentials on a backend.

02 Why use EmailJS?

Sending email from a frontend is normally painful — you need a server to keep credentials safe. EmailJS removes that friction entirely:

⚡Zero backendWorks entirely client-side via their JS SDK

🔌Any email providerGmail, Outlook, custom SMTP all supported

🎨Template systemDesign reusable email templates in the dashboard

🆓Free tierGenerous enough for most side projects and prototypes

03 Setting up your account

1

Create your account

Go to emailjs.com and sign up for free — no credit card needed.

2

Connect an email service

In the dashboard, link Gmail, Outlook, or your own SMTP server as an email service.

3

Create an email template

Design the email your users will receive — with dynamic variables like {{user_name}} and {{message}}.

4

Grab your IDs

Note your Service ID, Template ID, and Public Key — you'll need all three in your code.

04 Install the SDK

Add EmailJS to your project with npm or yarn:

bash

# npm
npm install @emailjs/browser

# yarn
yarn add @emailjs/browser

05 Example React component

Here's a complete, working contact form component using EmailJS:

jsx · ContactForm.jsx

'use client';

import React, { useRef, useState } from 'react';
import emailjs from '@emailjs/browser';

export default function ContactForm() {
  const form = useRef();
  const [status, setStatus] = useState('');

  const sendEmail = (e) => {
    e.preventDefault();
    setStatus('Sending...');

    emailjs.sendForm(
      'YOUR_SERVICE_ID',   // from EmailJS dashboard
      'YOUR_TEMPLATE_ID',  // your email template
      form.current,
      'YOUR_PUBLIC_KEY'    // your public key
    )
    .then(() => {
      setStatus('✓ Message sent!');
      form.current.reset();
    })
    .catch(() => {
      setStatus('✕ Failed. Please try again.');
    });
  };

  return (
    <form ref={form} onSubmit={sendEmail}>
      <input type="text"  name="user_name"  placeholder="Your name"  required />
      <input type="email" name="user_email" placeholder="Your email" required />
      <textarea name="message" rows={5} placeholder="Your message" required />
      <button type="submit">Send Message</button>
      <p>{status}</p>
    </form>
  );
}

06 Important tips

🔑Your Public Key is safe to expose in frontend — EmailJS is designed for this. Never expose a secret key though.

🌍Use environment variables (NEXT_PUBLIC_EMAILJS_KEY) instead of hardcoding IDs in production.

📧Gmail users may need to configure an App Password or enable OAuth in their Google account settings.

🧪Always test your template in the EmailJS dashboard before wiring it up to your component.

07 What next?

✅

Add validation

Use react-hook-form or Zod for robust form validation before sending.

📎

Attachments

EmailJS supports file attachments for more complex form requirements.

🔔

Auto-replies

Set up a second template to auto-reply to users who submit the form.

📈

Scale up

For high volume or more control, look at Resend or Nodemailer on the backend.