React Emailを使った多言語HTMLメールをスクリプトから送る方法

はじめに

React Emailは、Reactコンポーネントを使ってHTMLメールをデザインできる便利なツールです。スタイルにtailwindが使えたり、HTMLメールに対応できていないメールクライアント用に自動的にPlain Text化してくれるなど、システムから送るメールを管理しやすくしてくれます。スクリプトからReact Emailを使ってメールを送る際にいくつか設定が必要なので、その方法を共有します。

課題

• TypeScriptの制約
  Reactコンポーネントを扱う必要があるため、tsファイルではエラーが発生します。

• i18nの設定
  メールの文面の多言語対応をしている場合、i18n関連の設定が必要です。

解決方法

• スクリプトの拡張子をtsxに変更

tsxコマンドであればtsxファイルの実行が可能です

npm exec tsx ./scripts/send-mail.tsx

• i18nの設定
  i18next & react-i18nextを設定し、I18nextProviderでReactコンポーネントをラップしてレンダリングします。

具体的なコード例

import path, { join } from 'path'
import { fileURLToPath } from 'url'
import i18next from 'i18next'
import Backend from 'i18next-fs-backend'
import { I18nextProvider } from 'react-i18next'
import { renderAsync } from '@react-email/components'
import EmailComponent from './EmailComponent'

const lang = 'en'
const namespaces = ['common', 'mail']
const __dirname = path.dirname(fileURLToPath(import.meta.url)) // 現在のディレクトリ

await i18next.use(Backend).init({
  ns: namespaces,
  lng: lang,
  backend: {
    loadPath: join(__dirname, '../public/locales/{{lng}}/{{ns}}.json'), // localeファイルパス
  },
})

const t = i18next.t // t関数として利用できる

const { html, text } = await renderReactEmail(
  <I18nextProvider i18n={i18next}>
    <EmailComponent />
  </I18nextProvider>
)

async function renderReactEmail(react: ReactElement) {
  const [html, text] = await Promise.all([
    renderAsync(react),
    renderAsync(react, { plainText: true }),
  ])
  return { html, text }
}

// html, textを利用して送信...

まとめ

スクリプトから多言語対応のReactメールを送信する方法を紹介しました。