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.
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.
Collecting emails on your site isn't optional anymore — it's core growth infrastructure. Here's why:
Here are some popular tools for email marketing and newsletter automation:
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.
Before you start, make sure you have:
npm install resend
Store your key as an environment variable — never hardcode it.
# .env.local
RESEND_API_KEY=your_resend_api_key_here
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>
);
}
// 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);
}
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.
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.
create table subscribers (
id uuid default gen_random_uuid() primary key,
email text unique not null,
created_at timestamp with time zone default now()
);
// 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.
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:
Reference: Resend Next.js Docs