What About Coding
By himanshu123Emailemail automationnewsletter

How to Set Up Email Automation in Your Next.js App (Resend + Supabase Guide)

Want to capture emails, send newsletters, and automate emails in your Next.js app? This guide walks you through the whole setup — using Resend for email delivery and Supabase as a backup database — in under 15 minutes.

What Is a Newsletter and Email Marketing?

A newsletter is a recurring email you send to subscribers — product updates, blog posts, tips, or offers. Email marketing is the broader practice of using email to build relationships, nurture leads, and drive conversions.

Unlike social media, email marketing gives you direct, algorithm-free access to your audience.

Why Capture Emails on Your Website?

Collecting emails on your site isn't optional anymore — it's core growth infrastructure. Here's why:

  • Own your audience — Social platforms can change algorithms or ban accounts. Your email list is yours forever.
  • Build a user database — Emails help you understand who's visiting and engaging with your product.
  • Deliver resources — Send lead magnets, ebooks, or guides automatically after signup.
  • Re-engage users — Send onboarding sequences, product updates, and win-back campaigns.
  • Higher ROI — Email marketing consistently outperforms most other channels in conversion rate.

Here are some popular tools for email marketing and newsletter automation:

  • Brevo
  • Beehiiv
  • MailerLite
  • Substack
  • Resend

For this guide, we're using Resend — it's developer-first, has a generous free tier, and integrates with Next.js in minutes using clean, simple APIs.

Setting Up Email Automation in Next.js with Resend

Prerequisites

Before you start, make sure you have:

Step 1: Install the Resend SDK

npm install resend

Step 2: Add Your API Key

Store your key as an environment variable — never hardcode it.

# .env.local
RESEND_API_KEY=your_resend_api_key_here

Step 3: Create an Email Template

Build a reusable React component for your email content.

// components/email-template.tsx
import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

export function EmailTemplate({ firstName }: EmailTemplateProps) {
  return (
    <div>
      <h1>Welcome, {firstName}!</h1>
      <p>Thanks for subscribing to our newsletter.</p>
    </div>
  );
}

Step 4: Create the API Route to Send Emails

// app/api/send/route.ts
import { EmailTemplate } from '../../../components/email-template';
import { Resend } from 'resend';

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

export async function POST(req: Request) {
  const { firstName, email } = await req.json();

  const { data, error } = await resend.emails.send({
    from: 'Your App <onboarding@resend.dev>', // use your verified domain in production
    to: [email],
    subject: 'Welcome!',
    react: EmailTemplate({ firstName }),
  });

  if (error) {
    return Response.json({ error }, { status: 500 });
  }

  return Response.json(data);
}

Step 5: Build the Signup Form

Create a simple email capture form that calls your API route.

// components/newsletter-form.tsx
'use client';
import { useState } from 'react';

export function NewsletterForm() {
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState('');

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setStatus('sending');

    const res = await fetch('/api/send', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ firstName: 'there', email }),
    });

    setStatus(res.ok ? 'success' : 'error');
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        placeholder="Enter your email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <button type="submit">Subscribe</button>
      {status === 'success' && <p>You're subscribed!</p>}
    </form>
  );
}

That's it — your Next.js app can now send automated emails via Resend.

Bonus Tip: Back Up Emails in Supabase

Don't rely on a single third-party tool to hold your most valuable asset — your subscriber list. Save every email to Supabase as a backup whenever someone signs up.

1. Create a subscribers table in Supabase

create table subscribers (
  id uuid default gen_random_uuid() primary key,
  email text unique not null,
  created_at timestamp with time zone default now()
);

2. Save the email before sending it via Resend

// app/api/send/route.ts
import { createClient } from '@supabase/supabase-js';
import { Resend } from 'resend';
import { EmailTemplate } from '../../../components/email-template';

const resend = new Resend(process.env.RESEND_API_KEY);
const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!
);

export async function POST(req: Request) {
  const { firstName, email } = await req.json();

  // Backup to Supabase
  await supabase.from('subscribers').insert({ email });

  // Send welcome email via Resend
  const { data, error } = await resend.emails.send({
    from: 'Your App <onboarding@resend.dev>',
    to: [email],
    subject: 'Welcome!',
    react: EmailTemplate({ firstName }),
  });

  if (error) {
    return Response.json({ error }, { status: 500 });
  }

  return Response.json(data);
}

Now, even if Resend has downtime, your rate limits reset, or you switch email tools later, your subscriber list is safe in your own database.

Wrapping Up

Setting up email automation in Next.js doesn't need to be complicated. With Resend for delivery and Supabase for backup storage, you get a fast, reliable, and fully-owned email marketing pipeline in under 15 minutes.

Next steps:

  • Verify your sending domain on Resend for production use
  • Explore React Email for richer templates
  • Add double opt-in for GDPR-compliant signups

Reference: Resend Next.js Docs

Share

More recent posts

View all