Cara menghantar e -mel dengan reaksi menggunakan resend

Artikel ini menunjukkan cara mengintegrasikan fungsi e -mel dengan lancar ke dalam aplikasi React anda menggunakan e -mel React dan Resend. Kami akan membina borang hubungan dalam aplikasi Next.js sebagai contoh praktikal. Sebelum ini, integrasi e -mel dalam React sangat mencabar, tetapi alat -alat ini secara drastik memudahkan proses.

Kelebihan utama:

• Penciptaan e -mel yang dipermudahkan dan menghantar: React E -mel dan Resend menyelaraskan pembangunan e -mel, menghapuskan keperluan untuk penyelesaian yang kompleks.
• Panduan Komprehensif: Tutorial ini menyediakan langkah demi langkah untuk menubuhkan aplikasi seterusnya.js, mengintegrasikan Resend, mewujudkan komponen e-mel dengan e-mel React, dan melaksanakan fungsi penghantaran e-mel.
Borang Perhubungan Portfolio Praktikal:
• Kami akan membina borang hubungan yang berfungsi, menunjukkan pengesahan input dengan ZOD dan Borang Hook React, penciptaan template e -mel dengan E -mel React, dan penghantaran e -mel melalui Resend.

Menyediakan aplikasi seterusnya.js anda:

Mulailah dengan mengkloning kod starter dari repositori GitHub yang disediakan. Projek starter termasuk aplikasi Next.js 13 asas (menggunakan penghala aplikasi) yang memaparkan borang hubungan dengan Zod dan Borang Hook React untuk pengesahan. Fungsi

dalam komponen borang hubungan adalah di mana kami akan menambah logik penghantaran e -mel kami:

onSubmit

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

(Nota: Gaya dan bentuk bangunan ditinggalkan untuk keringkasan. Tailwind CSS atau CSS standard boleh digunakan untuk gaya.)

Mengkonfigurasi resend:

Dapatkan kekunci API anda:
1. Log masuk atau buat akaun Resend. Dari papan pemuka, menghasilkan kunci API baru.

Sediakan pembolehubah persekitaran:

Buat fail
2. di direktori root projek anda dan tambahkan kunci API anda: .env.local

<code>RESEND_API_KEY=your_api_key_here</code>

Pengesahan Domain (Pilihan):

Untuk menghantar e -mel tanpa had, sahkan domain anda dengan Resend dengan menambah rekod DNS (langkah ini adalah pilihan untuk tutorial ini).
3

mengimport komponen yang diperlukan dari

:

Tentukan antara muka untuk data e -mel: Email.tsx Buat komponen e -mel:

@react-email/components

Menghantar e -mel dengan Resend (api/send/route.ts):

1. Import Modul yang diperlukan:

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

2. Buat contoh resend:

<code>RESEND_API_KEY=your_api_key_here</code>

3. Tentukan skema zod untuk pengesahan:

<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. melaksanakan pengendali pos:

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

5. Kemas kini fungsi onSubmit dalam borang kenalan anda untuk menghantar permintaan pos ke /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>

Ini melengkapkan fungsi penghantaran e -mel. Ingatlah untuk menggantikan alamat e -mel letak dengan alamat e -mel sebenar anda dan mengendalikan kesilapan yang berpotensi dengan sewajarnya. Kod sumber lengkap boleh didapati di GitHub (pautan yang disediakan dalam teks asal).

Atas ialah kandungan terperinci Cara menghantar e -mel dengan reaksi menggunakan resend. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!