Email contact form using NextJS 13

A Brief Guide on Setting Up a Contact Form in Next.js with App Router and Sending Emails via Nodemailer.

An overview of what we’ll be doing here

Build a contact form using Next.js and the app router. We'll design the form UI and then set up an API route to send emails through Nodemailer to our Gmail with form data.

Creating a new NextJS project.

npm create next-app contact-form

Open the contact-form folder in VSCode (or any IDE you use).

The server now starts at http://localhost:3000. You can view the website by going to this URL. ( If your 3000 port, it will be in consecutive order like 3001,3002, and so on..)

Default NextJS starting page

Creating a simple contact form

You can start by editing app/page.tsx and remove excess code, keeping only the main tag. We'll build our form there. The form needs to be a client component. Instead of converting page.tsx (not advised), create a component folder with a new file: contact.jsx for the form.
Lastly, install react-hook-form for form management.

npm i react-hook-form

Also, we will be separating the email-sending logic into a separate file in the utils folder to simplify our codebase.

Basic UI flow

For Simplicity, code is here, enjoy. for app/page.tsx


import Contact from '@/components/contact';

export default function Home() {
  return (
    <main className='flex min-h-screen flex-col items-center justify-center p-24 bg-white'>
      <Contact />
    </main>
  );
}

Add one more npm package for the animation of sending a message from this package

npm install --save react-toastify

components/contact.tsx

"use client";
import React, { useState } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const Contact = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');

  const notify = (message) => toast(message);

  const clearFormData = () => {
    setName("");
    setEmail("");
    setMessage("");
  };

  async function handleSubmit(e) {
    e.preventDefault();
    setIsLoading(true);

    try {
      await sendFormData({ name, email, message });
      clearFormData();
      notify("🚀 Your message is on its way! Thanks for reaching out 😊. Have a fantastic day ahead! 🌟");
    } catch (error) {
      notify(`Error: ${error.message}`);
    } finally {
      setIsLoading(false);
    }
  }

  async function sendFormData(data) {
    const response = await fetch('/api/email', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    if (!response.ok) {
      throw new Error("Failed to send message");
    }

    return response.json();
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <div className='mb-5'>
          <label htmlFor='name' className='mb-3 block text-base font-medium text-black'>Full Name</label>
          <input
            type='text'
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Enter Your Name"
            className='w-full rounded-md border border-gray-300 bg-white py-3 px-6 text-base font-medium text-gray-700 outline-none focus:border-purple-500 focus:shadow-md'
            required
          />
        </div>
        <div className='mb-5'>
          <label htmlFor='email' className='mb-3 block text-base font-medium text-black'>Email Address</label>
          <input
            type='email'
            placeholder="Enter Your Email "
            className='w-full rounded-md border border-gray-300 bg-white py-3 px-6 text-base font-medium text-gray-700 outline-none focus:border-purple-500 focus:shadow-md'
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
        <div className='mb-5'>
          <label htmlFor='message' className='mb-3 block text-base font-medium text-black'>Message</label>
          <textarea
            rows={4}
            placeholder="Write Your Message Here..."
            className='w-full resize-none rounded-md border border-gray-300 bg-white py-3 px-6 text-base font-medium text-gray-700 outline-none focus:border-purple-500 focus:shadow-md'
            required
            value={message}
            onChange={(e) => setMessage(e.target.value)}
          ></textarea>
        </div>
        <button type='submit' disabled={isLoading} className='hover:shadow-form rounded-md bg-blue-500 py-3 px-8 text-base font-semibold text-white outline-none'>
          {isLoading ? 'Loading...' : 'Send'}
        </button>
        </form>
      <ToastContainer />
    </>
  );
};

export default Contact;

utils/send-email.ts

import { FormData } from '@/components/contact';

export async function sendEmail(data: FormData) {
  const apiEndpoint = '/api/email';

  fetch(apiEndpoint, {
    method: 'POST',
    body: JSON.stringify(data),
  })
    .then((res) => res.json())
    .then((response) => {
      alert(response.message);
      return true
    })
    .catch((err) => {
      alert(err);
    });
}

Setting up Nodemailer and API

Now that our basic form is completed, let’s build our API using route handlers in NextJS. But first, we need to install nodemailer. Nodemailer is a module for Node.js that makes sending emails from a server an easy task. To install it along with its types:

npm i nodemailer @types/nodemailer

Create a new folder api and another folder email inside it. Now create a new file route.ts inside it. The file path will be app/api/email/route.ts. It is done this way to create our api with the endpoint as “api/email”. Check out this doc for more information. The current project structure will be as follows:

import { type NextRequest, NextResponse } from 'next/server';
import nodemailer from 'nodemailer';
import Mail from 'nodemailer/lib/mailer';

export async function POST(request: NextRequest) {
  const { email, name, message } = await request.json();

  const transport = nodemailer.createTransport({
    service: 'gmail',
    auth: {
      user: process.env.MY_EMAIL,
      pass: process.env.MY_PASSWORD,
    },
  });

  const mailOptions: Mail.Options = {
    from: process.env.MY_EMAIL,
    to: process.env.MY_EMAIL,
    // cc: email, (uncomment this line if you want to send a copy to the sender)
    subject: `Message from ${name} (${email})`,
    text: message,
  };

  const sendMailPromise = () =>
    new Promise<string>((resolve, reject) => {
      transport.sendMail(mailOptions, function (err) {
        if (!err) {
          resolve('Email sent');
        } else {
          reject(err.message);
        }
      });
    });

  try {
    await sendMailPromise();
    return NextResponse.json({ message: 'Email sent' });
  } catch (err) {
    return NextResponse.json({ error: err }, { status: 500 });
  }
}

Create .env for storing your Gmail Credentils.

Finally your VSCode looks like this below.

After Filling all the details, and clicking send button you will see this message in top right corner.

Here all the functions for the above form are verified and you can see new email to your Gmail

Email contact form using NextJS 13

Comments

More from this blog

Quick Start to Monitoring, Alerting, and Logging in Kubernetes with Helm

Mastering CI/CD with GitHub Actions: From Code to GKE and Beyond

An overview of what we’ll be doing here

Creating a new NextJS project.

Creating a simple contact form

Setting up Nodemailer and API

Command Palette

Comments

More from this blog

An overview of what we’ll be doing here

Creating a new NextJS project.

Creating a simple contact form

Setting up Nodemailer and API