DevVault

Getting Started with Resend

Important

Make sure you have went through the Domain Setup process and have a Verified domain (required for production)
Resend account Sign up here

Email Setup

convex/email.tsx

import { Resend } from 'resend';
import { v } from "convex/values";
import { internalAction } from "./_generated/server";

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

export const sendEmail = internalAction ({
   args: { email: v.string, username: v.string }
   handler: async (_, {email, username}) => {
   try {
       const data = await resend.emails.send({
           from: 'you@yourdomain.com',
           to: [email],
           subject: "",
           react: <WelcomeEmail username={username} />,
       });
       return { success: true, data };
   } catch (error) {
       return { success: false, error };
   }
}

Using with React Email

src/components/email-templates

import { Button } from '@react-email/button';
import { Html } from '@react-email/html';

export default function WelcomeEmail({ username }) {
  return (
    <Html>
      <h1>Welcome, {username}!</h1>
      <p>We're excited to have you on board.</p>
      <Button href="https://yourdomain.com/login">
        Get Started
      </Button>
    </Html>
  );
}

Congratulation! You can now use Resend to send email to your users. Next, we're going over how to configure metadata in your application to score better in SEO. See you on the next one!

Next Steps

Learn about how to configure your metadata for better SEO.

SEO Configuration

Guidelines for optimizing your application for search engines.

For more details on integrating Resend in Next.js, visit:Resend Docs