Comment envoyer des e-mails avec React en utilisant Rense-js tutoriel-php.cn

Comment envoyer des e-mails avec React en utilisant Rense

Lisa Kudrow

Libérer： 2025-02-08 13:12:11

original

496 Les gens l'ont consulté

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.

How to Send Emails with React Using Resend

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:

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

Copier après la connexion

(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:

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.

How to Send Emails with React Using Resend

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>

Copier après la connexion

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).

How to Send Emails with React Using Resend

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

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

import { Body, Container, Head, Heading, Hr, Html, Preview, Tailwind, Text } from "@react-email/components";
import * as React from "react";

Copier après la connexion

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

interface ContactMeEmailProps {
  name: string;
  emailAddress: string;
  phoneNumber: string;
  content: string;
}

Copier après la connexion

Créez le composant de messagerie:

const VercelInviteUserEmail = ({ name, content, emailAddress, phoneNumber }: ContactMeEmailProps) => (
  <Html>
    <Head>
      <Preview>A message from {name}</Preview>
    </Head>
    <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>
  </Html>
);

Copier après la connexion

How to Send Emails with React Using Resend

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

Importer les modules nécessaires:

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

Copier après la connexion

Créez une instance de renom:

<code>RESEND_API_KEY=your_api_key_here</code>

Copier après la connexion

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

import { Body, Container, Head, Heading, Hr, Html, Preview, Tailwind, Text } from "@react-email/components";
import * as React from "react";

Copier après la connexion

Implémentez le gestionnaire:

interface ContactMeEmailProps {
  name: string;
  emailAddress: string;
  phoneNumber: string;
  content: string;
}

Copier après la connexion

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

const VercelInviteUserEmail = ({ name, content, emailAddress, phoneNumber }: ContactMeEmailProps) => (
  <Html>
    <Head>
      <Preview>A message from {name}</Preview>
    </Head>
    <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>
  </Html>
);

Copier après la connexion

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!