نحوه ارسال یک ایمیل خوشامدگویی گرم با Resend، Next-Auth و React-Email

در این مقاله چه خواهید یافت؟

ما اغلب با برنامه‌هایی مواجه می‌شویم که هر زمان که ثبت‌نام می‌کنیم، ایمیل خوش‌آمدگویی برای ما ارسال می‌کنند. این ایمیل‌ها معمولاً راهی برای تأیید آدرس ایمیل ما، راهنمایی ما در مورد پلتفرم و ایجاد احساس استقبال بیشتر در ما هستند. در این مقاله یاد می گیریم که چگونه با استفاده از Resend، Next-Auth.js و React-Email یک ایمیل خوش آمدگویی برنامه ریزی شده ارسال کنیم.

Papermark – اولین جایگزین منبع باز پویا برای DocSend.

قبل از شروع، اجازه دهید Papermark را به شما معرفی کنم. این یک جایگزین منبع باز برای DocSend است که به شما در مدیریت اشتراک‌گذاری امن اسناد، از جمله تجزیه و تحلیل بلادرنگ کمک می‌کند. این همه منبع باز است!

من کاملاً هیجان زده خواهم شد اگر بتوانید به ما یک ستاره بدهید! فراموش نکنید که نظرات خود را در بخش نظرات به اشتراک بگذارید ❤️
https://github.com/mfts/papermark

پروژه را راه اندازی کنید

بیایید جلو برویم و محیط پروژه خود را برای برنامه استقبال از ایمیل خود تنظیم کنیم. ما یک برنامه Next.js ایجاد می کنیم و خدمات و ابزارهای مورد نیاز را راه اندازی می کنیم.

چای را تنظیم کنید

قبل از غواصی، ایده خوبی است که یک مدیر بسته دستی داشته باشید، مانند tea. این محیط توسعه شما را اداره می کند و زندگی شما را ساده می کند!

sh <(curl https://tea.xyz)

# --- OR ---
# using brew
brew install teaxyz/pkgs/tea-cli

tea شما را آزاد می کند تا روی کد خود تمرکز کنید، زیرا به نصب آن کمک می کند node، npm، vercel و هر بسته دیگری که ممکن است نیاز داشته باشید. بهترین قسمت این است، tea همه بسته ها را در یک پوشه اختصاصی نصب می کند (پیش فرض: ~/.tea)، فایل های سیستم خود را مرتب و مرتب نگه دارید.

راه اندازی Next.js با TypeScript و Tailwindcss

استفاده خواهیم کرد create-next-app برای تولید یک پروژه Next.js جدید. ما همچنین از TypeScript و Tailwind CSS استفاده خواهیم کرد، بنابراین مطمئن شوید که وقتی از شما خواسته شد آن گزینه ها را انتخاب کنید.

npx create-next-app

# ---
# you'll be asked the following prompts
What is your project named?  my-app
Would you like to add TypeScript with this project?  Y/N
# select `Y` for typescript
Would you like to use ESLint with this project?  Y/N
# select `Y` for ESLint
Would you like to use Tailwind CSS with this project? Y/N
# select `Y` for Tailwind CSS
Would you like to use the `src/ directory` with this project? Y/N
# select `N` for `src/` directory
What import alias would you like configured? `@/*`
# enter `@/*` for import alias

راه اندازی Next-Auth

Next-Auth یک کتابخانه احراز هویت برای Next.js است. من هم دارم نصب میکنم prisma-adapter برای Next-Auth، که به ما امکان می دهد از Prisma به عنوان ORM پایگاه داده خود استفاده کنیم.

npm install next-auth @next-auth/prisma-adapter

راه اندازی مجدد ارسال

ارسال مجدد سرویسی است که به شما امکان می دهد ایمیل های تراکنشی را از طریق API ارسال کنید که برای نیازهای ما مناسب است.

npm install resend

برای ارسال مجدد ثبت نام کنید و کلید API خود را از https://resend.com دریافت کنید. این کلید API را به خود اضافه کنید .env فایل.

# .env
RESEND_API_KEY="YOUR_API_KEY"

راه اندازی React-Email

React.email مجموعه ای از کامپوننت های با کیفیت بالا و بدون سبک برای ایجاد ایمیل های زیبا با استفاده از React و TypeScript است. این از همان سازندگان Resend است.

npm install react-email @react-email/components

من فقط بسته کامپوننت ها را نصب می کنم، اما شما می توانید بسته کامل را که شامل کامپوننت ها و یک تم پیش فرض است نیز نصب کنید.

ساخت اپلیکیشن

اکنون که راه‌اندازی خود را آماده کرده‌ایم، آماده شروع ساخت برنامه خود هستیم. ویژگی های اصلی که ما پوشش خواهیم داد عبارتند از:

• ثبت نام کاربر
• ارسال ایمیل خوش آمدید
• قالب ایمیل

شماره 1 ثبت نام کاربر

این یک تابع باطن اصلاح شده است که مستقیماً از اسناد اعتبار بعدی استفاده می کند prisma به عنوان پایگاه داده و گوگل به عنوان ارائه دهنده اعتبار.

ما ایمیل خوش آمدگویی را در تابع ارسال می کنیم sendWelcomeEmail زیر

// pages/api/auth/[...nextauth].ts
import NextAuth, { type NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import prisma from "@/lib/prisma";
import { sendWelcomeEmail } from "@/lib/emails/send-welcome";

export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    }),
  ],
  adapter: PrismaAdapter(prisma),
  session: { strategy: "jwt" },
  callbacks: {
    jwt: async ({ token, user }) => {
      if (!token.email) {
        return {};
      }
      if (user) {
        token.user = user;
      }
      return token;
    },
  },
  events: {
    async createUser(message) {
      const params = {
        user: {
          name: message.user.name,
          email: message.user.email,
        },
      };
      await sendWelcomeEmail(params); // <-- send welcome email
    }
  },
};

export default NextAuth(authOptions);

شماره 2 ارسال ایمیل خوش آمدید

این دومین تابع backend ما است که فراخوانی می شود sendWelcomeEmail و استفاده می کند resend برای ارسال ایمیل ها

// lib/emails/send-welcome.ts
import { Resend } from "resend";
import { WelcomeEmail } from "@/components/emails/welcome";

const resend = new Resend(process.env.RESEND_API_KEY!);

export async function sendWelcomeEmail({name, email}: {name: string | null | undefined, email: string | null | undefined}) {
  const emailTemplate = WelcomeEmail({ name });
  try {
    // Send the email using the Resend API
    await resend.emails.send({
      from: "Marc from Papermark <marc@papermark.io>",
      to: email as string,
      subject: "Welcome to Papermark!",
      react: emailTemplate,
    });
  } catch (error) {
    // Log any errors and re-throw the error
    console.log({ error });
    throw error;
  }
}

شماره 3 قالب ایمیل

محتوای واقعی ایمیل در اینجا تعریف می شود. ما ظاهر و احساس ایمیل را با آن سفارشی می کنیم react-email اجزاء.

می‌توانید نمونه‌های ایمیل بیشتری را در اینجا بیابید: https://demo.react.email/preview/vercel-invite-user

// components/emails/welcome.tsx
import React from "react";
import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Text,
  Tailwind,
} from "@react-email/components";


interface WelcomeEmailProps {
  name: string | null | undefined;
}

export const WelcomeEmail = ({ name }: WelcomeEmailProps) => {
  const previewText = `Welcome to Papermark, ${name}!`;

  return (
    <Html>
      <Head />
      <Preview>{previewText}</Preview>
      <Tailwind>
        <Body className="bg-white my-auto mx-auto font-sans">
          <Container className="my-10 mx-auto p-5 w-[465px]">
            <Heading className="text-2xl font-normal text-center p-0 my-8 mx-0">
              Welcome to Papermark!
            </Heading>
            <Text className="text-sm">Hello {name},</Text>
            <Text className="text-sm">
              We're excited to have you onboard at <span>Papermark</span>. We
              hope you enjoy your journey with us. If you have any questions or
              need assistance, feel free to reach out.
            </Text>
            <Section className="text-center mt-[32px] mb-[32px]">
              <Button
                pX={20}
                pY={12}
                className="bg-[#00A3FF] rounded text-white text-xs font-semibold no-underline text-center"
                href={`${process.env.NEXT_PUBLIC_BASE_URL}/welcome`}
              >
                Get Started
              </Button>
            </Section>
            <Text className="text-sm">
              Cheers,
              <br />
              The Papermark Team
            </Text>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
};

پاداش: پیش نمایش ایمیل ها

React-Email دارای یک عملکرد رندر داخلی است که به شما امکان می دهد پیش نمایش الگوهای ایمیل خود را در مرورگر مشاهده کنید. این برای آزمایش و اشکال زدایی طرح بسیار مفید است.

• اضافه کردن email کلید به scripts بخش شما package.json فایل.

// package.json
{
  ...
  "scripts": {
    ...
    "email": "email dev --dir ./components/emails --port 3001"
  },
  ...
}

• دستور زیر را برای راه اندازی سرور پیش نمایش ایمیل اجرا کنید.

npm run email

• مرورگر خود را باز کرده و به آن بروید http://localhost:3001 برای مشاهده پیش نمایش قالب ایمیل خود.

نتیجه

و شما آن را دارید! ما سیستمی برای ارسال ایمیل های خوش آمدگویی با استفاده از Resend، Next-Auth و React-Email ساخته ایم. در حالی که مثال در اینجا ساده است، می توان همان مفاهیم را برای رسیدگی به هر نوع ایمیلی که ممکن است برنامه شما نیاز به ارسال داشته باشد، گسترش داد.

ممنون که خواندید. من مارک هستم، یک مدافع منبع باز. من در حال ساخت papermark.io هستم – جایگزین منبع باز برای DocSend.

برای من، کدنویسی یک سفر مداوم یادگیری و کشف است. پس دوستان من به کدنویسی ادامه دهید!

کمک کنید خارج شوم!

اگر این مقاله را مفید یافتید و کمی بهتر متوجه ارسال مجدد، تأیید بعدی و واکنش ایمیل شدید، بسیار خوشحال خواهم شد اگر بتوانید به ما ستاره بدهید! و فراموش نکنید که نظرات خود را در نظرات به اشتراک بگذارید ❤️

https://github.com/mfts/papermark