Plainform

Resend’s client in lib/resend/resend.ts enables sending emails, managing audiences (e.g., newsletter subscriptions), and handling webhooks for email events, with data stored in your Supabase database via Prisma. Below are examples of implementing these features, including the provided newsletter subscription logic, tailored to your project’s requirements.

Use Cases

1. Sending Transactional Emails

Send a transactional email (e.g., welcome email) using Resend:

@/lib/resend/sendWelcomeEmail.ts

import { resend } from '@/lib/resend/resend';

export async function sendWelcomeEmail(to: string, name: string) {
  const { data, error } = await resend.emails.send({
    from: 'Plainform Dev <hello@yourapp.com>',
    to,
    subject: 'Welcome to Plainform Dev!',
    html: `<p>Hello ${name},</p><p>Thank you for joining our platform!</p>`,
  });

  if (error) throw new Error(error.message);
  return data;
}

Call this in an API route (e.g., app/api/email/welcome/route.ts) after user signup.

Use the provided addContact function to add a subscriber to a newsletter audience

@/lib/resend/addContact.ts

export async function addContact(email: string) {
  try {
    const res = await fetch(
      `${process.env.NEXT_PUBLIC_SITE_URL}/api/resend/newsletter`,
      {
        method: 'POST',
        next: { tags: ['resend/newsletter'] },
        body: JSON.stringify({ email }),
      }
    );

    const json = await res.json();

    if (!json.ok) {
      throw new Error(json?.message);
    }

    return res;
  } catch (error: any) {
    return error;
  }
}

Use in a form component (e.g., components/NewsletterForm.tsx)

@/components/NewsletterForm.tsx

import { addContact } from '@/lib/resend/addContact';

export default function NewsletterForm() {
  async function handleSubmit(formData: FormData) {
    'use server';
    const email = formData.get('email') as string;
    await addContact(email);
  }

  return (
    <form action={handleSubmit}>
      <input type="email" name="email" placeholder="Enter your email" />
      <button type="submit">Subscribe</button>
    </form>
  );
}

3. Email Design

Create a custom email template in components/emails/WelcomeEmail.tsx:

@/components/emails/WelcomeEmail.tsx

export default function WelcomeEmail({ name }: { name: string }) {
  return (
    <div>
      <h1>Welcome, {name}!</h1>
      <p>Thank you for joining Plainform.</p>
      <style jsx>{`
        div {
          font-family: Arial, sans-serif;
        }
        h1 {
          color: #333;
        }
      `}</style>
    </div>
  );
}

Use it with Resend:

@/lib/resend/sendWelcomeEmail.ts

import { resend } from "@/lib/resend/resend";
import WelcomeEmail from "@/components/emails/WelcomeEmail";

export async function sendWelcomeEmail(to: string, name: string) {
  const { data, error } = await resend.emails.send({
    from: "Plainform <hello@yourapp.com>",
    to,
    subject: "Welcome to Plainform Dev!",
    react: <WelcomeEmail name={name} />,
  });

  if (error) throw new Error(error.message);
  return data;
}

4. Storing Subscriber Data with Prisma

Save subscriber data in your Supabase database:

@/lib/resend/addContactAndSave.ts

import { resend } from '@/lib/resend/resend';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export async function addContactAndSave(email: string) {
  const { data, error } = await resend.contacts.create({
    email,
    unsubscribed: false,
    audienceId: process.env.RESEND_AUDIENCE_ID as string,
  });

  if (error) throw new Error(error.message);

  await prisma.subscriber.upsert({
    where: { email },
    update: { updatedAt: new Date() },
    create: { email, subscribedAt: new Date() },
  });

  return data;
}

Define a Subscriber model in prisma/schema.prisma:

@/prisma/schema.prisma

model Subscriber {
  email        String   @id
  subscribedAt DateTime @default(now())
  updatedAt    DateTime @updatedAt
}

Important Notes

Environment Variables: Ensure RESEND_API_KEY and RESEND_AUDIENCE_ID are set in .env, or t3-env will block app startup.
DNS Setup: Complete DNS configuration (DKIM, SPF, DMARC) to ensure emails reach inboxes.
Prisma Integration: Store subscriber or email data in your Supabase database using Prisma for persistence.
Security: Keep RESEND_API_KEY out of client-side code and version control using .gitignore.
Customization: Design email templates in components/emails to match your app’s branding.

For advanced features like bulk emails or analytics, consult the Resend Documentation.

Usage & Integration

Use Cases

1. Sending Transactional Emails

3. Email Design

4. Storing Subscriber Data with Prisma

Important Notes

On this page

Usage & Integration

Use Cases

1. Sending Transactional Emails

2. Managing Newsletter Subscriptions

3. Email Design

4. Storing Subscriber Data with Prisma

Important Notes

On this page