Adding an email newsletter to your website is a great way to engage visitors and build an audience. I wanted a solution to keep users updated with every new post while keeping things simple and cost-effective.

Choosing a Newsletter Service

To find the right service, I set a few requirements:

1. Free tier – No upfront cost for small mailing lists.
2. Custom domain support – The ability to send emails from my own domain.
3. API access – So I could programmatically add subscribers.

After testing several options, I found that Sender.net met all my requirements. It offers a free plan with:

• Up to 2,500 subscribers
• 15,000 emails per month

This was more than enough for my needs, so I proceeded with the next steps.

Step 1: Creating a Simple React Form

Let's start with a basic email subscription form in Next.js. This form will collect the user's email and submit it when they click the button.

export default function Subscribe() {
  return (
    <form className="flex flex-col gap-2">
      <div className="flex gap-2">
        <input name="email" type="email" placeholder="Email Address" />
        <button type="submit">Subscribe</button>
      </div>
    </form>
  );
}

What This Code Does:

• It creates a simple input field for the email address.
• It includes a "Subscribe" button for submission.
• Right now, it doesn't send data anywhere—we'll handle that in the next steps.

Step 2: Adding an API Action to Handle Submissions

To connect our form to Sender.net, we need a backend function that will:

• Send a POST request to Sender.net’s API.
• Pass the user's email along with our API token for authentication.

Instead of creating a separate API route, we’ll use Next.js Server Actions, which allow calling server-side functions directly from a form.

Securing the API Key

Before we write our API request, we need to store the Sender.net API key securely.
Create a .env.local file in your Next.js project root and add:

SENDER_TOKEN=your_sender_net_api_key

Make sure to restart your Next.js server after adding this to load the environment variable. If you're new to environment variables in Next.js, check out the official .env documentation.

Adding backend logic

Create actions.ts and add the following:

"use server";

export async function addNewsletterSubscriber(_: unknown, formData: FormData) {
  // Extract the email submitted via the form
  const email = formData.get("email");

  // Define the API URL for Sender.net
  const url = new URL("https://api.sender.net/v2/subscribers");

  // Set request headers, including authentication with our API token
  const headers = {
    // Secure API key from environment variables
    Authorization: "Bearer " + process.env.SENDER_TOKEN,
    "Content-Type": "application/json",
    Accept: "application/json",
  };

  // Data payload to send in the request
  const data = {
    email: email,
    trigger_automation: false, // Prevents triggering automation flows in Sender.net
  };

  try {
    // Send the request to Sender.net
    const response = await fetch(url, {
      method: "POST",
      headers,
      body: JSON.stringify(data),
    });

    // Parse the response
    const responseData = await response.json();

    // Handle success or failure
    if (response.ok && responseData.success) {
      return { message: "Subscription successful!" };
    } else {
      console.error("Subscription failed:", responseData);
      return { message: "Subscription failed. Please try again." };
    }
  } catch (error) {
    console.error("An error occurred:", error);
    return { message: "An error occurred. Please try again later." };
  }
}

What This Code Does:

• Extracts the submitted email from the form.
• Sends a POST request to Sender.net with the email.
• Uses an API token stored in .env.local (keeps it secure).
• Handles success and error cases gracefully.

Step 3: Connecting the Form to the API

Now, let's modify our frontend form to use the API action. This will make the form interactive—when the user submits their email, it will actually be stored in Sender.net.

Update the Subscribe component:

"use client";

import { addNewsletterSubscriber } from "@/lib/actions";
import { useActionState } from "react";

export default function Subscribe() {
  // useActionState connects our form to the server action
  const [response, formAction, isPending] = useActionState(
    addNewsletterSubscriber,
    undefined,
  );

  return (
    <form action={formAction} className="flex flex-col gap-2">
      <div className="flex gap-2">
        <input name="email" type="email" placeholder="Email Address" required />
        <button disabled={isPending}>Subscribe</button>
      </div>
      {/* Display feedback message after submission */}
      <p>{response?.message}</p>
    </form>
  );
}

What This Code Does:

• Uses useActionState() to connect the form to our server action.
• Calls addNewsletterSubscriber when the form is submitted.
• Displays a message (Subscription successful! or Subscription failed.).
• Disables the button while the request is pending.

Step 4: Testing and Deploying

Now that everything is set up:

1. Run your Next.js app and enter an email into the form.
2. Check your Sender.net account to see if the email was added.
3. Deploy to production (e.g., Vercel, Netlify) with your .env properly configured.

Summary

By following this guide, you’ve successfully:

• Built a React form for newsletter signups.
• Connected it to Sender.net’s API using Next.js Server Actions.
• Ensured security by storing the API key safely.

Now, your website visitors can subscribe to your newsletter seamlessly! 🎉