500 Error when Sending Emails with Resend API and Next.js App Router

[immanuel-peter]

I'm encountering a persistent 500 Internal Server Error when attempting to send emails using the Resend API with a React email template in my Next.js project. I have tried various debugging methods but haven't been able to resolve the issue.

Here are some relevant code snippets below, and the GitHub repo is down below.

app/api/send/route.ts

import { Resend } from "resend";
import { MeetingRequest } from "@/api/email-templates/MeetingRequest";

const resend = new Resend(process.env.NEXT_PUBLIC_RESEND_KEY);

export async function POST(request: Request) {
  const {
    to_email,
    receiver_name,
    scheduler_id,
    scheduler_name,
    scheduled_time,
    scheduler_tz,
    question_title,
    question_id,
    sender_note,
  } = await request.json();

  try {
    const { data, error } = await resend.emails.send({
      from: "Codey from CodingOH <codey@codingoh.com>",
      to: [to_email],
      subject: `You received a meeting request from ${scheduler_name}!`,
      react: MeetingRequest({
        receiver_name,
        scheduler_id,
        scheduler_name,
        scheduled_time,
        scheduler_tz,
        question_title,
        question_id,
        sender_note,
      }),
    });

    if (error) {
      console.error("[UP] Error sending email:", error);
      return Response.json({ error }, { status: 500 });
    }

    return Response.json({ data });
  } catch (error) {
    console.error("[DOWN] Error sending email:", error);
    return Response.json({ error }, { status: 500 });
  }
}

app/questions/[id]/route.tsx

const response = await fetch("/api/send", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    to_email: question.asker?.email_address ?? "",
    receiver_name: question.asker?.first_name ?? "",
    scheduler_id: coder?.auth_id ?? "",
    scheduler_name: `${coder?.first_name} ${coder?.last_name}`,
    scheduled_time: formattedDate?.toISOString() ?? "",
    scheduler_tz: coder?.timezone ?? "",
    question_title: question.question ?? "",
    question_id: question.id ?? 0,
    sender_note: scheduleMessage || "",
  }),
});
if (!response.ok) {
  console.error(
    "Error sending meeting request email:",
    await response.text()
  );
} else {
  const data = await response.json();
  console.log("Meeting request email sent:", data);
}

api/email-templates/MeetingRequest.tsx

import React from "react";
import Link from "next/link";
import { FaCode } from "react-icons/fa6";
import { parseISO, format } from "date-fns";
import { toZonedTime } from "date-fns-tz";

export const MeetingRequest = (props: {
  receiver_name: string;
  scheduler_id: string;
  scheduler_name: string;
  scheduled_time: string;
  scheduler_tz: string;
  question_title: string;
  question_id: number;
  sender_note: string;
}) => {
  const {
    receiver_name,
    scheduler_id,
    scheduler_name,
    scheduled_time,
    scheduler_tz,
    question_title,
    question_id,
    sender_note,
  } = props;

  const date = parseISO(scheduled_time);
  const zonedDate = toZonedTime(date, scheduler_tz);
  const formattedDate = format(zonedDate, "MMMM dd, yyyy 'at' h:mm a");

  return (
    <main className="flex flex-col items-center justify-center bg-slate-200">
      ...
    </main>
  );
};

GitHub Repo: https://github.com/jesuschrist-immanuel/stack-overflow-clone/

The last time I tried to make it work, I got this error: Error sending meeting request email: {"error":{}}

Any guidance or assistance in resolving this issue would be greatly appreciated!