Comment envoyer des e-mails avec React en utilisant Rense

Cet article montre comment intégrer de manière transparente les fonctionnalités des e-mails dans vos applications React à l'aide de l'e-mail et du renvoi React. Nous allons créer un formulaire de contact dans une application Next.js comme exemple pratique. Auparavant, l'intégration des e-mails dans React était notoirement difficile, mais ces outils simplifient considérablement le processus.

Avantages clés:

• Création et envoi des e-mails simplifiés: réagir les e-mails et renvoyer le développement de diffusion par e-mail, éliminant le besoin de solutions de contournement complexes.
• Guide complet: Ce didacticiel fournit une procédure pas à pas étape par étape de la mise en place d'une application Next.js, intégrant le renvoi, créant des composants de messagerie avec un e-mail React et implémentant des fonctionnalités d'envoi d'e-mail.
• Formulaire de contact de portefeuille pratique: Nous allons créer un formulaire de contact fonctionnel, démontrant la validation des entrées avec le formulaire ZOD et React Hook, la création de modèle de messagerie avec un e-mail React et la répartition par e-mail via le renoncement.

Configuration de votre application suivante.js:

Commencez par cloner le code de démarrage du référentiel GitHub fourni. Le projet de démarrage comprend une application de base Next.js 13 (à l'aide du routeur de l'application) avec un formulaire de contact avec le formulaire ZOD et React Hook pour la validation. La fonction onSubmit dans le composant du formulaire de contact est l'endroit où nous ajouterons notre logique d'envoi de messagerie:

<code class="language-javascript">function onSubmit(values: z.infer<typeof formschema="">) {
  // Email sending logic will be implemented here
  console.log(values);
}</typeof></code>

(Remarque: le style et la construction de formulaires sont omis pour la brièveté. CSS de vent arrière ou CSS standard peut être utilisé pour le style.)

Configuration du rendement:

1. Obtenez votre clé API: Connectez-vous ou créez un compte de renoncement. Dans le tableau de bord, générez une nouvelle clé API.

2. Configurer des variables d'environnement: Créez un fichier .env.local dans le répertoire racine de votre projet et ajoutez votre clé API:

<code>RESEND_API_KEY=your_api_key_here</code>

3. Vérification du domaine (facultatif): Pour envoyer des e-mails illimités, vérifiez votre domaine avec renoncement en ajoutant un enregistrement DNS (cette étape est facultative pour ce tutoriel).

Création du composant de messagerie (Email.tsx):

Importez les composants nécessaires de @react-email/components:

<code class="language-javascript">import { Body, Container, Head, Heading, Hr, Html, Preview, Tailwind, Text } from "@react-email/components";
import * as React from "react";</code>

Définissez une interface pour les données par e-mail:

<code class="language-typescript">interface ContactMeEmailProps {
  name: string;
  emailAddress: string;
  phoneNumber: string;
  content: string;
}</code>

Créez le composant de messagerie:

<code class="language-javascript">const VercelInviteUserEmail = ({ name, content, emailAddress, phoneNumber }: ContactMeEmailProps) => (
  
    
      <preview>A message from {name}</preview>
    
    <tailwind>
      <container classname="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] w-[465px]">
        <heading classname="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
          <strong>{name}</strong> would like to contact you!
        </heading>
        <text classname="text-black text-[14px] leading-[24px]">
          Here is the message: {content}
        </text>
        <hr classname="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full">
        <text classname="text-[#666666] text-[12px] leading-[24px]">
          This message was sent by {name}. Contact them at {emailAddress} or {phoneNumber}
        </text>
      </container>
    </tailwind>
  
);</code>

Envoi de l'e-mail avec resend (api/send/route.ts):

1. Importer les modules nécessaires:

<code class="language-javascript">function onSubmit(values: z.infer<typeof formschema="">) {
  // Email sending logic will be implemented here
  console.log(values);
}</typeof></code>

2. Créez une instance de renom:

<code>RESEND_API_KEY=your_api_key_here</code>

3. Définissez un schéma zod pour la validation:

<code class="language-javascript">import { Body, Container, Head, Heading, Hr, Html, Preview, Tailwind, Text } from "@react-email/components";
import * as React from "react";</code>

4. Implémentez le gestionnaire:

<code class="language-typescript">interface ContactMeEmailProps {
  name: string;
  emailAddress: string;
  phoneNumber: string;
  content: string;
}</code>

5. Mettez à jour la fonction onSubmit dans votre formulaire de contact pour envoyer une demande de message à /api/send:

<code class="language-javascript">const VercelInviteUserEmail = ({ name, content, emailAddress, phoneNumber }: ContactMeEmailProps) => (
  
    
      <preview>A message from {name}</preview>
    
    <tailwind>
      <container classname="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] w-[465px]">
        <heading classname="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
          <strong>{name}</strong> would like to contact you!
        </heading>
        <text classname="text-black text-[14px] leading-[24px]">
          Here is the message: {content}
        </text>
        <hr classname="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full">
        <text classname="text-[#666666] text-[12px] leading-[24px]">
          This message was sent by {name}. Contact them at {emailAddress} or {phoneNumber}
        </text>
      </container>
    </tailwind>
  
);</code>

Ceci termine les fonctionnalités d'envoi d'e-mail. N'oubliez pas de remplacer les adresses e-mail d'espace réservé par vos adresses e-mail réelles et de gérer les erreurs potentielles de manière appropriée. Le code source complet se trouve sur GitHub (lien fourni dans le texte d'origine).

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!