> ## 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. # react-i18next > Integrating React Email with react-i18next React Email supports [react-i18next](https://react.i18next.com) 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 react-i18next](https://react.i18next.com/getting-started) ```bash npm theme={"theme":{"light":"github-light","dark":"vesper"}} npm i -S react-i18next i18next i18next-resources-to-backend ``` ```bash bun theme={"theme":{"light":"github-light","dark":"vesper"}} bun add react-i18next i18next i18next-resources-to-backend ``` ```bash yarn theme={"theme":{"light":"github-light","dark":"vesper"}} yarn add react-i18next i18next i18next-resources-to-backend ``` ```bash pnpm theme={"theme":{"light":"github-light","dark":"vesper"}} pnpm add react-i18next i18next i18next-resources-to-backend ``` 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 react-i18next react-i18next is a library for internationalization and localization 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/welcome-email.json theme={"theme":{"light":"github-light","dark":"vesper"}} { "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/welcome-email.json theme={"theme":{"light":"github-light","dark":"vesper"}} { "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/welcome-email.json theme={"theme":{"light":"github-light","dark":"vesper"}} { "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. Setting up helpers If you don't already, go ahead and create a `getT` helper meant for getting translations on the server: ```js get-t.js expandable theme={"theme":{"light":"github-light","dark":"vesper"}} import { i18next } from './i18n'; export async function getT(namespace, locale) { if (locale && i18next.resolvedLanguage !== locale) { await i18next.changeLanguage(locale) } if (namespace && !i18next.hasLoadedNamespace(namespace)) { await i18next.loadNamespaces(namespace) } return { t: i18next.getFixedT( locale ?? i18next.resolvedLanguage, Array.isArray(namespace) ? namespace[0] : namespace, ), i18n: i18next } } ``` Where `./i18n` is where you would have setup your i18next, for example: ```js i18n.js expandable theme={"theme":{"light":"github-light","dark":"vesper"}} import i18next, { loadNamespaces } from 'i18next'; import resourcesToBackend from 'i18next-resources-to-backend'; import { initReactI18next } from 'react-i18next'; i18next .use(initReactI18next) .use(resourcesToBackend((language, namespace) => import(`messages/${language}/${namespace}.json`))) .init({ supportedLngs: ['en', 'es', 'pt'], fallbackLng: 'en', lng: undefined, detection: { order: ['path', 'htmlTag', 'cookie', 'navigator'] }, preload: typeof window === 'undefined' ? ['en', 'es', 'pt'] : [], }); export { i18next }; ``` ### 4. Update the email template In the email template, remove the hardcoded content and use `getT`'s `t` to format the email message strings. ```jsx emails/welcome.jsx theme={"theme":{"light":"github-light","dark":"vesper"}} // [!code ++] import { getT } from '../get-t'; export default async function WelcomeEmail({ name, locale }) { // [!code ++] const { t } = await getT('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', }; ``` ### 5. 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.