25 lines to setup a Form and send Emails in Next.js 14 using Server Actions
Tags: nextjs, webdev, javascript, tutorial
Published: 2023-10-29 07:10:35

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
```typescript
// 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 <configured@email.provider>",
        to: "contact@launchfa.st",
        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

```bash
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:

```typescript
// 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](https://resend.com/docs/api-reference/introduction). Visit the [Resend documentation](https://resend.com/docs/api-reference/introduction) 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:

```typescript
// 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 <configured@email.provider>",
        to: "contact@launchfa.st",
        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 `configured@email.provider` with your actual email.

Happy coding!