apps/docs/guides/internationalization/next-intl.mdx
React Email supports next-intl for internationalization.
This guide shows how to convert an English React Email template to support multiple locales.
To get the most out of this guide, you’ll need to:
<CodeGroup>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.
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',
};
next-intl is a library for internationalization and localization for Next.js that provides a way to format messages in different languages.
For each locale, create a new JSON file containing the content of the email in that locale.
<CodeGroup>{
"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!"
}
}
Add the locale prop to the email template, interface, and test data.
// [!code --]
export default function WelcomeEmail({ name }) {
// [!code ++]
export default function WelcomeEmail({ name, locale }) {
return (
...
);
}
WelcomeEmail.PreviewProps = {
name: 'John Lennon',
// [!code ++]
locale: 'en',
};
In the email template, remove the hardcoded content and use createTranslator function to format the email message strings.
// [!code ++]
import { createTranslator } from 'next-intl';
export default async function WelcomeEmail({ name, locale }) {
// [!code ++:5]
const t = createTranslator({
messages: await import(`../messages/${locale}.json`),
namespace: 'welcome-email',
locale,
});
return (
<Html>
<Head />
// [!code --]
<Preview>Welcome to Acme</Preview>
// [!code ++]
<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">
// [!code --]
Welcome to Acme
// [!code ++]
{t('header')}
</Heading>
<Text className="text-base leading-6 text-gray-600 m-0 mb-4">
// [!code --]
Hi {name}
// [!code ++]
{t('hi')} {name}
</Text>
<Text className="text-base leading-6 text-gray-600 m-0 mb-4">
// [!code --]
Thanks for signing up! We're excited to have you on board.
// [!code ++]
{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"
>
// [!code --]
Get Started
// [!code ++]
{t('get-started')}
</Button>
<Hr className="border-gray-200 my-6" />
<Text className="text-sm text-gray-400 m-0">
// [!code --]
If you have any questions, reply to this email. We're here to help!
// [!code ++]
{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.
When calling the email template, pass the locale prop to the email component.