Static files should be accessed from the public folder instead of './static'

[DoctorOak]

Describe the Bug

At least one of the use cases for this project is to use React Email to build, preview and then send transactional (dynamic) emails within existing (almost certainly NextJS) projects.

Right now, accessing static (image) assets in both the React-Email preview and when sending the email via your app requires you to duplicate these assets in the repo because React-Email requires them to be in a static folder within the root, while NextJS - since version 9.0.6, so as far as I can tell, before even the creation of this project - requires them be within the public folder (and you'd have to put your files within an unnecessary static folder inside public too just to match the preview).

This just seems a pointless level of complication and redundancy when you could mirror the public folder into the .react-email public folder instead.

Not only this, but it's additionally confusing to new users in general as there is no documentation about where to put your files so that they are accessible within the .react-email preview app and the demo in the repository incorrectly stores these files within the emails folder (which achieves nothing in reality, and would of course still require duplicating these assets to be available in your public folder anyway even if it did).

Please just simplify things by mirroring the ./public folder into .react-email/public, or at the very least having a configuration file that defines where your static assets are so both ./static and ./public can work as expected.

Which package is affected (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://github.com/resendlabs/react-email

To Reproduce

• Place image files in your public folder so your email can include them when sent.
• run npx react-email dev
• Broken images in preview build because the files are not copied into .react-email/public

Expected Behavior

• Place image files in your public folder so your email can include them when sent.
• run npx react-email dev
• Images work in preview because ./public is mirrored into .react-email/public

What's your node version? (if relevant)

No response

[s-masaya-tt]

I am so confused about where to place images.

[gabrielmfern]

Our intentions are to be agnostic in relation to what way the user will use for hosting their images, if they will be hosting on their Next App or if they will be hosting somewhere else is not something we can account for perfectly.
That being said, we can't force users to use static files inside of public/static. A possible better solution is for us to have some kind of flag over which users can provide the location of the static files for it to work properly on any case and by default work as is.
Sorry for taking so long to answer this, I'll take a look into getting this in a better shape. I also have the docs in mind and have a few plans of PRs to make as of to improve them in this sense as well.

[matteorchard]

Not sure if this still on discussion but, I would like to describe my desired use case, in case considerations can be made in the future.
As an email templates provider, I'd like to host the one build to serve multiple clients, and have the images pull in and be served under a client sub route.

• /emails/[CLIENT]/[JOB_ID]/images
• /emails/[CLIENT]/[JOB_ID]/template.tsx (one or more)
  This can eventually be moved in the top level static folder as long as folders names are kept.

While writing this I can see even more, this might not be a wide method of implementation, as most devs might be fine hosting 1 build for each client. (surely safer coice, if hosting is not an issue)
Anyway thanks for reading

[ukcw]

Has this been addressed?

[phemehboy]

I am having problem with images and links in my react-mail pls can anyone help??

My images and links are not working on development when using react email by resend. I used baseurl to get the images and the link but it is not working. I will be grateful if someone can help me on this as I am using nextjs.

my baseurl is below:
const baseUrl = process.env.VERCEL_URL
? https://${process.env.VERCEL_URL}
: "http://localhost:3000";

my Img is below:
<Img
src={${baseUrl}/assets/email/admin.png}
width="40"
height="37"
alt=""
className="my-0 mx-auto"
/>
my image is placed in "public/assets/email/admin.png" and I am running it on port 3000

But it is not working in nextjs. Please help