constact-form.jsx

// install nodemailer 
// install formik

import React from 'react';
import { useFormik } from 'formik';

const ContactForm = () => {
  const formik = useFormik({
    initialValues: {
      name: '',
      email: '',
      message: '',
      attachment: null,
    },
    onSubmit: async (values) => {
      const { name, email, message, attachment } = values;

      const formData = new FormData();
      formData.append('name', name);
      formData.append('email', email);
      formData.append('message', message);
      formData.append('attachment', attachment);

      try {
        const response = await fetch('/api/send-email', {
          method: 'POST',
          body: formData,
        });

        if (response.ok) {
          console.log('Email sent successfully');
        } else {
          console.log('Failed to send email');
        }
      } catch (error) {
        console.error('Error:', error);
      }
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <div>
        <label htmlFor="name">Name:</label>
        <input
          id="name"
          name="name"
          type="text"
          onChange={formik.handleChange}
          value={formik.values.name}
        />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input
          id="email"
          name="email"
          type="email"
          onChange={formik.handleChange}
          value={formik.values.email}
        />
      </div>
      <div>
        <label htmlFor="message">Message:</label>
        <textarea
          id="message"
          name="message"
          onChange={formik.handleChange}
          value={formik.values.message}
        />
      </div>
      <div>
        <label htmlFor="attachment">Attachment:</label>
        <input
          id="attachment"
          name="attachment"
          type="file"
          onChange={(event) => {
            formik.setFieldValue('attachment', event.currentTarget.files[0]);
          }}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default ContactForm;

send-email.js

// install nc
// install multer

import nc from 'next-connect';
import multer from 'multer';
import { createTransport } from 'nodemailer';

const upload = multer({ dest: 'uploads/' });

const handler = nc()
  .use(upload.single('attachment'))
  .post(async (req, res) => {
    const { name, email, message } = req.body;
    const { path, originalname } = req.file;

    try {
      const transporter = createTransport({
        host: 'smtp.mailtrap.io',
        port: 587,
        auth: {
          user: 'YOUR_MAILTRAP_USERNAME', // or 'api'
          pass: 'YOUR_MAILTRAP_PASSWORD',
        },
      });

      await transporter.sendMail({
        from: email,
        to: 'RECIPIENT_EMAIL_ADDRESS',
        subject: 'New contact form submission',
        text: `Name: ${name}\nEmail: ${email}\nMessage: ${message}`,
        attachments: [
          {
            filename: originalname,
            path: path,
          },
        ],
      });

      res.status(200).json({ message: 'Email sent successfully' });
    } catch (error) {
      console.error('Error sending email:', error);
      res.status(500).json({ error: 'Failed to send email' });
    }
  });

export default handler;