So senden Sie E -Mails mit React mithilfe von Wiederversendungen

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.

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:

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

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

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

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

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

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

importieren die erforderlichen Komponenten aus @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>

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

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

Erstellen Sie die E -Mail -Komponente:

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

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

1. erforderliche Module importieren:

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

2. Erstellen Sie eine Wiederherstellungsinstanz:

<code>RESEND_API_KEY=your_api_key_here</code>

3. Definieren Sie ein ZOD -Schema zur Validierung:

<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. Implementieren Sie den Post -Handler:

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

5. Aktualisieren Sie die Funktion onSubmit in Ihrem Kontaktformular, um eine Postanforderung an /api/send:
zu senden

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

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!