So senden Sie E -Mails mit React mithilfe von Wiederversendungen-js-Tutorial-php.cn

So senden Sie E -Mails mit React mithilfe von Wiederversendungen

Lisa Kudrow

Freigeben： 2025-02-08 13:12:11

Original

495 Leute haben es durchsucht

Dieser Artikel zeigt, wie man E -Mail -Funktionen nahtlos in Ihre React -Anwendungen mithilfe von React -E -Mail integriert und neu sendiert. Als praktisches Beispiel erstellen wir ein Kontaktformular innerhalb einer nächsten.js -Anwendung. Bisher war die E -Mail -Integration in React notorisch herausfordernd, aber diese Tools vereinfachen den Prozess drastisch.

How to Send Emails with React Using Resend

Schlüsselvorteile:

vereinfachte E -Mail -Erstellung und Senden: reagieren Sie die E -Mail und senden Sie die E -Mail -Entwicklung neu, wodurch die Notwendigkeit komplexer Problemumgehungen beseitigt wird.
umfassende Anleitung: Dieses Tutorial bietet eine Schritt-für-Schritt-Vorgehensweise bei der Einrichtung einer nächsten.js-App, integrieren Sie Reend, Erstellen von E-Mail-Komponenten mit React-E-Mail und Implementierung von E-Mail-Sendungsfunktionen.
Praktisches Portfolio -Kontaktformular: Wir erstellen ein funktionales Kontaktformular, die Eingabevalidierung mit ZOD- und React -Hook -Formular, Erstellung von E -Mail -Vorlagen mit React -E -Mail und E -Mail -Versand über Wiederversenden.

Einrichten Ihrer nächsten.js -Anwendung:

Beginnen Sie mit dem Klonieren des Startercode aus dem bereitgestellten GitHub -Repository. Das Starterprojekt enthält eine Basic Next.js 13 App (mit dem App -Router) mit einem Kontaktformular mit ZOD- und React -Hook -Formular zur Validierung. In der onSubmit -Funktion in der Kontaktformularkomponente werden wir unsere E -Mail -Sende -Logik hinzufügen:

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

Nach dem Login kopieren

(Hinweis: Styling und Formgebäude werden für die Kürze weggelassen. Rückenwind -CSS oder Standard -CSS kann zum Styling verwendet werden.)

Konfigurieren von Wiederversenden:

Ermitteln Sie Ihren API -Schlüssel: Melden Sie sich an oder erstellen Sie ein Wiederversendungskonto. Generieren Sie aus dem Dashboard einen neuen API -Schlüssel.

How to Send Emails with React Using Resend

Umgebungsvariablen einrichten: Erstellen Sie eine .env.local -Datei im Stammverzeichnis Ihres Projekts und fügen Sie Ihren API -Schlüssel hinzu:

<code>RESEND_API_KEY=your_api_key_here</code>

Nach dem Login kopieren

Domänenüberprüfung (optional): Für das Senden unbegrenzter E -Mails überprüfen Sie Ihre Domain mit Wiederversendung durch Hinzufügen eines DNS -Datensatzes (dieser Schritt ist für dieses Tutorial optional).

How to Send Emails with React Using Resend

Erstellen der E -Mail -Komponente (Email.tsx):

importieren die erforderlichen Komponenten aus @react-email/components:

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

Nach dem Login kopieren

Definieren Sie eine Schnittstelle für E -Mail -Daten:

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

Nach dem Login kopieren

Erstellen Sie die E -Mail -Komponente:

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

Nach dem Login kopieren

How to Send Emails with React Using Resend

Senden Sie die E -Mail mit resend (api/send/route.ts):

erforderliche Module importieren:

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

Nach dem Login kopieren

Erstellen Sie eine Wiederherstellungsinstanz:

<code>RESEND_API_KEY=your_api_key_here</code>

Nach dem Login kopieren

Definieren Sie ein ZOD -Schema zur Validierung:

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

Nach dem Login kopieren

Implementieren Sie den Post -Handler:

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

Nach dem Login kopieren

Aktualisieren Sie die Funktion onSubmit in Ihrem Kontaktformular, um eine Postanforderung an /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>
);

Nach dem Login kopieren

Dies vervollständigt die E -Mail -Senden -Funktionalität. Denken Sie daran, Platzhalter -E -Mail -Adressen durch Ihre tatsächlichen E -Mail -Adressen zu ersetzen und potenzielle Fehler angemessen zu behandeln. Der vollständige Quellcode finden Sie in GitHub (Link im Originaltext).

Das obige ist der detaillierte Inhalt vonSo senden Sie E -Mails mit React mithilfe von Wiederversendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!