mirror of
https://github.com/resend/react-email.git
synced 2026-09-14 14:18:02 +08:00
Gabriel Miranda
b47565f4c4
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
255 lines
6.7 KiB
Plaintext
255 lines
6.7 KiB
Plaintext
---
|
||
title: 'next-intl'
|
||
sidebarTitle: 'next-intl'
|
||
description: 'Integrating React Email with next-intl'
|
||
'og:image': 'https://react.email/static/covers/react-email.png'
|
||
---
|
||
|
||
React Email supports [next-intl](https://next-intl.dev) 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:
|
||
|
||
- [Set up React Email](/getting-started/automatic-setup)
|
||
- [Install next-intl](https://next-intl.dev/docs/getting-started/app-router)
|
||
|
||
<CodeGroup>
|
||
|
||
```bash npm
|
||
npm i -S next-intl
|
||
```
|
||
|
||
```bash bun
|
||
bun add next-intl
|
||
```
|
||
|
||
```bash yarn
|
||
yarn add next-intl
|
||
```
|
||
|
||
```bash pnpm
|
||
pnpm add next-intl
|
||
```
|
||
|
||
</CodeGroup>
|
||
|
||
|
||
This guide will use the following email template as a base.
|
||
|
||
```jsx 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.
|
||
|
||
<CodeGroup>
|
||
|
||
```json messages/en.json
|
||
{
|
||
"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!"
|
||
}
|
||
}
|
||
```
|
||
|
||
```json messages/es.json
|
||
{
|
||
"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!"
|
||
}
|
||
}
|
||
```
|
||
|
||
```json messages/pt.json
|
||
{
|
||
"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!"
|
||
}
|
||
}
|
||
```
|
||
|
||
</CodeGroup>
|
||
|
||
|
||
### 2. Update the email props
|
||
|
||
Add the `locale` prop to the email template, interface, and test data.
|
||
|
||
```jsx emails/welcome.jsx
|
||
// [!code --]
|
||
export default function WelcomeEmail({ name }) {
|
||
// [!code ++]
|
||
export default function WelcomeEmail({ name, locale }) {
|
||
return (
|
||
...
|
||
);
|
||
}
|
||
|
||
WelcomeEmail.PreviewProps = {
|
||
name: 'John Lennon',
|
||
// [!code ++]
|
||
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.
|
||
|
||
```jsx emails/welcome.jsx
|
||
// [!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.
|
||
|
||
### 4. Update any email calls
|
||
|
||
When calling the email template, pass the `locale` prop to the email component.
|
||
|
||
## Try it yourself
|
||
|
||
<CardGroup>
|
||
<Card
|
||
title="React Email with next-intl example"
|
||
icon='arrow-up-right-from-square'
|
||
iconType="duotone"
|
||
href="https://github.com/resend/react-email-next-intl-example"
|
||
>
|
||
See the full source code.
|
||
</Card>
|
||
<Card
|
||
title="Resend with next-intl example"
|
||
icon='arrow-up-right-from-square'
|
||
iconType="duotone"
|
||
href="https://github.com/resend/resend-next-intl-example"
|
||
>
|
||
See the full source code.
|
||
</Card>
|
||
</CardGroup>
|