Shadcn UI Next JS: Free Email Sender

Sending emails from a UI is an essential feature in many applications. In this tutorial, we will be using SHADCN UI and Next JS to create a free email sender.

First, make sure you have Node.js installed on your computer. You can download it from the official Node.js website. Once you have Node.js installed, you can create a new Next JS project using the following command:

npx create-next-app@latest my-email-sender

Next, navigate to the project directory and install SHADCN UI by running the following command:

npm install @shadcn/ui

Next, we will create a new component for our email sender. Create a new file called EmailSender.js inside the components folder. In this file, we will create a simple form with input fields for the recipient’s email, subject, and message, as well as a submit button. Here’s the code for the EmailSender.js component:

import { useState } from 'react';

export default function EmailSender() {
  const [email, setEmail] = useState('');
  const [subject, setSubject] = useState('');
  const [message, setMessage] = useState('');

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

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

    const data = await response.json();
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        placeholder="Recipient's email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="text"
        placeholder="Subject"
        value={subject}
        onChange={(e) => setSubject(e.target.value)}
      />
      <textarea
        placeholder="Message"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      ></textarea>
      <button type="submit">Send Email</button>
    </form>
  );
}

Next, we will create an API route to handle the email sending functionality. Create a new folder called pages/api in the project directory. Inside this folder, create a new file called send-email.js. In this file, we will use the nodemailer package to send the email. Here’s the code for the send-email.js API route:

import nodemailer from 'nodemailer';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { email, subject, message } = req.body;

    const transporter = nodemailer.createTransport({
      service: 'gmail',
      auth: {
        user: 'your-email@gmail.com',
        pass: 'your-email-password',
      },
    });

    const mailOptions = {
      from: 'your-email@gmail.com',
      to: email,
      subject: subject,
      text: message,
    };

    transporter.sendMail(mailOptions, (error, info) => {
      if (error) {
        res.status(500).json({ error: 'An error occurred while sending the email' });
      } else {
        res.status(200).json({ message: 'Email sent successfully' });
      }
    });
  } else {
    res.status(405).json({ error: 'Method not allowed' });
  }
}

Make sure to replace 'your-email@gmail.com' and 'your-email-password' with your actual email address and password.

Finally, import the EmailSender component into the index.js file inside the pages folder and render it in the main component. Here’s how your index.js file should look like:

import EmailSender from '../components/EmailSender';

export default function Home() {
  return <EmailSender />;
}

That’s it! You have successfully created a free email sender using SHADCN UI, Next JS, and nodemailer. You can now run your Next JS project by running the following command:

npm run dev

Visit http://localhost:3000 in your browser and you should see the email sender form. Fill in the recipient’s email, subject, and message, and click the Send Email button to send the email.