Send Emails from Your Next.js App Using EmailJS

#nextjs #javascript #tutorial #webdev

Need a way to send emails directly from your frontend? Whether it’s contact forms, notifications, or feedback messages, EmailJS makes it simple — no backend required. Here’s a step-by-step guide to integrating EmailJS with your Next.js app.

What is EmailJS?

EmailJS allows you to send emails straight from JavaScript without needing a server. It supports popular email services like Gmail, Outlook, and more. This is perfect for sending transactional emails or form submissions directly from your frontend.

Create an EmailJS Account

Go to EmailJS and sign up.
Set up an Email Service (e.g., Gmail).
Create a Template to define the email content (name, email, message, etc.).
Copy your Service ID, Template ID, and Public Key — you’ll need them later.

Install EmailJS SDK

Install the official EmailJS SDK via npm or yarn:

npm install @emailjs/browser
# or
yarn add @emailjs/browser

Build a Contact Form

Create a simple form in Next.js to capture user input and send emails via EmailJS.

"use client";
import { useState } from "react";
import emailjs from "@emailjs/browser";
import { toast } from "react-toastify";

export default function ContactForm() {
  const [formData, setFormData] = useState({ name: "", email: "", message: "" });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const serviceID = process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID;
    const templateID = process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID;
    const userID = process.env.NEXT_PUBLIC_EMAILJS_PUBLIC_KEY;

    try {
      const response = await emailjs.send(serviceID, templateID, formData, userID);
      if (response.status === 200) {
        toast.success("Message sent successfully!");
        setFormData({ name: "", email: "", message: "" });
      }
    } catch (error) {
      toast.error("Failed to send message. Please try again later.");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        placeholder="Your Name"
        value={formData.name}
        onChange={handleChange}
        required
      />
      <input
        type="email"
        name="email"
        placeholder="Your Email"
        value={formData.email}
        onChange={handleChange}
        required
      />
      <textarea
        name="message"
        placeholder="Your Message"
        value={formData.message}
        onChange={handleChange}
        required
      />
      <button type="submit">Send Message</button>
    </form>
  );
}

Highlights:

useState: Manages form data.

emailjs.send: Sends the email using EmailJS.

toast: Shows success or error notifications (optional).

Use Environment Variables

Keep sensitive data safe by storing your Service ID, Template ID, and Public Key in .env.local:

NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_public_key

Restart your development server after adding or updating environment variables.

Deploy Your App

Deploy your Next.js app to Vercel or any platform:

Push your code to GitHub.
Connect the repository in Vercel and deploy.
Add the environment variables in Vercel dashboard to enable email functionality in production.

✅ Why This Approach Works