【Next.js】mjmlが沼りそうなのでReact Emailに変える話

こんにちは、フリーランスエンジニアの太田雅昭です。

mjml

mjmlは、htmlメールの作成を簡単にするためのライブラリです。

Next.jsでエラー

mjmlをNext.jsのサーバーサイドで使用したかったのですが、下記のエラーが出ました。

no such file or directory, open '(rsc)/../../node_modules/.pnpm/uglify-js@3.19.3/node_modules/uglify-js/lib/utils.js'

色々調べているうちに、下記のissuesを発見。

https://github.com/vercel/next.js/issues/50042

どうやら、以下のような現象のようです。

• App routerではエラーになるが、Pages routerなら動く

この時点で、かなりやばい現象だとわかります。原因にまったく想像がつきません。

一応下記のように、next.config.jsに追記すれば改善するそうです。

module.exports = {
  experimental: {
    serverComponentsExternalPackages: ["mjml"],
  },
};

ただ根本的な解決ではない上、今後も予想しない現象が出そうです。そのため、おとなしくreact emailに乗り換えることにしました。

React Email

React Emailは、Reactの書き方でEmailのHTMLを生成できます。propsを渡して、render関数を呼び出せば、htmlに変換できるようです。

mjmlからのマイグレーションも紹介されています。

https://react.email/docs/getting-started/migrating-to-react-email

今回、mjmlでの実装はそれほど進んでいなかったため、すんなり乗り換えられそうです。