25 lines to setup a Form and send Emails in Next.js 14 using Server Actions

In this tutorial, I'll guide you through the process of creating a simple web application using Next.js Server Actions that allows you to capture user input via forms, and send emails using the Resend API. All in just 25 lines. I'll break down the code into steps to make it easier to follow.

TLDR

// File: app/page.tsx
export default function Page() {
  async function create(formData: FormData) {
    "use server";
    await fetch("https://api.resend.com/emails", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${process.env.RESEND_KEY}`,
      },
      body: JSON.stringify({
        from: "Someone <[e-mail]>",
        to: "[e-mail]",
        subject: formData.get("subject"),
        text: "This works!",
      }),
    });
    console.log("Email sent!");
  }
  return (
    <form action={create}>
      <input type="text" name="subject" />
      <button type="submit">Submit</button>
    </form>
  );
}

Now, let's dive into the details of each step to understand how to build this email-sending application with Next.js Server Actions and the Resend API.

Step 1: Setting Up Your Next.js Project

npx create-next-app@latest

Step 2: Create a Form

Now, let's create a basic form that users can use to input the email subject:

// File: app/page.tsx
export default function Page() {
  return (
    <form action={create}>
      <input type="text" name="subject" />
      <button type="submit">Submit</button>
    </form>
  );
}

Step 3: Configure Resend and Obtain API Key

Before proceeding, you need to configure Resend and obtain the RESEND_KEY. Visit the Resend documentation to set up your Resend account and get your API key.

Step 4: Adding Server Actions

Now, let's add the server action to handle the email sending functionality. We'll use the fetch API to make a POST request to the Resend API with the provided email data:

// File: app/page.tsx
export default function Page() {
  async function create(formData: FormData) {
    "use server";
    await fetch("https://api.resend.com/emails", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${process.env.RESEND_KEY}`,
      },
      body: JSON.stringify({
        from: "Someone <[e-mail]>",
        to: "[e-mail]",
        subject: formData.get("subject"),
        text: "This works!",
      }),
    });
    console.log("Email sent!");
  }
  return (
    <form action={create}>
      <input type="text" name="subject" />
      <button type="submit">Submit</button>
    </form>
  );
}

You're Done!

With just 25 lines of code, you've created a functional email sending form. Users can enter the email subject, click "Submit" and your application will send the email using the Resend API.

This tutorial provides a concise yet comprehensive overview of creating a simple Next.js application for sending emails. Make sure to replace [e-mail] with your actual email.

Happy coding!

Comments

[John Potter]

Hi Rishi Raj Jain, thank you for this but it doesn't show how to clear the form after the email has been sent. This is in addition to letting the user know the email sent as many regular website visitors aren't going to check the console.

[Rishi Raj Jain]

upstash.com/blog/realtime-notifica... here's how you can clear the form with RSC and Next.js.