next-intl - React Email

React Email supports next-intl for internationalization. This guide shows how to convert an English React Email template to support multiple locales.

Prerequisites

To get the most out of this guide, you’ll need to:

npm i -S next-intl

bun add next-intl

yarn add next-intl

pnpm add next-intl

This guide will use the following email template as a base.

emails/welcome.jsx

export default function WelcomeEmail({ name }) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to Acme</Preview>
      <Tailwind>
        <Body className="bg-gray-100 font-sans">
          <Container className="mx-auto py-10 px-5">
            <Section className="bg-white rounded-lg p-8">
              <Heading className="text-2xl font-bold text-gray-900 m-0 mb-6">
                Welcome to Acme
              </Heading>
              <Text className="text-base leading-6 text-gray-600 m-0 mb-4">
                Hi {name}
              </Text>
              <Text className="text-base leading-6 text-gray-600 m-0 mb-4">
                Thanks for signing up! We're excited to have you on board.
              </Text>
              <Button
                href="https://example.com/dashboard"
                className="bg-indigo-600 rounded-md text-white text-base font-semibold no-underline text-center block py-3 px-6 my-6"
              >
                Get Started
              </Button>
              <Hr className="border-gray-200 my-6" />
              <Text className="text-sm text-gray-400 m-0">
                If you have any questions, reply to this email. We're here to help!
              </Text>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

WelcomeEmail.PreviewProps = {
  name: 'John Lennon',
};

Internationalization with next-intl

next-intl is a library for internationalization and localization for Next.js that provides a way to format messages in different languages.

1. Create messages for each locale

For each locale, create a new JSON file containing the content of the email in that locale.

{
  "welcome-email": {
    "header": "Welcome to Acme",
    "hi": "Hi",
    "thanks": "Thanks for signing up! We're excited to have you on board.",
    "get-started": "Get Started",
    "questions": "If you have any questions, reply to this email. We're here to help!"
  }
}

{
  "welcome-email": {
    "header": "Bienvenido a Acme",
    "hi": "Hola",
    "thanks": "Gracias por registrarte! Estamos emocionados de tenerte en la plataforma.",
    "get-started": "Comenzar",
    "questions": "Si tienes alguna pregunta, responde a este correo electrónico. Estamos aquí para ayudarte!"
  }
}

{
  "welcome-email": {
    "header": "Bem-vindo ao Acme",
    "hi": "Olá",
    "thanks": "Obrigado por se inscrever! Estamos ansiosos para te receber na plataforma.",
    "get-started": "Começar",
    "questions": "Se você tiver alguma dúvida, responda a este e-mail. Estamos aqui para ajudar!"
  }
}

2. Update the email props

Add the locale prop to the email template, interface, and test data.

emails/welcome.jsx

export default function WelcomeEmail({ name }) {
export default function WelcomeEmail({ name, locale }) {
  return (
   ...
  );
}

WelcomeEmail.PreviewProps = {
  name: 'John Lennon',
  locale: 'en',
};

3. Update the email template

In the email template, remove the hardcoded content and use createTranslator function to format the email message strings.

emails/welcome.jsx

import { createTranslator } from 'next-intl';

export default async function WelcomeEmail({ name, locale }) {
  const t = createTranslator({
    messages: await import(`../messages/${locale}.json`),
    namespace: 'welcome-email',
    locale,
  });

  return (
    <Html>
      <Head />
      <Preview>Welcome to Acme</Preview>
      <Preview>{t('header')}</Preview>
      <Tailwind>
        <Body className="bg-gray-100 font-sans">
          <Container className="mx-auto py-10 px-5">
            <Section className="bg-white rounded-lg p-8">
              <Heading className="text-2xl font-bold text-gray-900 m-0 mb-6">
                Welcome to Acme
                {t('header')}
              </Heading>
              <Text className="text-base leading-6 text-gray-600 m-0 mb-4">
                Hi {name}
                {t('hi')} {name}
              </Text>
              <Text className="text-base leading-6 text-gray-600 m-0 mb-4">
                Thanks for signing up! We're excited to have you on board.
                {t('thanks')}
              </Text>
              <Button
                href="https://example.com/dashboard"
                className="bg-indigo-600 rounded-md text-white text-base font-semibold no-underline text-center block py-3 px-6 my-6"
              >
                Get Started
                {t('get-started')}
              </Button>
              <Hr className="border-gray-200 my-6" />
              <Text className="text-sm text-gray-400 m-0">
                If you have any questions, reply to this email. We're here to help!
                {t('questions')}
              </Text>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

WelcomeEmail.PreviewProps = {
  name: 'John Lennon',
  locale: 'en',
};

You can’t use other APIs here because the preview server will not have access to the next intl context that you might have defined in your Next.js app.

4. Update any email calls

When calling the email template, pass the locale prop to the email component.

Try it yourself

React Email with next-intl example

See the full source code.

Resend with next-intl example

See the full source code.

​Prerequisites

​Internationalization with next-intl

​1. Create messages for each locale

​2. Update the email props

​3. Update the email template

​4. Update any email calls

​Try it yourself

React Email with next-intl example

Resend with next-intl example

Prerequisites

Internationalization with next-intl

1. Create messages for each locale

2. Update the email props

3. Update the email template

4. Update any email calls

Try it yourself