Email Template Translations | Next.js Supabase SaaS Kit

packages/email-templates/src/
├── locales/
│   └── en/
│       ├── account-delete-email.json
│       ├── invite-email.json
│       └── otp-email.json
└── lib/
    └── i18n.ts

{
  "subject": "You have been invited to join a team",
  "heading": "Join {teamName} on {productName}",
  "hello": "Hello {invitedUserEmail},",
  "mainText": "<strong>{inviter}</strong> has invited you to the <strong>{teamName}</strong> team on <strong>{productName}</strong>.",
  "joinTeam": "Join {teamName}",
  "copyPasteLink": "or copy and paste this URL into your browser:",
  "invitationIntendedFor": "This invitation is intended for {invitedUserEmail}."
}

{
  "subject": "We have deleted your {productName} account",
  "previewText": "We have deleted your {productName} account",
  "hello": "Hello {displayName},",
  "paragraph1": "This is to confirm that we have processed your request to delete your account with {productName}.",
  "paragraph2": "We're sorry to see you go. Please note that this action is irreversible, and we'll make sure to delete all of your data from our systems.",
  "paragraph3": "We thank you again for using {productName}.",
  "paragraph4": "The {productName} Team"
}

{
  "subject": "One-time password for {productName}",
  "heading": "One-time password for {productName}",
  "otpText": "Your one-time password is: {otp}",
  "mainText": "You're receiving this email because you need to verify your identity using a one-time password.",
  "footerText": "Please enter the one-time password in the app to continue."
}

mkdir packages/email-templates/src/locales/es

cp packages/email-templates/src/locales/en/*.json packages/email-templates/src/locales/es/

{
  "subject": "Has sido invitado a unirte a un equipo",
  "heading": "Unete a {teamName} en {productName}",
  "hello": "Hola {invitedUserEmail},",
  "mainText": "<strong>{inviter}</strong> te ha invitado al equipo <strong>{teamName}</strong> en <strong>{productName}</strong>.",
  "joinTeam": "Unirse a {teamName}",
  "copyPasteLink": "o copia y pega esta URL en tu navegador:",
  "invitationIntendedFor": "Esta invitacion es para {invitedUserEmail}."
}

import type { AbstractIntlMessages } from 'next-intl';
import { createTranslator } from 'next-intl';
export async function initializeEmailI18n(params: {
  language: string | undefined;
  namespace: string;
}) {
  const language = params.language ?? 'en';
  try {
    const messages = (await import(
      `../locales/${language}/${params.namespace}.json`
    )) as AbstractIntlMessages;
    const translator = createTranslator({
      locale: language,
      messages,
    });
    const t = translator as unknown as (
      key: string,
      values?: Record<string, unknown>,
    ) => string;
    return { t, language };
  } catch (error) {
    console.log(
      `Error loading i18n file: locales/${language}/${params.namespace}.json`,
      error,
    );
    const t = (key: string) => key;
    return { t, language };
  }
}

import { renderInviteEmail } from '@kit/email-templates';
export async function sendInviteEmail(params: {
  invitedUserEmail: string;
  inviter: string;
  teamName: string;
  inviteLink: string;
  language?: string; // Recipient's preferred language
}) {
  const { html, subject } = await renderInviteEmail({
    invitedUserEmail: params.invitedUserEmail,
    inviter: params.inviter,
    teamName: params.teamName,
    link: params.inviteLink,
    productName: 'Your App',
    language: params.language, // Pass the language
  });
  await sendEmail({
    to: params.invitedUserEmail,
    subject,
    html,
  });
}

// When sending an email
const user = await getUserById(userId);
const language = user.preferredLanguage ?? 'en';
await sendInviteEmail({
  // ...other params
  language,
});

'use server';
import { getLocale } from 'next-intl/server';
export async function inviteMember(email: string) {
  const currentLanguage = await getLocale();
  await sendInviteEmail({
    invitedUserEmail: email,
    // Use inviter's language as default for the invited user
    language: currentLanguage,
  });
}

{
  "subject": "Welcome to {productName}",
  "heading": "Welcome aboard!",
  "hello": "Hello {userName},",
  "mainText": "Thank you for joining {productName}. We're excited to have you!",
  "getStarted": "Get Started",
  "helpText": "If you have any questions, feel free to reach out to our support team."
}

import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Section,
  Text,
  render,
} from '@react-email/components';
import { initializeEmailI18n } from '../lib/i18n';
interface WelcomeEmailProps {
  userName: string;
  productName: string;
  dashboardUrl: string;
  language?: string;
}
export async function renderWelcomeEmail(props: WelcomeEmailProps) {
  const namespace = 'welcome-email';
  const { t } = await initializeEmailI18n({
    language: props.language,
    namespace,
  });
  const subject = t('subject', { productName: props.productName });
  // Use render() to convert JSX to HTML string
  const html = await render(
    <Html>
      <Head />
      <Preview>{subject}</Preview>
      <Body>
        <Container>
          <Heading>{t('heading')}</Heading>
          <Text>{t('hello', { userName: props.userName })}</Text>
          <Text>
            {t('mainText', { productName: props.productName })}
          </Text>
          <Section>
            <Button href={props.dashboardUrl}>
              {t('getStarted')}
            </Button>
          </Section>
          <Text>{t('helpText')}</Text>
        </Container>
      </Body>
    </Html>
  );
  return { html, subject };
}

export * from './emails/welcome.email';

{
  "hello": "Hello {userName},"
}

{
  "mainText": "<strong>{inviter}</strong> has invited you to join <strong>{teamName}</strong>."
}

<Text dangerouslySetInnerHTML={{ __html: t('mainText', { inviter, teamName }) }} />

# Start the email preview server
cd packages/email-templates
pnpm dev

# Check that all email translation files exist
for lang in en es de fr; do
  for file in invite-email account-delete-email otp-email; do
    path="packages/email-templates/src/locales/${lang}/${file}.json"
    if [ -f "$path" ]; then
      echo "OK: $path"
    else
      echo "MISSING: $path"
    fi
  done
done

const { html, subject } = await renderInviteEmail({
  // ...
  language: user.preferredLanguage, // Must be passed explicitly
});

packages/email-templates/src/locales/[language]/[namespace].json