The issue at hand is that im attempting to take three form fields from the client side and email those details via amazons SES using Next.js however the email is sent, but the fields are undefined i do not recieve an internal server error or any error of anykind for that matter. ive tried to use express but i am very unfamiliar with it and had trouble finding a solution using that method. Im assuming the issue is to do with how i am recieving the form data via the next request however im fairly new to next js and have been doing this on a whim. ive tried changing between NextRequest and NextApiRequest as well and it has yielded the same result, here is my minimal reproducible, i am interested in how to fix this but im more interested in how to properly work with next api requests and if some insight could be provided it would help greatly!

Client:

'use client'

import { useState } from 'react';

export default function Newsletter() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: '',
  });

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    try {
      console.log(formData)
      const response = await fetch('/api/sendEmail', {
        method: 'POST',
        body: JSON.stringify(formData),
      });
      console.log(response)
    } catch (error) {
      console.log(error)
    }
  };

  return (
    <section>
            <form className="w-full lg:w-1/2" onSubmit={handleSubmit}>
              <div className="">
                <input name="email" type="email" className="" placeholder="Your best email…" aria-label="Your best email…" onChange={handleInputChange} />
              </div>
              <div className="">
                <input name="name" type="name" className="" placeholder="First and Last Name" aria-label="First and Last Name" onChange={handleInputChange}/>
              </div>
              <div className="">
                <textarea name="message" className="" placeholder="Details *Optional" aria-label="Details" onChange={handleInputChange}/>  
              </div>
              <button type="submit" className="">Contact</button>
            </form>

          </div>

        </div>

      </div>
    </section>
  )
}

Server:

import type { NextApiRequest, NextApiResponse } from 'next';
import { SES } from '@aws-sdk/client-ses';

export async function POST(req: NextApiRequest, res: NextApiResponse) {
  const {name, email, message} = req.body
  
  try {
    const ses = new SES({

      credentials: {
        accessKeyId: 'some-key',
        secretAccessKey: 'some-secret-key',
      },

      // e.g., 'us-east-1'
      region: 'us-east-1',
    });

    const params = {
      Destination: {
        ToAddresses: ['[email protected]', '[email protected]'],
      },
      Message: {
        Body: {
          Text: { Data: `Name: ${name}nnEmail: ${email}nnMessage: ${message}` },
        },
        Subject: { Data: 'New Contact Form Submission!' },
      },
      Source: '[email protected]', // Must be verified in SES
    };

    await ses.sendEmail(params);
    console.log('Email sent successfully');
    return Response.json("temp")
  } catch (error) {
    console.error(error);
    console.log('Failed to send email' );
    return Response.json('temp')
  }
}

ive created this based off of the docs at: https://nextjs.org/docs/pages/building-your-application/data-fetching/forms-and-mutations and my knowledge of react however im new to both typscript and next, usually my preferred frameworks are react and django.