Ability to create a dynamic email/route

[multivoltage]

Goals

1. Write a [slug].tsx instead create N mail files for each slug
2. Write [lang].tsx intead create N mail files for each language

Background

Since react-mail is developer under next js, and since next js allows to create dynamic routes, this functionality can solve a lot problem like:

Write [lang].tsx intead create N mail files for each language
Now: => create and duplicate files for each language
After: => create a single [lang].tsx where inside there is a method like generateStaticParams()

1. Write a [slug].tsx instead create N mail files for each slug
Maybe I have 4 "hot" product coming from a list of 100. And each month this 4 products changes. The developer can fetch with an api async getHotProducts() inside generateStaticParams()

Proposal

To follow dynamic next routes can be a good solution.

I did not search in code but since there is PreviewProps a logic can be added to search generateStaticParams().
Even if I linked next docs, this new behavior don't want to follow the "cache" behavior of next framework.

[gabrielmfern]

I don't think it would be in the scope for React Email, and the same can probably be done with props and through another simpler path.

Another thing is that React Email is not NextJS, we just use it for the preview server app but your emails are very separate from it.

[multivoltage]

1. Yes, I spoke about next only for preview :)
2. I dont think the same can be done with props. I solved the problem using "render" utility to create my custom export. So in all files I have something like:

Mail.PreviewProps = {
  lang: "it",
  ...dictionary["it"]
}

// other file
const dictionary = {
  it: {
    label1: "ciao",
  }
}

a way to change props in a Storybook-like way might also be helpful with these sort of problems

It sounds cool :) Maybe I will (and search) one discussion.
I'm here only to contribute in something because I like it

[gabrielmfern]

I dont think the same can be done with props

Why not exactly? If thinking about the language use case, it can definitely be done. Without a library, it would be something like:

const dictionary = {
  'en-us': {
    'hello world': 'hello world'
  },
  'pt-br': {
    'hello world': 'olá mundo'
  },
}

function useTranslation(language) {
  return (key: string) => dictionary[language][key];
}

const MyEmail = ({ language }) => {
  const t = useTranslation(language);
  return <h1>
    {t('hello world')}
  </h1>;
};

MyEmail.PreviewProps = {
  language: "en-us"
}

I'm here only to contribute in something because I like it

Good to know, extra help is always welcome 😁

[multivoltage]

Why not exactly? If thinking about the language use case, it can definitely be done. Without a library, it would be something like:

because like I said i need to create N files for N languages.
Otherwhise I understood the scope :)

[gabrielmfern]

@multivoltage Why would you need the N files?

[multivoltage]

Because I have 4 languages for each mail.