I have been stuck on this issue for hours with my Next Js app. I keep getting the error:

I know the error has something to do with recipients not properly specified but I have the recipient set up through .env.local file

My api/contact/route.jsx file

import { NextResponse, NextRequest } from 'next/server'
const nodemailer = require('nodemailer');

export async function POST(request) {

    const username = process.env.NEXT_PUBLIC_EMAIL_USERNAME;
    const password = process.env.NEXT_PUBLIC_EMAIL_PASSWORD;
    const myEmail = process.env.NEXT_PUBLIC_PERSONAL_EMAIL;
    const clientId = process.env.NEXT_PUBLIC_CLIENT_ID;
    const clientSecret = process.env.NEXT_PUBLIC_CLIENT_SECRET


    console.log("dealing with request")
    const formData = await request.formData()
    const name = formData.get('name')
    const email = formData.get('email')
    const message = formData.get('message')

    require("dotenv").config()

    // create transporter object
    const transporter = nodemailer.createTransport({
        host: "smtp.gmail.com",
        service: "gmail",
        port: 465,
        tls: {
            ciphers: "SSLv3",
            rejectUnauthorized: false,
        },

        auth: {

            type: 'OAuth2',
            clientId: clientId,
            clientSecret: clientSecret,
            user: username,
            pass: password
        },
    });
   
    try {
        require("dotenv").config()

        const mail = await transporter.sendMail({
            from: username,
            to: myEmail ,
            replyTo: email,
            subject: `Website activity from ${email}`,
            html: `
            <p>Name: ${name} </p>
            <p>Email: ${email} </p>
            <p>Message: ${message} </p>
            `,
        })

        return NextResponse.json({ message: "Success: email was sent" })

    } catch (error) {
        console.log(error)
        NextResponse.status(500).json({ message: "COULD NOT SEND MESSAGE" })
    }


}

My contact.jsx component:

import Link from "next/link";

export default function ContactForm() {

    async function handleSubmit(event) {

        event.preventDefault();
        const formData = new FormData(event.target)
        try {
  
            const response = await fetch('/api/contact', {
                method: 'post',
                body: formData,
            });

            if (!response.ok) {
                console.log("falling over")
                throw new Error(`response status: ${response.status}`);
            }
            const responseData = await response.json();
            console.log(responseData['message'])
    
            alert('Message successfully sent');
        } catch (err) {
            console.error(err);
            alert("Error, please try resubmitting the form");
        }
    };

    return (
        <main className="flex min-h-screen flex-col items-center">
            <div className="divide-y divide-gray-200 pb-7 dark:divide-gray-700 xl:divide-y-0">
            <div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
                <div className="prose max-w-none pb-8 pt-10 dark:prose-invert prose-lg">
                
                    <p>
                        For any general questions or inquiries, feel free to fill out and submit the following form. I will respond by e-mail ([email protected]) as soon as possible. Let's connect!

                    </p>
                    
                </div>
            </div>
        </div>
                <form onSubmit={handleSubmit} className="mt-8 mb-2 w-80 max-w-screen-lg sm:w-96 dark:text-white">
                    <div className="mb-4 flex flex-col w-500">

                        <label htmlFor="form-name">Name </label>
                        <input id="form-name" required placeholder="Full Name" className='dark:text-white border-solid border-2 border-gray-900 rounded-md bg-white-500 p-4 text-black' autoComplete="name" maxLength={50} name="name" />

                        <label htmlFor="form-email"> Email:</label>
                        <input id="form-email" required placeholder="Email" className='dark:text-white border-solid border-2 border-gray-900 rounded-md bg-white-500 p-4 text-black' autoComplete="email" maxLength={80} name="email" type="email" />

                        <label htmlFor="form-name">Subject</label>
                        <input id="form-name" required placeholder="Subject" className='dark:text-white border-solid border-2 border-gray-900 rounded-md bg-white-500 p-4 text-black' autoComplete="name" maxLength={50} name="name" />

                        <label htmlFor="form-message"> Message: </label>
                        <textarea id="form-message" required placeholder="Message" className='dark:text-white border-solid border-2 border-gray-900 rounded-md bg-white-500 p-4 text-black' name="message" rows={5} />

                    </div>
                    <button className="mt-4 border-solid border-2 border-gray-900 rounded-md bg-teal-500 p-4 text-black" type="submit">Let's Connect, Politic, Ditto!</button>
                </form>
            </main>
    )
}

When I click on the submit button on the form I get an error message stating “Error: No recipients defined”. Looked through stackoverflow to find the solution and cannot seem to solve on my own. What am I doing wrong?

1. Tried going to nodemailer documentation and updating the nodemailer envelope in my code with client ID and client secret, along with the type as OAuth2
2. Changed host to “smtp.gmail.com” and added “gmail” as service
3. Looked through similar issues on stackoverflow

In all cases, was hoping to send test email to personal Gmail account to test functionality of contact form in development environment