> ## Documentation Index > Fetch the complete documentation index at: https://react.email/docs/llms.txt > Use this file to discover all available pages before exploring further. # next-intl > Integrating React Email with next-intl 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) ```bash npm theme={"theme":{"light":"github-light","dark":"vesper"}} npm i -S next-intl ``` ```bash bun theme={"theme":{"light":"github-light","dark":"vesper"}} bun add next-intl ``` ```bash yarn theme={"theme":{"light":"github-light","dark":"vesper"}} yarn add next-intl ``` ```bash pnpm theme={"theme":{"light":"github-light","dark":"vesper"}} pnpm add next-intl ``` This guide will use the following email template as a base. ```jsx emails/welcome.jsx theme={"theme":{"light":"github-light","dark":"vesper"}} export default function WelcomeEmail({ name }) { return ( Welcome to Acme
Welcome to Acme Hi {name} Thanks for signing up! We're excited to have you on board.
If you have any questions, reply to this email. We're here to help!
); } 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. ```json messages/en.json theme={"theme":{"light":"github-light","dark":"vesper"}} { "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 theme={"theme":{"light":"github-light","dark":"vesper"}} { "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 theme={"theme":{"light":"github-light","dark":"vesper"}} { "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. ```jsx emails/welcome.jsx theme={"theme":{"light":"github-light","dark":"vesper"}} // [!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 theme={"theme":{"light":"github-light","dark":"vesper"}} // [!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 ( // [!code --] Welcome to Acme // [!code ++] {t('header')}
// [!code --] Welcome to Acme // [!code ++] {t('header')} // [!code --] Hi {name} // [!code ++] {t('hi')} {name} // [!code --] Thanks for signing up! We're excited to have you on board. // [!code ++] {t('thanks')}
// [!code --] If you have any questions, reply to this email. We're here to help! // [!code ++] {t('questions')}
); } 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 See the full source code. See the full source code.