Skip to main content

Resend Integration

Send beautiful transactional and marketing emails from your INSTROC app with Resend.

Setup​

1. Create a Resend Account​

Sign up at resend.com.

2. Get Your API Key​

  1. Go to Resend API Keys
  2. Click Create API Key
  3. Give it a name and select permissions
  4. Copy the key (re_...)

3. Verify Your Domain​

For production emails, verify your domain:

  1. Go to Resend Domains
  2. Add your domain
  3. Add the DNS records shown
  4. Wait for verification

4. Connect to INSTROC​

  1. Open your project in INSTROC
  2. Go to Project Settings → Integrations
  3. Click Resend → Connect
  4. Enter your API key
  5. Click Save

Sending Emails​

Basic Email​

AI prompt:

When a user submits the contact form, send them a
confirmation email using Resend

Generated code:

import { Resend } from 'resend';

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

await resend.emails.send({
  from: 'noreply@yourdomain.com',
  to: userEmail,
  subject: 'Thanks for contacting us!',
  html: '<p>We received your message and will respond shortly.</p>'
});

With React Email Templates​

Create beautiful emails with React components:

import { Resend } from 'resend';
import { WelcomeEmail } from '@/emails/welcome';

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

await resend.emails.send({
  from: 'hello@yourdomain.com',
  to: user.email,
  subject: 'Welcome to our app!',
  react: WelcomeEmail({ name: user.name }),
});

Example email template:

// emails/welcome.tsx
import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Text,
  Button,
} from '@react-email/components';

export function WelcomeEmail({ name }: { name: string }) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to our platform!</Preview>
      <Body style={body}>
        <Container style={container}>
          <Heading>Welcome, {name}!</Heading>
          <Text>
            We're excited to have you on board. Here's how to get started:
          </Text>
          <Button href="https://yourapp.com/dashboard" style={button}>
            Go to Dashboard
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

const body = { backgroundColor: '#f6f9fc' };
const container = { padding: '40px', backgroundColor: '#ffffff' };
const button = {
  backgroundColor: '#5469d4',
  color: '#fff',
  padding: '12px 24px',
  borderRadius: '6px'
};

Common Use Cases​

Welcome Email​

// After user signup
await resend.emails.send({
  from: 'welcome@yourdomain.com',
  to: newUser.email,
  subject: `Welcome to ${appName}, ${newUser.name}!`,
  react: WelcomeEmail({
    name: newUser.name,
    loginUrl: 'https://yourapp.com/login'
  }),
});

Password Reset​

// Generate reset token and send email
const resetToken = generateToken();

await resend.emails.send({
  from: 'noreply@yourdomain.com',
  to: user.email,
  subject: 'Reset your password',
  react: PasswordResetEmail({
    resetUrl: `https://yourapp.com/reset?token=${resetToken}`
  }),
});

Order Confirmation​

await resend.emails.send({
  from: 'orders@yourdomain.com',
  to: customer.email,
  subject: `Order #${order.id} Confirmed`,
  react: OrderConfirmationEmail({
    orderNumber: order.id,
    items: order.items,
    total: order.total,
    shippingAddress: order.address,
  }),
});

Newsletter​

// Send to multiple recipients
await resend.emails.send({
  from: 'newsletter@yourdomain.com',
  to: subscribers.map(s => s.email),
  subject: 'This Week in Tech',
  react: NewsletterEmail({ content: newsletterContent }),
});

API Endpoint Example​

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

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

export async function POST(request: Request) {
  try {
    const { to, subject, template, data } = await request.json();

    const { data: emailData, error } = await resend.emails.send({
      from: 'noreply@yourdomain.com',
      to,
      subject,
      react: getTemplate(template, data),
    });

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

    return Response.json({ success: true, id: emailData?.id });
  } catch (error) {
    return Response.json(
      { error: 'Failed to send email' },
      { status: 500 }
    );
  }
}

Email Features​

Attachments​

await resend.emails.send({
  from: 'invoices@yourdomain.com',
  to: customer.email,
  subject: 'Your Invoice',
  html: '<p>Please find your invoice attached.</p>',
  attachments: [
    {
      filename: 'invoice.pdf',
      content: pdfBuffer,
    },
  ],
});

Reply-To Address​

await resend.emails.send({
  from: 'noreply@yourdomain.com',
  replyTo: 'support@yourdomain.com',
  to: user.email,
  subject: 'Your support ticket',
  html: content,
});

CC and BCC​

await resend.emails.send({
  from: 'team@yourdomain.com',
  to: client.email,
  cc: ['sales@company.com'],
  bcc: ['records@company.com'],
  subject: 'Project Update',
  html: content,
});

Testing​

Send Test Emails​

During development, use your verified email:

// Only in development
const testEmail = process.env.NODE_ENV === 'development'
  ? 'your@email.com'
  : user.email;

await resend.emails.send({
  from: 'onboarding@resend.dev', // Resend's test domain
  to: testEmail,
  subject: 'Test Email',
  html: '<p>This is a test.</p>',
});

Preview Emails​

Use React Email's preview:

npm install @react-email/components
npx email dev

This opens a preview interface at localhost:3000.

Monitoring​

Check Email Status​

const email = await resend.emails.get(emailId);
console.log(email.status); // sent, delivered, bounced, etc.

Webhooks (Coming Soon)​

Track email events like opens, clicks, and bounces.

Environment Variables​

RESEND_API_KEY=re_xxxxx

Best Practices​

Use a Consistent From Address​

Always send from addresses at your verified domain.

For marketing emails, always include an unsubscribe mechanism.

Handle Bounces​

Remove bounced emails from your lists to maintain sender reputation.

Test Before Sending​

Preview all email templates before sending to real users.

Resources​