Regarding the section Code Using react-email:

Here is the sample output:

I've created a minimal sample in my GitHub repository.

I've updated the package @react-email/components to latest: 0.0.31, removed parent Row component as NextJS is complaining about the hydration when using non table elements inside Row aka <tr>.

You can view the implementation of @react-email here ReactEmail.tsx, imported in server page component: verification/page.tsx added the Head/Title components from @react-email's title value as NextJS's MetaData

You cannot use Html and Head components inside components or pages as it is already set-upped by the layout.tsx, regarding the font Roboto, I've added it in line 5 of layout.tsx

You can learn more about NextJS directives here.