La bonne façon d'ajouter des images aux e-mails dans Next.JS

Si vous créez des fonctionnalités telles que l'authentification ou les e-mails transactionnels dans votre application Next.js, vous devrez probablement inclure des images dans vos e-mails. Mais attendez : avant de supposer que vous pouvez ajouter des images de la même manière que vous le faites pour des pages Web classiques, il y a une petite différence en ce qui concerne les clients de messagerie.

Vous pourriez penser que cela fonctionne :

import Image from 'next/image';

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

Ou peut-être ceci :

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

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

Les deux approches entraîneront le chargement de votre image sur [host]/email-image.png ou /_next/static/[hash].png dans un navigateur. Le navigateur sait quoi faire ici : il déduit l'hôte (comme https://acme.org), récupère l'image et l'affiche.

Mais voici le problème : les clients de messagerie ne connaissent pas votre hébergeur. Au lieu de voir une belle image, vos utilisateurs ne voient… rien. Parce que /_next/static/[hash].png ne se résout pas en une ressource valide, il ne sait pas de quel hôte l'image doit provenir. Essentiellement, il n’existe pas d’URL complète pointant vers une ressource réelle sur Internet, donc l’image se brise.

Quelle est la solution ?

Simple : utilisez un CDN. Téléchargez les images dont vous avez besoin pour les e-mails sur un réseau de diffusion de contenu (CDN) comme Cloudinary. Ensuite, référencez l'URL générée dans vos e-mails. Voici à quoi ça ressemble :

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

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

Boum ! Le client de messagerie sait désormais où trouver votre image. Crise évitée.

Hébergement de l'intégralité de votre annuaire public sur un CDN

Si vous souhaitez être minutieux (ou si vous chargez de nombreuses images), vous pouvez configurer Next.js pour qu'il serve tous vos actifs statiques à partir d'un CDN.

Voici comment vous le configureriez dans votre 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;
};

Cela indique à Next.js d'ajouter l'URL du CDN à tous les fichiers statiques en production. Pour plus de détails, vous pouvez consulter la documentation officielle de Next.js.

Maintenant, lorsque vous utilisez une image dans votre composant de messagerie comme ceci :

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

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

Il générera automatiquement une URL telle que https://cdn.acme.org/_next/static/[hash].png, et les images de vos e-mails se chargeront sans accroc.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!