How Send Email In Next Js App With Email Js Module?

How Send Email In Next.js App With Email Js Module?

Hello There, In this blog I will explain to you that how you can send mail in the Next.js app with help of the email JS node module. So, In Node.js the nod emailer module is most of the time use for sending the mail, but in production node-mailer sometimes not able to send the mail. This is an Error or issue here. Also, this hash solution, but I find the one of the best alternatives to this is email js. Email-js is a node module which use for sending mail and also very easy and fast.

So, In this post, we are going to build a Next.js app which takes user email as input and sends mail to the user. Hope You Link It.

Creating Next.js Starting Project

npx create-next-app

Run the above command in the terminal and then just give the project name. Then run npm run dev to see app is running fine.

npm run dev

Then Install Axios and email-js for sending the mail

npm i emailjs axios

Creating Main Page

Now replace index.js app to code given below

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { useState } from 'react';
import axios from 'axios';
 
export default function Home() {
 
 const [email,setEmail]=useState('');
 
 const SendMail = async (e)=>{
   e.preventDefault();
   console.log('call');
 }
 
 return (
   <div className={styles.container}>
     <Head>
       <title>Create Next App</title>
       <meta name="description" content="Generated by create next app" />
       <link rel="icon" href="/favicon.ico" />
     </Head>
    
 
     <main className={styles.main}>
       <form>
      <input type="email" placeholder="Enter Mail" required value={email} onChange={(e)=>setEmail(e.target.value)}></input>
      <button onClick={SendMail}>Send</button>
        </form>
     </main>
   </div>
 )
}

We have one useState email which is used for store user email and when the user click on the send button the Sendmail Function will call.

Till this point you can see projects like below and when you Enter mail and click send you can see output call in console.

Creating Send Mail API

Next.js is used the server-side rendering, and we can create API and make request to that API in client side. Let’s create API for send the mail.

Add email.js file to API folder

Enter below Code to file

export default function handler(req, res) {
  res.status(200).end(JSON.stringify({ message:'Send Mail' }))
}

Just open http://localhost:3000/api/email this link in browser and you can see JSON Out Put on Screen.

1. First, We Import For Send SMTP Client SMTP service mail (like Gmail)

import { SMTPClient } from 'emailjs';

2. Then We have to create client object by passing you email and password

const client = new SMTPClient({
   user: process.env.mail,
   password: process.env.password,
   host: 'smtp.gmail.com',
   ssl:true
 });

3. Then with the help of client.send() method, we can send mail.

client.send({
       text: `Just for testing purpose`,
       from: process.env.mail,
       to: email,
       subject: 'testing emailjs',
  });

email.js file

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
import { SMTPClient } from 'emailjs';
 
export default function handler(req, res) {
 
 const {email}=req.body;
 
 const client = new SMTPClient({
   user: process.env.mail,
   password: process.env.password,
   host: 'smtp.gmail.com',
   ssl:true
 });
 
 try{
 
   client.send(
     {
       text: `Just for testing purpose`,
       from: process.env.mail,
       to: email,
       subject: 'testing emailjs',
      
     });
   }
 catch(e){
   res.status(400).end(JSON.stringify({ message:"Error" }));
   return;
 }
 
 res.status(200).end(JSON.stringify({ message:'Send Mail' }));
}

So, Our API, For Sending mail is finish.

Finishing frontend Work

In Sendmail Function we are going to make post request to email API with the help of Axios.

Add In Sendmail Function

axios.post('http://localhost:3000/api/email',{email})
   .then((res)=>{
     alert('Send Mail To You')
     setEmail('')
   }).catch((e)=>console.log(e))

And that’s it, you are successfully able to create an email send app in Next.js.

Code:hear

Note: Sometimes client.send() methods do not work in production. For the Solution of this just use Client.sendAsync(). This will also work in development.

const message = await client.sendAsync({
		   text: `Just for testing purpose`,
       from: process.env.mail,
       to: email,
       subject: 'testing emailjs',
});

How Send Email In Next.js App With Email Js Module?

Find More