feat: add form to better showcase how email is send in nextjs end to end

app/api/send/route.ts

@@ -4,13 +4,14 @@ import * as React from 'react';
 
 const resend = new Resend(process.env.RESEND_API_KEY);
 
-export async function POST() {
+export async function POST(req: Request) {
+  const { subject, msg, toEmail } = await req.json();
   try {
     const { data, error } = await resend.emails.send({
       from: 'Acme <[email protected]>',
-      to: ['[email protected]'],
-      subject: "Hello world",
-      react: EmailTemplate({ firstName: "John" }) as React.ReactElement,
+      to: [toEmail],
+      subject: subject,
+      react: EmailTemplate({ firstName: "John", msg: msg }) as React.ReactElement,
     });
 
     if (error) {

app/components/EmailForm.tsx

@@ -0,0 +1,68 @@
+'use client'
+import { useState } from "react";
+
+export default function EmailForm() {
+  const [subject, setSubject] = useState<string>();
+  const [msg,setMsg] = useState<string>();
+  const [toEmail,setToEmail] = useState<string>();
+  const [isSubmittedSucessfully, setIsSubmittedSucessfully] = useState<boolean>(false);
+
+  const handleSubmit = () => {
+    const emailValues = {
+      subject,
+      msg,
+      toEmail
+    };
+
+    const options = {
+      method: `POST`,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(emailValues),
+    };
+
+    fetch(`/api/send`, options)
+    .then((response) => {
+        if (response.ok) {
+          setIsSubmittedSucessfully(true);
+          return response.json().then((data) => console.log(data));
+        }
+        throw new Error("Api is not available");
+    })
+    .catch((error) => {
+        setIsSubmittedSucessfully(false);
+        console.error("Error fetching data: ", error);
+    });
+
+  }
+
+  const handleSubject = (e:React.ChangeEvent<HTMLInputElement>) => {
+    const subject = e.currentTarget.value;
+    setSubject(subject);
+  }
+
+  const handleMsg = (e:React.ChangeEvent<HTMLTextAreaElement>) => {
+    const msg = e.currentTarget.value;
+    setMsg(msg);
+  }
+
+  const handleToEmail = (e:React.ChangeEvent<HTMLInputElement>) => {
+    const toEmail = e.currentTarget.value;
+    setToEmail(toEmail.toString());
+  }
+
+  return <form>
+
+    {isSubmittedSucessfully && <div>Success! Email Sent!<br /></div>}
+
+    <b>Subject:</b><br />
+    <input type="text" onChange={handleSubject} value={subject} /><br />
+    <b>To(Email):</b><br />
+    <input type="text" onChange={handleToEmail} value={toEmail} /><br />
+    <b>Msg:</b><br />
+    <textarea onChange={handleMsg}>{msg}</textarea><br />
+
+    <input type="button" value="Submit" onClick={handleSubmit} />
+  </form>
+}

app/page.tsx

@@ -1,3 +1,10 @@
+import EmailForm from "./components/EmailForm";
+
 export default function Page() {
-  return <h1>Hello, Home page!</h1>
+
+  return <div>
+    <h1>Hello, Home page!</h1>
+
+    <EmailForm/>
+  </div>
 }

components/email-template.tsx

@@ -2,13 +2,16 @@ import * as React from "react";
 
 interface EmailTemplateProps {
   firstName: string;
+  msg: string;
 }
 
 export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
   firstName,
+  msg
 }) => (
   <div>
     <h1>Welcome, {firstName}!</h1>
+    <p>{msg}</p>
   </div>
 );
 

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

next.config.js

@@ -1,5 +1,5 @@
 function throwError(envVar) {
-  throw `Abort: You need to define ${envVar} in the .env file.`
+  throw `Abort: You need to define ${envVar} in the .env.example file and rename it to .env.`
 }
 
 if (!process.env.RESEND_API_KEY) return throwError('RESEND_API_KEY');