Built Portfolio Page - 10（send email）

Register Resend

To send email, we need Register a account in resend.com:

Click APIKey:

Click Create API Key, Fill application name, and copy the API key:

and Add api key to .env.local file:

RESEND_API_KEY=xxxxxxxxxxxxxxxxx

Install resend package

npm i resend@0.16.0

Add sendEmail function

add src/actions/sendEmail.ts:

"use server"

import { Resend } from "resend";

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

const validateString = (value:unknown) => {
  if(!value || typeof value !== "string"){
    return false;
  }

  return true;
}

export const sendEmail = async (formData: FormData) => {
  const senderEmail = formData.get("email");
  const message = formData.get("message");

  if(!senderEmail || typeof senderEmail !== "string"){
    return {
      error: "Invalid Sender Email",
    }
  } 

  if(!message || typeof message !== "string"){
    return {
      error: "Invalid Message",
    }
  }

  resend.emails.send({
    from:"onbording@resend.dev",
    to:"richard119@gmail.com",
    subject:"Message from contact From",
    reply_to: senderEmail,
    text: message,
  })
}

Add Contacts Component

Add src/components/Contact.tsx:

"use client"

import React from 'react'
import SectionHeading from './Section-heading'
import { FaPaperPlane } from 'react-icons/fa'
import { useSectionInView } from '@/hooks/useSectionInView';
import { sendEmail } from '@/actions/sendEmail';

export default function Contact() {
  const { ref } = useSectionInView("Contact");

  return (
    <section ref={ref} id="contact" className='scroll-mt-28 mb-20 sm:mb-28 w-[min(100%,38rem] text-center'>
      <SectionHeading>Contact Me</SectionHeading>

      <p className='text-gray-700'>
        Please contact me directly at {" "}
        <a className='underline' href="mailto:example@gmail.com">
          example@gmail.com
        </a>{" "}
        or through this form.
      </p>

      <form 
        className='mt-10 flex flex-col'
        action={ async (formData:FormData)=>{
          sendEmail(formData);
        }}
      >
        <input 
          className='h-14 px-4 rounded-lg border border-black/10' 
          name='email'
          type='email'
          required
          maxLength={500}
          placeholder='Your email'
        />
        <textarea 
          className='h-52 p-4 my-3 rounded-lg border border-black/10'
          name='message'
          placeholder='Your message'
          required
          maxLength={5000}
        />
        <button 
          type='submit'
          className="group flex items-center justify-center gap-2 h-[3rem] w-[8rem]
           bg-gray-900 text-white rounded-full outline-none transition-all 
           focus:scale-110 hover:scale-110 hover:bg-gray-950 active:scale-105"
        >
          Submit <FaPaperPlane className="text-xs opacity-70 transition-all group-hover:translate-x-1 group-hover:-translate-y-1" />{" "}
        </button>
      </form>
    </section>
  )
}

Result