Next.JS でメールに画像を追加する正しい方法

Next.js アプリで認証やトランザクションメールなどの機能を構築している場合、メールに画像を含める必要がある可能性があります。ただし、待ってください。通常の Web ページと同じ方法で画像を追加できると考える前に、電子メール クライアントに関しては少し工夫が必要です。

これはうまくいくと思うかもしれません:

import Image from 'next/image';

export default function Page() {
  return (
    <Image
      src="/email-image.png" // From your public folder
      // Other props...
    />
  );
}

あるいはこれ:

import Image from 'next/image';
import img from '../email-image.png';

export default function Page() {
  return (
    <Image
      src={img}
      // Other props...
    />
  );
}

どちらの方法でも、画像はブラウザの [host]/email-image.png または /_next/static/[hash].png にロードされます。ブラウザはここで何をすべきかを知っており、ホスト (https://acme.org など) を推測し、画像を取得して表示します。

しかし、ここが問題です。電子メールクライアントはあなたのホストを知りません。ユーザーには素敵な画像が表示される代わりに、何も表示されません。 /_next/static/[hash].png は有効なリソースに解決されないため、画像がどのホストから取得されるのかがわかりません。基本的に、インターネット上の実際のリソースを指す完全な URL は存在しないため、画像は壊れています。

修正は何ですか?

シンプル: CDN を使用します。電子メールに必要な画像を Cloudinary などのコンテンツ配信ネットワーク (CDN) にアップロードします。次に、生成された URL を電子メールで参照します。それは次のようになります:

import { Img } from '@react-email/components';

export default function Page() {
  return (
    <Img
      src="https://cdn.acme.org/email-image.png"
      // Other props...
    />
  );
}

ドーン！これで、電子メール クライアントは画像の場所を認識しました。危機は回避されました。

パブリック ディレクトリ全体を CDN でホストする

徹底的にやりたい場合 (または多くの画像をロードしている場合)、CDN からすべての静的アセットを提供するように Next.js を構成できます。

next.config.ts での設定方法は次のとおりです:

import type { NextConfig } from 'next';
import { PHASE_DEVELOPMENT_SERVER } from 'next/constants';

export default (phase) => {
  const isDev = phase === PHASE_DEVELOPMENT_SERVER;

  const nextConfig: NextConfig = {
    assetPrefix: isDev ? undefined : 'https://cdn.acme.org',
  };

  return nextConfig;
};

これは、本番環境のすべての静的ファイルの前に CDN の URL を付加するように Next.js に指示します。詳細については、Next.js の公式ドキュメントをご覧ください。

ここで、電子メール コンポーネントで次のように画像を使用すると:

import { Img } from '@react-email/components';
import img from '../email-image.png';

export default function Page() {
  return (
    <Img
      src={img}
      // Other props...
    />
  );
}

https://cdn.acme.org/_next/static/[hash].png のような URL が自動的に生成され、メールの画像が問題なく読み込まれます。

以上がNext.JS でメールに画像を追加する正しい方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。