How to send attachments with Resend in NextJS?

Question

I wanted to know how can I send attachments with Resend: https://resend.com in NextJS (API route or Server actions) since I'm unable to find a working solutions just yet.

I tried multiple solutions online as well as their documentation, although I was able to send the attachment, when I open it, it doesn't open.

I am Bas64 encoding the file and then sending it within the field content and making sure the extension is correct in the filename as well but it still gets broken.

Below is the server side code:

import { EmailTemplate } from '@/components/EmailTemplate';
import { Resend } from 'resend';

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

export async function POST(req: Request) {
    try {
        const {
            subject,
            attachments,
        } = await req.json();

        const { data } = await resend.emails.send({
            from: 'Test Mail <[email protected]>',
            to: [
                '[email protected]',
            ],
            subject,
            react: EmailTemplate() as React.ReactElement,
            attachments: attachments,
        });

        return Response.json(data);
    } catch (error) {
        return Response.json({ error });
    }
}

I'm sending a list of objects that contain the content (base64 encoded file) and filename which is a string.

I even tried sending a link in the path field but that doesn't work either.

I took the reference of this doc: https://resend.com/docs/api-reference/emails/send-email)

Answer 1

Figured out the answer:

I knew that we can either pass the buffer or the base64 encoded string for the file that you want to attach but the issue was that I was passing in the Data URI as well with the encoding of the file which broke it.

So make sure that the string of the file that you're sending doesn't contain this value: data:@file/png;base64,