Emails are a crucial part of modern web applications, whether for sending transactional messages, notifications, or marketing content. Integrating a reliable email sending mechanism can be challenging, especially when dealing with serverless architectures. In this tutorial, we'll explore how you can leverage Next.js 13, Resend, and NextCron to send emails seamlessly and efficiently.

Setting Up Your Next.js Project

First, ensure you have a Next.js 13 project set up. If you're new to Next.js, you can create a project with the following command:

npx create-next-app@latest my-next-app --typescript
cd my-next-app

Integrating Resend for Email Delivery

Install Resend's email package in your project:

npm install resend axios

To effectively send emails within your Next.js application, you'll need to set up a route handler dedicated to email dispatch. This will involve creating an API route that can be called to trigger the sending of emails. Below is an example of how you might configure such a handler using Resend:

// app/api/send-email/route.ts
import { Resend } from 'resend';
import { NextRequest, NextResponse } from 'next/server'

export async function POST(request: NextRequest) {
  const { email, subject, message } = await request.json();

  const { data, error } = await resend.emails.send({
    from: 'Acme <[email protected]>',
    to: email,
    subject: subject,
    text: message,
  });

  if (error) {
    return NextResponse.json(
      { 
        status: 'Error sending email', 
        error: error.message 
      }, 
      {
        status: 500
      }
    );
  }

  return NextResponse.json(
    { 
      status: 'Email sent successfully' 
    }, 
    {
      status: 200
    }
  );
}

This example demonstrates a simple POST request handler that uses the sendEmail function from the Resend package to send an email. The handler expects to receive the recipient's email address, the subject line, and the content of the email (both as plain text and HTML) in the request body.

Creating a simple form

export default function Page() {
  async function sendEmail(formData: FormData) {
    'use server'

    await axios.request({
      url: 'https://nextcron.co/api/v1/jobs/publish',
      method: 'POST',
      data: {
        "topic": "scheduled-email",
        "target": "http://localhost:3000/api/send-email",
        "input": {
          email: formData.get('email'),
          subject: formData.get('subject'),
          text: formData.get('text'),
        },
      },
      headers: {
        'Authorization': 'your-nextcron-token-here'
      }
    })    
  }

  return (
    <form action={sendEmail}>
      <input type="email" name="email" required placeholder="Your email" />
      <input type="text" name="subject" required placeholder="Subject" />
      <textarea name="text" required placeholder="Your message"></textarea>

      <button type="submit">Submit</button>
    </form>
  )
}

Conclusion

In this post, we've explored how to send emails with Next.js using NextCron to schedule the sending process. This approach allows for a more efficient and reliable email delivery system, ensuring that your users receive important communications in a timely manner.

Ready to enhance your email delivery system? Get started with NextCron for efficient scheduling and ensure your emails always reach their destination on time. Don't forget to create an account on Resend for easy email integration and follow me on Twitter for more tips and updates on web development.