What would be the best way to host an email campaign template in the web?

Edgar Lindo · 2024-08-21 19:28:56.721478

Ok so I got a template for an email campaign, but in order to email it I need other things like a route.js with variables using the app router in Next.js I am sending the email using Node.js, and the template needs to be coded in plain html with inline CSS in such a way that it is understood by email providers who work in a different way than browsers. I hate to do a plain html / inline CSS code, and then, re-code the entire thing to satisfy REACT/Next.js ... This is giving me a bit of a headache just thinking about it... If I do host in the web a plain html I might lose some of the variables that are currently getting fed through the Next.js routes.. but that might not be a killer, but not ideal. If I want the entire thing, I think I might need to re-code the entire page for Next.js, and isn't that great either, because it isn't an easy way to duplicate a possible bunch of other templates. So, what you guys think would be the easier way to get this done?.... So far it isn't looking too appealing and I might just leave it out all together.

Vercel Alum

Hi, !

I wonder if using something like Resend would simplify what you're trying to do? https://vercel.com/integrations/resend

vercel.com

Resend for Vercel – Vercel

Email for developers

Hello!

Thank you much for your feedback.

Maybe I am overthinking it too much.

Many email providers can't read much html / CSS all that great... that is many people seem to use inline CSS and code it in a way that is understood for most email providers.

Silly question on something I haven't tried.... is it possible to insert a Next.js component in the html section of Nodemailer? <-- Don't know if people are familiar with Nodemailer, but I think you can do that with handlebar.js and Nodemailer....

Anyway.. if Next.js has a way to integrate their code for nodemailer html, then that would be the solution.

It is interesting that Resend say you can just code it Next and they will send the template... but I know that email providers can't read code like browsers do, and that is why you have to keep it in mind when you code it...

Vercel Alum

Don’t know if people are familiar with Nodemailer, but I think you can do that with handlebar.js and Nodemailer…

I'm not too familiar with what is possible with Nodemailer / Next.js, but if you give it a go in your project and come back with results I'm sure we'll all learn something!

The more I re-read your original post though, the more I'm convinced that Resend is exactly what you're looking for. I'll link their docs below in case you're keen to dig deeper:

https://resend.com/docs/introduction

Resend

Introduction - Resend

Resend is the email API for developers.

Hey thank you!

I think I figured out a way to do it!.. LOL... I have already been doing it for something else a bit simpler.

Now, all I want is to host an html page (email template) using next.js... that way people has the option to view the email from their email providers, or click on a link to view it on the web.

All I need to do is create a dynamic route to catch the variables from the email link.
Once the user clicks the link, the user goes to my dynamic route and then the response would be like this:

const htmlResponse = <html> <body style = "color: blue"> <div> <div> <h1> Hello There, </h1> </div> <div> How are you today ${name}. Check out this email hosted on the web! </div> </div> </body> </html> ;

return new Response(htmlResponse, { headers: { "Content-Type": "text/html" }, });

^^^ I am doing something similar to send a response for something else, but I didn't think of including the entire email html template.

I think the above would work.

Now, for the plain html I just do the original code without Next.js, but that is not a big deal because I can just do copy and paste it in Next.js.... just gotta make sure it looks as intended once I open it in Outlook or Gmail.

Just confirming that it worked!

Vercel Alum

Ah ha! I see what you mean. Thanks so much for coming back with your solution! Appreciate it. We're here if you have any more questions but we also invite you to share any of your projects in the Community space.