I came across the following error while trying to implement the form functionality. The code for my route is as follows:
//import { EmailTemplate } from "../../../components/EmailTemplate";
import { NextResponse } from "next/server";
import { Resend } from "resend";
const resend = new Resend(process.env.RESEND_API_KEY);
const fromEmail = process.env.FROM_EMAIL;
export async function POST(req, res) {
const { email, subject, message } = await req.json();
console.log("EMAIL DATA", email, subject, message);
try {
const data = await resend.emails.send({
from: fromEmail,
to: [fromEmail, email],
subject: subject,
react: (
<>
<h1>{subject}</h1>
<p>Thank you for contacting me!</p>
<p>New message submitted:</p>
<p>{message}</p>
</>
),
});
return NextResponse.json(data);
} catch (error) {
return NextResponse.json({ error });
}
}
The code above is handled in the EmailSection JSX component, an excerpt is as follows:
const EmailSection = () => {
const [emailSubmitted, setEmailSubmitted] = useState(false);
const handleSubmit = async (e) => {
e.preventDefault();
const data = {
email: e.target.email.value,
subject: e.target.subject.value,
message: e.target.message.value,
};
const JSONdata = JSON.stringify(data);
const endpoint = "/api/send";
const options = {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSONdata,
};
const response = await fetch(endpoint, options);
const resData = await response.json();
if (response.status === 200) {
console.log("Message sent.");
setEmailSubmitted(true);
}
};
However, I get the internal server error while making a POST request:
POST http://localhost:3000/api/send
- error SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)
at parseJSONFromBytes (node:internal/deps/undici/undici:6662:19)
at successSteps (node:internal/deps/undici/undici:6636:27)
at node:internal/deps/undici/undici:1236:60
at node:internal/process/task_queues:140:7
at AsyncResource.runInAsyncScope (node:async_hooks:203:9)
at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
What could be an issue here? The code seems to be correct, so I leaning towards another explanation, for example some environment settings that I'm not aware of.