Blog

كيفية استخدام Resend API: دليل المبتدئين

Mark Ponomarev

Mark Ponomarev

18 يوليو 2025

كيفية استخدام Resend API: دليل المبتدئين

يُعد البريد الإلكتروني مكونًا حاسمًا في تطبيقات الويب الحديثة، حيث يُستخدم في كل شيء بدءًا من تسجيل المستخدمين والإشعارات وصولاً إلى إعادة تعيين كلمات المرور والحملات التسويقية. ومع ذلك، يمكن أن يكون بناء وإدارة بنية تحتية موثوقة لإرسال البريد الإلكتروني أمرًا معقدًا ويستغرق وقتًا طويلاً. هنا يأتي دور خدمات واجهة برمجة تطبيقات البريد الإلكتروني (Email API) مثل Resend.

تقدم Resend منصة سهلة الاستخدام للمطورين مصممة لتبسيط عملية إرسال رسائل البريد الإلكتروني الخاصة بالمعاملات والتسويق. توفر واجهات برمجة تطبيقات قوية، وتحليلات مفصلة، وقابلية توصيل ممتازة، مما يسمح للمطورين بالتركيز على بناء تطبيقاتهم بدلاً من القلق بشأن البنية التحتية للبريد الإلكتروني.

سيأخذك هذا الدليل الشامل في كل ما تحتاج لمعرفته للبدء باستخدام Resend API، بدءًا من فهم مفاهيمه الأساسية وتسعيره وصولاً إلى دمجه مع مختلف الأطر والمنصات الشائعة.

💡
هل تريد أداة رائعة لاختبار واجهات برمجة التطبيقات (API Testing) تولد توثيق API جميل؟

هل تريد منصة متكاملة وشاملة لفريق المطورين لديك للعمل معًا بأقصى إنتاجية؟

Apidog يلبي جميع متطلباتك، ويحل محل Postman بسعر معقول أكثر بكثير!
button

ما هو Resend؟

نظرة عامة على لوحة تحكم Resend

Resend هي منصة واجهة برمجة تطبيقات للبريد الإلكتروني (Email API) مصممة للمطورين. تهدف إلى توفير تجربة مطور متفوقة مقارنة بمقدمي خدمات البريد الإلكتروني (ESPs) الأقدم. تشمل الميزات الرئيسية:

تضع Resend نفسها كبديل أكثر حداثة وتركيزًا على المطورين للاعبين الراسخين مثل SendGrid، Mailgun، أو AWS SES، مع التركيز على سهولة الاستخدام، والموثوقية، والتكامل الجيد مع سير عمل تطوير الويب الحديث.

ما هو تسعير Resend؟

نظرة عامة على صفحة تسعير Resend

تقدم Resend هيكل تسعير متدرج يعتمد على عدد رسائل البريد الإلكتروني المرسلة شهريًا، مع اعتبارات منفصلة لرسائل البريد الإلكتروني الخاصة بالمعاملات والتسويق (على الرغم من أن صفحة التسعير تفصل بشكل أساسي خطط المعاملات).

فيما يلي تفصيل لخطط البريد الإلكتروني الخاصة بالمعاملات (اعتبارًا من وقت كتابة هذا الدليل):

الخطة المجانية (Free Plan):

الخطة الاحترافية (Pro Plan):

خطة التوسع (Scale Plan):

خطة المؤسسات (Enterprise Plan):

اعتبارات رئيسية:

الخطة المجانية سخية بما يكفي للمشاريع الصغيرة أو أغراض الاختبار. تلبي خطتا Pro و Scale احتياجات التطبيقات المتنامية ذات أحجام البريد الإلكتروني المتزايدة ومتطلبات الميزات. توفر خطة Enterprise حلولاً مخصصة للعمليات واسعة النطاق.

البدء باستخدام Resend

قبل أن تتمكن من إرسال رسائل البريد الإلكتروني، تحتاج إلى إعداد حساب Resend الخاص بك وتكوين نطاق الإرسال الخاص بك.

1. التسجيل وإنشاء مفتاح API

2. التحقق من نطاقك

لإرسال رسائل بريد إلكتروني تبدو احترافية وتجنب فلاتر البريد العشوائي، يجب عليك التحقق من نطاق تمتلكه. الإرسال من نطاقات غير محققة أو عناوين افتراضية مثل onboarding@resend.dev مناسب فقط للاختبار الأولي.

3. إرسال رسائل البريد الإلكتروني الاختبارية

أثناء التطوير، من الضروري اختبار إرسال البريد الإلكتروني دون التأثير على سمعة نطاقك أو الإرسال إلى مستخدمين حقيقيين عن طريق الخطأ. توفر Resend عناوين بريد إلكتروني خاصة لاختبار سيناريوهات مختلفة:

يسمح لك استخدام عناوين الاختبار هذه بالتحقق من تكاملك واختبار معالجات Webhook لأحداث الارتداد والشكوى بأمان.

دمج Resend مع الأطر

توفر Resend حزم SDK رسمية وطرق تكامل مباشرة لمختلف اللغات والأطر. سنغطي بعض الأمثلة الشائعة بناءً على التوثيق المقدم. المفهوم الأساسي عادة ما يتضمن:

  1. تثبيت Resend SDK (إذا كان متاحًا) أو استخدام طلبات HTTP القياسية.
  2. تهيئة عميل Resend باستخدام مفتاح API الخاص بك (يتم تحميله بأمان، عادة من متغيرات البيئة).
  3. استدعاء طريقة emails.send (أو ما يعادلها) مع معلمات مثل from، to، subject، و html أو react.

الإرسال باستخدام Next.js

Next.js هو إطار عمل React شائع. يتكامل Resend بشكل جيد، خاصة مع React Email.

1. التثبيت:

npm install resend
# or
yarn add resend
# or
pnpm add resend

2. إنشاء قالب بريد إلكتروني (اختياري ولكنه موصى به):استخدم React Email أو أنشئ مكون React بسيطًا لهيكل رسالة البريد الإلكتروني الخاصة بك.

// components/email-template.tsx
import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
  firstName,
}) => (
  <div>
    <h1>Welcome, {firstName}!</h1>
  </div>
);

3. إنشاء مسار API:أنشئ معالج مسار API لإرسال البريد الإلكتروني.

// app/api/send/route.ts (مثال على App Router)
import { EmailTemplate } from '../../../components/email-template'; // عدّل المسار إذا لزم الأمر
import { Resend } from 'resend';

// تأكد من تعيين RESEND_API_KEY في ملف .env.local الخاص بك
const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST() {
  try {
    const { data, error } = await resend.emails.send({
      from: 'Your Name <you@yourverifieddomain.com>', // استخدم نطاقك الذي تم التحقق منه
      to: ['delivered@resend.dev'], // استبدل بالمستلم أو عنوان الاختبار
      subject: 'Hello from Resend and Next.js!',
      react: EmailTemplate({ firstName: 'Test' }), // مرّر الخصائص إلى قالبك
      // بدلاً من ذلك، استخدم `html`:
      // html: '<strong>It works!</strong>'
    });

    if (error) {
      return Response.json({ error }, { status: 400 });
    }

    return Response.json(data);
  } catch (error) {
    return Response.json({ error }, { status: 500 });
  }
}

// pages/api/send.ts (مثال على Pages Router - عدّل الاستيرادات/الاستجابة)
// import type { NextApiRequest, NextApiResponse } from 'next';
// import { EmailTemplate } from '../../components/EmailTemplate';
// import { Resend } from 'resend';
//
// const resend = new Resend(process.env.RESEND_API_KEY);
//
// export default async (req: NextApiRequest, res: NextApiResponse) => {
//   try { // أُضيفت try...catch لتحسين معالجة الأخطاء
//     const { data, error } = await resend.emails.send({
//       from: 'Your Name <you@yourverifieddomain.com>',
//       to: ['delivered@resend.dev'],
//       subject: 'Hello world',
//       react: EmailTemplate({ firstName: 'John' }),
//     });
//
//     if (error) {
//       return res.status(400).json(error);
//     }
//
//     res.status(200).json(data);
//   } catch (e) {
//      res.status(500).json({ error: 'Internal Server Error' });
//   }
// };

4. التشغيل:استدعِ نقطة نهاية API هذه من الواجهة الأمامية لتطبيقك (على سبيل المثال، بعد إرسال نموذج) باستخدام fetch أو مكتبة مثل axios. تذكر استبدال القيم النائبة بنطاقك الفعلي الذي تم التحقق منه وقوائم المستلمين.

الإرسال باستخدام Astro

Astro هو منشئ مواقع ثابتة حديث يدعم أيضًا العرض من جانب الخادم (SSR).

1. تثبيت Resend:

npm install resend
# or
yarn add resend
# or
pnpm add resend

2. تثبيت محول SSR:يحتاج Astro إلى محول SSR لتشغيل كود من جانب الخادم عند الطلب. قم بتثبيت واحد مناسب لهدف النشر الخاص بك (على سبيل المثال، @astrojs/node، @astrojs/vercel، @astrojs/cloudflare).

npx astro add node # مثال لمحور Node.js

اتبع تعليمات إعداد المحول في ملف astro.config.mjs.

3. إضافة مفتاح API:قم بتخزين RESEND_API_KEY الخاص بك في ملف .env.

4. إنشاء إجراء Astro:استخدم إجراءات Astro (ميزة تجريبية اعتبارًا من وقت كتابة هذا الدليل، تحقق من وثائق Astro للحالة الحالية) أو نقاط نهاية API القياسية.

// src/actions/index.ts (باستخدام إجراءات Astro)
import { ActionError, defineAction, z } from 'astro:actions';
import { Resend } from 'resend';

// تأكد من أن RESEND_API_KEY متاح عبر import.meta.env
const resend = new Resend(import.meta.env.RESEND_API_KEY);

export const server = {
  send: defineAction({
    // مثال: تعريف التحقق من الإدخال إذا لزم الأمر
    // input: z.object({ email: z.string().email() }),
    handler: async (/* { email } - إذا كنت تستخدم الإدخال */) => {
      try { // أُضيفت try...catch
        const { data, error } = await resend.emails.send({
          from: 'Your Name <you@yourverifieddomain.com>',
          to: ['delivered@resend.dev'], // استبدل بالمستلم
          subject: 'Hello from Resend and Astro!',
          html: '<strong>Astro works!</strong>',
          // يمكنك أيضًا استخدام قوالب React إذا قمت بإعداد React في Astro
          // react: <YourAstroCompatibleReactEmail firstName="Astro" />
        });

        if (error) {
          console.error("Resend Error:", error); // تسجيل الخطأ
          // رمي ActionError يساعد Astro على معالجة الأخطاء بشكل سلس
          throw new ActionError({
            code: 'BAD_REQUEST', // أو كن أكثر تحديدًا بناءً على الخطأ
            message: error.message || 'Failed to send email',
          });
        }

        return data; // إرجاع بيانات النجاح
      } catch (e) {
         console.error("Handler Error:", e);
         // إعادة رمي أو رمي ActionError جديد
         throw new ActionError({
             code: 'INTERNAL_SERVER_ERROR',
             message: 'An unexpected error occurred.',
         });
      }
    },
  }),
};

// بديل: نقطة نهاية API (على سبيل المثال، src/pages/api/send.ts)
// import type { APIRoute } from 'astro';
// import { Resend } from 'resend';
//
// const resend = new Resend(import.meta.env.RESEND_API_KEY);
//
// export const POST: APIRoute = async ({ request }) => {
//   // const body = await request.json(); // إذا كانت البيانات تأتي من جسم الطلب
//   try {
//     const { data, error } = await resend.emails.send({ /* ... معلمات البريد الإلكتروني ... */ });
//     if (error) {
//       return new Response(JSON.stringify(error), { status: 400 });
//     }
//     return new Response(JSON.stringify(data), { status: 200 });
//   } catch (e) {
//     return new Response(JSON.stringify({ message: "Server Error"}), { status: 500 });
//   }
// }

5. التشغيل:استدعِ الإجراء أو نقطة النهاية من مكونات أو صفحات Astro الخاصة بك، عادة ضمن معالج إرسال نموذج.

الإرسال باستخدام Bun

Bun هو وقت تشغيل JavaScript سريع مع مجمع مدمج (bundler)، ومحول (transpiler)، ومشغل مهام (task runner)، وعميل npm.

1. التثبيت:

bun install resend

2. إنشاء قالب بريد إلكتروني (اختياري):على غرار Next.js، يمكنك إنشاء ملف .tsx لقالب بريد React الإلكتروني الخاص بك.

// email-template.tsx
import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
  firstName,
}) => (
  <div>
    <h1>Welcome, {firstName}!</h1>
  </div>
);

3. إنشاء سكريبت خادم Bun:أنشئ سكريبت (على سبيل المثال، index.tsx) لتشغيل خادم HTTP بسيط باستخدام Bun.

// index.tsx
import { Resend } from 'resend';
import { EmailTemplate } from './email-template'; // بافتراض أنه في نفس الدليل

// تحميل مفتاح API من متغيرات البيئة
const resendApiKey = process.env.RESEND_API_KEY;
if (!resendApiKey) {
  console.error("Error: RESEND_API_KEY environment variable not set.");
  process.exit(1); // خروج إذا كان المفتاح مفقودًا
}
const resend = new Resend(resendApiKey);

const server = Bun.serve({
  port: 3000,
  async fetch(req) { // أُضيفت وسيطة 'req'
    // اختياري: تحقق من طريقة الطلب، المسار، إلخ.
    // if (new URL(req.url).pathname !== '/send') {
    //   return new Response("Not Found", { status: 404 });
    // }
    // if (req.method !== 'POST') {
    //    return new Response("Method Not Allowed", { status: 405 });
    // }

    try {
      const { data, error } = await resend.emails.send({
        from: 'Your Name <you@yourverifieddomain.com>',
        to: ['delivered@resend.dev'],
        subject: 'Hello from Resend and Bun!',
        react: EmailTemplate({ firstName: 'Bun User' }),
        // أو استخدم html: '<strong>Bun works!</strong>'
      });

      if (error) {
        console.error("Resend Error:", error);
        // إرجاع استجابة خطأ JSON مناسبة
        return new Response(JSON.stringify({ error: error.message || 'Failed to send email' }), {
          status: 500, // أو 400 حسب نوع الخطأ
          headers: { 'Content-Type': 'application/json' },
        });
      }

      // إرجاع استجابة النجاح
      return new Response(JSON.stringify(data), {
        status: 200,
        headers: { 'Content-Type': 'application/json' },
      });

    } catch (e) {
        console.error("Server Error:", e);
        return new Response(JSON.stringify({ error: 'Internal Server Error' }), {
          status: 500,
          headers: { 'Content-Type': 'application/json' },
        });
    }
  },
  error(error) { // أُضيف معالج أخطاء أساسي للخادم نفسه
      return new Response(`<pre>${error}\\\\n${error.stack}</pre>`, {
          headers: { "Content-Type": "text/html" },
      });
  },
});

console.log(`Listening on <http://localhost>:${server.port} ...`);

4. التشغيل:ابدأ تشغيل الخادم باستخدام RESEND_API_KEY=your_api_key bun run index.tsx. الوصول إلى http://localhost:3000 (أو تشغيل المسار/الطريقة المحددة التي قمت بتعريفها) سيؤدي إلى إرسال البريد الإلكتروني.

الإرسال باستخدام Nuxt

Nuxt هو إطار عمل Vue.js شائع.

1. التثبيت:

npm install resend
# or
yarn add resend
# or
pnpm add resend

2. إنشاء مسار خادم:يستخدم Nuxt دليل server/ لمنطق الواجهة الخلفية. أنشئ ملفًا مثل server/api/send.post.ts (يشير .post إلى أنه يتعامل مع طلبات POST).

// server/api/send.post.ts
import { Resend } from 'resend';

// الوصول إلى مفتاح API بأمان (على سبيل المثال، عبر runtimeConfig في nuxt.config.ts)
// انظر: <https://nuxt.com/docs/guide/going-further/runtime-config>
const config = useRuntimeConfig();
const resend = new Resend(config.resendApiKey); // بافتراض أن المفتاح تم تعيينه في runtime config

export default defineEventHandler(async (event) => {
  // اختياري: قراءة الجسم إذا كانت البيانات تأتي من الطلب
  // const body = await readBody(event);

  try {
    const data = await resend.emails.send({
      from: 'Your Name <you@yourverifieddomain.com>',
      to: ['delivered@resend.dev'],
      subject: 'Hello from Resend and Nuxt!',
      html: '<strong>Nuxt works!</strong>',
      // يمكنك دمج قوالب بريد Vue الإلكترونية (على سبيل المثال، باستخدام vue-email)
      // انظر: <https://github.com/Dave136/vue-email>
    });

    // Nuxt 3 يعالج تلقائيًا إرجاع البيانات كـ JSON
    return data;

  } catch (error: any) { // التقاط أنواع أخطاء محددة إذا أمكن
    console.error("Resend Error:", error);
    // رمي خطأ يمكن لـ Nuxt معالجته، مع تعيين رمز الحالة
    throw createError({
        statusCode: 400, // أو 500
        statusMessage: 'Failed to send email',
        data: error // اختياريًا تضمين تفاصيل الخطأ
    });
  }
});

// في ملف nuxt.config.ts الخاص بك، عرّف runtimeConfig:
// export default defineNuxtConfig({
//   runtimeConfig: {
//     resendApiKey: process.env.NUXT_RESEND_API_KEY, // من جانب الخادم فقط
//     public: {
//       // مفاتيح عامة يمكن الوصول إليها من جانب العميل
//     }
//   }
// })
// وقم بتعيين NUXT_RESEND_API_KEY في ملف .env الخاص بك

3. التشغيل:استدعِ نقطة النهاية /api/send (باستخدام طريقة POST) من صفحات أو مكونات Nuxt الخاصة بك باستخدام $fetch أو useFetch.

الإرسال باستخدام Vercel Functions

Vercel Functions هي دوال بلا خادم (serverless) تتكامل بسلاسة مع Next.js أو يمكن استخدامها بشكل مستقل. يوضح المثال أعلاه لـ Next.js بالفعل الاستخدام ضمن بيئة Vercel. إذا كنت تستخدم Vercel Functions بدون Next.js (على سبيل المثال، مع منشئ مواقع ثابتة أو إطار عمل آخر تم نشره على Vercel)، فإن النهج مشابه:

1. إنشاء دالة:أنشئ ملفًا في دليل api/ لمشروعك (على سبيل المثال، api/send.ts).

// api/send.ts (مثال لدالة Vercel قياسية)
import type { VercelRequest, VercelResponse } from '@vercel/node';
import { Resend } from 'resend'; // قد تحتاج إلى تثبيت resend

// تأكد من تعيين RESEND_API_KEY كمتغير بيئة في Vercel
const resendApiKey = process.env.RESEND_API_KEY;

if (!resendApiKey) {
  console.error("RESEND_API_KEY is not set");
  // لا تتابع إذا كان المفتاح مفقودًا في بيئة الإنتاج
}

const resend = new Resend(resendApiKey);

export default async function handler(
  request: VercelRequest,
  response: VercelResponse,
) {
  // موصى به: تحقق من طريقة POST
  if (request.method !== 'POST') {
    return response.status(405).json({ message: 'Method Not Allowed' });
  }

  try {
    const { data, error } = await resend.emails.send({
      from: 'Your Name <you@yourverifieddomain.com>',
      to: ['delivered@resend.dev'],
      subject: 'Hello from Resend & Vercel Functions!',
      html: '<strong>It works on Vercel!</strong>',
      // يمكن استخدام قوالب React إذا كانت دالتك تجمع React
    });

    if (error) {
      console.error('Resend Error:', error);
      return response.status(400).json(error);
    }

    return response.status(200).json(data);

  } catch (e) {
    console.error('Handler Error:', e);
    return response.status(500).json({ message: 'Internal Server Error' });
  }
}

2. تكوين متغير البيئة:أضف RESEND_API_KEY الخاص بك كمتغير بيئة في إعدادات مشروع Vercel الخاص بك.

3. النشر:انشر مشروعك باستخدام Vercel CLI (vercel) أو تكامل Git.

4. التشغيل:قم بإجراء طلب POST إلى عنوان URL الخاص بالدالة المنشورة (على سبيل المثال، https://your-project.vercel.app/api/send).

الإرسال باستخدام Supabase Edge Functions

Supabase Edge Functions تعمل على Deno Deploy، بالقرب من المستخدمين لديك. تستخدم Deno و Web APIs القياسية مثل fetch. لا تمتلك Resend حزمة SDK رسمية لـ Deno حتى الآن، لذا ستستخدم fetch مباشرة.

1. إنشاء دالة Supabase:استخدم Supabase CLI:

supabase functions new resend-email-sender # اختر اسمًا
cd supabase/functions/resend-email-sender

2. تعديل المعالج:عدّل ملف index.ts الذي تم إنشاؤه.

// supabase/functions/resend-email-sender/index.ts
import { serve } from "<https://deno.land/std@0.177.0/http/server.ts>"; // استخدم إصدار std المناسب

// الوصول إلى مفتاح API بأمان عبر متغيرات بيئة Supabase Edge Function
const RESEND_API_KEY = Deno.env.get('RESEND_API_KEY');

// معالج طلب أساسي
const handler = async (_request: Request): Promise<Response> => {
  if (!RESEND_API_KEY) {
      console.error("RESEND_API_KEY environment variable not set.");
      return new Response(JSON.stringify({ error: "Server configuration error" }), {
          status: 500, headers: { 'Content-Type': 'application/json' }
      });
  }

  // اختياري: تحقق من طريقة _request، الرؤوس، أو الجسم إذا لزم الأمر

  try {
    const res = await fetch('<https://api.resend.com/emails>', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${RESEND_API_KEY}` // استخدم المفتاح هنا
        },
        body: JSON.stringify({
            from: 'Your Name <you@yourverifieddomain.com>',
            to: ['delivered@resend.dev'], // استبدل المستلم
            subject: 'Hello from Resend & Supabase Edge!',
            html: '<strong>It works! Edge Functions are cool.</strong>',
            // ملاحظة: إرسال مكونات React مباشرة غير ممكن هنا
            // بدون خطوة بناء في دالة الحافة لعرضها إلى HTML.
            // أرسل HTML معروضًا مسبقًا أو نصًا عاديًا.
        })
    });

    // معالجة الاستجابات المحتملة غير OK من Resend API
    if (!res.ok) {
        const errorData = await res.json().catch(() => ({ message: 'Failed to parse Resend error response' }));
        console.error("Resend API Error:", res.status, errorData);
        return new Response(JSON.stringify({ error: 'Failed to send email via Resend', details: errorData }), {
            status: res.status, // إعادة توجيه رمز حالة Resend
            headers: { 'Content-Type': 'application/json' },
        });
    }

    // تحليل الاستجابة الناجحة
    const data = await res.json();

    // إرجاع استجابة النجاح
    return new Response(JSON.stringify(data), {
        status: 200,
        headers: { 'Content-Type': 'application/json' },
    });

  } catch (error) {
      console.error("Edge Function Error:", error);
      return new Response(JSON.stringify({ error: 'Internal Server Error in Edge Function' }), {
          status: 500,
          headers: { 'Content-Type': 'application/json' },
      });
  }
};

// بدء تشغيل الخادم
serve(handler);
console.log("Supabase Edge Function 'resend-email-sender' is running...");

3. تعيين متغير البيئة:عيّن RESEND_API_KEY محليًا باستخدام supabase secrets set RESEND_API_KEY your_actual_key وقم بتعيينه أيضًا في إعدادات دالة مشروع Supabase الخاص بك للنشر.

4. النشر والاستدعاء:

# اختبار محليًا (اختياري)
supabase functions serve resend-email-sender --no-verify-jwt

# النشر
supabase functions deploy resend-email-sender --no-verify-jwt

استدعِ الدالة باستخدام عنوان URL الخاص بها، عادة عبر استدعاء مكتبة عميل Supabase من الواجهة الأمامية لتطبيقك أو خدمة خلفية أخرى.

الإرسال باستخدام Cloudflare Workers

Cloudflare Workers هي دوال بلا خادم تعمل على شبكة حافة Cloudflare. يمكن لحزمة Resend Node.js SDK غالبًا العمل في بيئات Workers مع التجميع المناسب.

1. إعداد مشروع Worker:ابدأ مشروع Worker، غالبًا باستخدام npm create cloudflare. تأكد من إعداده للوحدات النمطية والتجميع (على سبيل المثال، باستخدام Wrangler مع Webpack أو esbuild).

2. تثبيت Resend:

npm install resend
# or yarn/pnpm

3. إنشاء قالب بريد إلكتروني (اختياري):إذا كنت تستخدم React، أنشئ ملف القالب الخاص بك (.tsx).

4. تعديل سكريبت Worker:عدّل ملف Worker الرئيسي الخاص بك (على سبيل المثال، src/index.ts أو src/index.tsx إذا كنت تستخدم React).

// src/index.tsx (مثال باستخدام React)
import { Resend } from 'resend';
// بافتراض أن لديك مكون قالب React
import { EmailTemplate } from './emails/email-template'; // عدّل المسار

// تعريف متغيرات البيئة المتوقعة لسلامة النوع
export interface Env {
  RESEND_API_KEY: string;
}

export default {
  async fetch(
    request: Request,
    env: Env, // الوصول إلى متغيرات البيئة عبر 'env'
    ctx: ExecutionContext
  ): Promise<Response> {

    // إنشاء مثيل Resend باستخدام مفتاح API من متغيرات البيئة
    const resend = new Resend(env.RESEND_API_KEY);

    // اختياري: تحقق من طريقة الطلب، مسار URL، إلخ.
    // مثال: السماح فقط بطلبات POST إلى مسار محدد
    // const url = new URL(request.url);
    // if (url.pathname !== '/send-email' || request.method !== 'POST') {
    //   return new Response('Not Found or Method Not Allowed', { status: 404 });
    // }

    try {
      const { data, error } = await resend.emails.send({
        from: 'Your Name <you@yourverifieddomain.com>',
        to: ['delivered@resend.dev'], // استبدل المستلم
        subject: 'Hello from Resend & Cloudflare Workers!',
        // استخدم مكون React إذا كان قابلاً للتطبيق
        react: <EmailTemplate firstName="Worker User" />,
        // أو استخدم HTML
        // html: '<strong>It works from the Edge!</strong>',
      });

      if (error) {
        console.error("Resend Error:", JSON.stringify(error));
        return Response.json({ error: 'Failed to send email via Resend' }, { status: 400 });
      }

      return Response.json(data);

    } catch (e) {
      console.error("Worker Error:", e);
      // تسجيل مكدس الخطأ إذا أمكن
      if (e instanceof Error) {
         console.error(e.stack);
      }
      return Response.json({ error: 'Internal Server Error in Worker' }, { status: 500 });
    }
  },
} // satisfies ExportedHandler<Env>; // اختياري: استخدم satisfies لتحسين التحقق من النوع

5. تكوين متغير البيئة:عيّن RESEND_API_KEY كسر لمشروع Worker الخاص بك باستخدام Wrangler:

npx wrangler secret put RESEND_API_KEY
# الصق مفتاحك عند المطالبة

6. النشر:

npx wrangler deploy # أو 'wrangler dev' للاختبار المحلي

استدعِ Worker باستخدام عنوان URL المخصص له.

الإرسال باستخدام AWS Lambda

انتهى وقت استخلاص البيانات لصفحة توثيق AWS Lambda، لذا يعتمد هذا القسم على المبادئ العامة.

يتبع إرسال رسائل البريد الإلكتروني من AWS Lambda باستخدام Resend نمطًا مشابهًا:

1. إعداد دالة Lambda:أنشئ دالة Lambda باستخدام وقت التشغيل المفضل لديك (Node.js شائع ويعمل جيدًا مع Resend SDK). تأكد من أن دالة Lambda الخاصة بك لديها وصول إلى الإنترنت (على سبيل المثال، تم تكوينها ضمن VPC مع NAT Gateway أو باستخدام إعدادات VPC الافتراضية التي تسمح بالخروج).

2. تثبيت Resend SDK:ضمّن resend في حزمة نشر دالتك (على سبيل المثال، في package.json وقم بتشغيل npm install قبل الضغط أو استخدم Lambda Layers).

3. تخزين مفتاح API بأمان:استخدم AWS Secrets Manager أو AWS Systems Manager Parameter Store لتخزين RESEND_API_KEY الخاص بك. امنح دور تنفيذ دالة Lambda الخاصة بك الإذن بقراءة هذا السر. لا تقم بتضمين المفتاح مباشرة في كود دالة Lambda.

4. كتابة كود معالج Lambda (مثال Node.js):

// lambda_function.js (مثال Node.js)
const { Resend } = require('resend');
// عملاء AWS SDK (إذا كنت تحصل على المفتاح من Secrets Manager/Parameter Store)
const { SecretsManagerClient, GetSecretValueCommand } = require("@aws-sdk/client-secrets-manager"); // V3 SDK

let resend; // تهيئة خارج المعالج لإعادة الاستخدام المحتملة

async function getApiKey() {
    // استبدل باسم/ARN السر والمنطقة الخاصة بك
    const secretName = "your/resend/api/key/secret";
    const client = new SecretsManagerClient({ region: "your-region" });
    try {
        const command = new GetSecretValueCommand({ SecretId: secretName });
        const response = await client.send(command);
        if ('SecretString' in response) {
            // بافتراض أن السر يخزن المفتاح مباشرة أو كـ JSON مثل {"apiKey": "re_..."}
            const secret = JSON.parse(response.SecretString);
            return secret.apiKey; // عدّل التحليل بناءً على كيفية تخزينك له
        }
        throw new Error("API Key not found in secret string");
    } catch (error) {
        console.error("Error retrieving API Key from Secrets Manager:", error);
        throw error; // إعادة رمي للإشارة إلى الفشل
    }
}

exports.handler = async (event, context) => {
    // اختياري: تحليل بيانات الحدث إذا لزم الأمر (على سبيل المثال، من مشغل API Gateway)
    // const body = JSON.parse(event.body || '{}');
    // const recipient = body.to;

    try {
        if (!resend) {
            const apiKey = await getApiKey();
            if (!apiKey) {
                return { statusCode: 500, body: JSON.stringify({ message: "API Key configuration error" }) };
            }
            resend = new Resend(apiKey);
        }

        const { data, error } = await resend.emails.send({
            from: 'Your Name <you@yourverifieddomain.com>',
            to: ['delivered@resend.dev'], // استخدم المستلم من الحدث أو قيمة ثابتة
            subject: 'Hello from Resend & AWS Lambda!',
            html: '<strong>Lambda email sent successfully!</strong>',
            // يتطلب React خطوة بناء أو إعداد عرض من جانب الخادم داخل Lambda
        });

        if (error) {
            console.error('Resend Error:', error);
            return {
                statusCode: 400, // أو حالة مناسبة بناءً على الخطأ
                body: JSON.stringify(error),
            };
        }

        return {
            statusCode: 200,
            body: JSON.stringify(data),
             headers: { 'Content-Type': 'application/json' },
        };

    } catch (e) {
        console.error('Lambda Handler Error:', e);
        return {
            statusCode: 500,
            body: JSON.stringify({ message: 'Internal Server Error' }),
        };
    }
};

5. تكوين المشغل:قم بإعداد مشغل لدالة Lambda الخاصة بك (على سبيل المثال، API Gateway لطلبات HTTP، قائمة انتظار SQS، حدث EventBridge).

6. النشر:انشر دالة Lambda الخاصة بك وتبعياتها.

استخدام React Email مع Resend

ميزة رئيسية لـ Resend هي تكاملها السلس مع React Email. يسمح لك React Email ببناء قوالب بريد إلكتروني جميلة ومتجاوبة باستخدام مكونات React القياسية وبناء الجملة.

الفوائد:

الإعداد (بناءً على وثائق React Email - قد يختلف قليلاً):

التثبيت: أضف react-email ومكوناته الأساسية إلى مشروعك. ستحتاج على الأرجح إلى resend أيضًا إذا كنت ترسل من خلالها.

npm install react-email @react-email/components resend
# or yarn/pnpm

إنشاء قوالب بريد إلكتروني: أنشئ ملفات .tsx لرسائل البريد الإلكتروني الخاصة بك، عادة في دليل مخصص emails/.

// emails/welcome.tsx
import { Html, Button, Text } from '@react-email/components';
import * as React from 'react';

interface WelcomeEmailProps {
  name: string;
  signupLink: string;
}

export const WelcomeEmail: React.FC<Readonly<WelcomeEmailProps>> = ({ name, signupLink }) => (
  <Html>
    <Text>Hello {name},</Text>
    <Text>Welcome aboard! Click the button below to get started.</Text>
    <Button href={signupLink}>Complete Signup</Button>
  </Html>
);

export default WelcomeEmail; // التصدير الافتراضي غالبًا ما يكون مفيدًا

الدمج مع منطق الإرسال: في مسار API الخلفي أو دالة بلا خادم، قم باستيراد مكون البريد الإلكتروني ومرره إلى خيار react في Resend.

// مثال في مسار API لـ Next.js (app/api/send-welcome/route.ts)
import { Resend } from 'resend';
import WelcomeEmail from '../../../emails/welcome'; // عدّل المسار

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

export async function POST(request: Request) {
  try {
    const body = await request.json(); // بافتراض { email: '...', name: '...' } في الجسم
    const signupUrl = "<https://yoursite.com/signup-step2>"; // مثال URL

    const { data, error } = await resend.emails.send({
      from: 'Your App <welcome@yourverifieddomain.com>',
      to: [body.email],
      subject: 'Welcome to Our Platform!',
      // مرّر مكون React مباشرة
      react: WelcomeEmail({ name: body.name, signupLink: signupUrl }),
    });

    if (error) {
      return Response.json({ error }, { status: 400 });
    }
    return Response.json(data);
  } catch (error) {
    return Response.json({ error }, { status: 500 });
  }
}

تتولى Resend (وعملية بناء React Email إذا تم استخدامها بشكل مستقل) عرض مكون React إلى HTML آمن للبريد الإلكتروني خلف الكواليس. هذا يحسن بشكل كبير تجربة المطور لإنشاء قوالب البريد الإلكتروني وصيانتها.

الخلاصة

تقدم Resend حلاً حديثًا يركز على المطورين لإرسال رسائل البريد الإلكتروني. واجهة برمجة تطبيقاتها النظيفة، وتكاملاتها الممتازة مع الأطر (خاصة مع React Email)، والتركيز على قابلية التوصيل، والميزات المفيدة مثل رسائل البريد الإلكتروني الاختبارية و webhooks تجعلها خيارًا مقنعًا للتطبيقات بجميع أحجامها.

باتباع الخطوات الموضحة في هذا الدليل - إعداد حسابك، التحقق من نطاقك، اختيار طريقة التكامل المناسبة لإطار عملك، والاستفادة من أدوات مثل React Email - يمكنك دمج وظائف البريد الإلكتروني القوية في مشاريعك بسرعة وموثوقية. تذكر دائمًا التعامل مع مفاتيح API بأمان ومراقبة نشاط الإرسال الخاص بك من خلال لوحة تحكم Resend و webhooks لضمان قابلية توصيل مثالية وتجربة مستخدم ممتازة.

💡
هل تريد أداة رائعة لاختبار واجهات برمجة التطبيقات (API Testing) تولد توثيق API جميل؟

هل تريد منصة متكاملة وشاملة لفريق المطورين لديك للعمل معًا بأقصى إنتاجية؟

Apidog يلبي جميع متطلباتك، ويحل محل Postman بسعر معقول أكثر بكثير!
button

ممارسة تصميم API في Apidog

اكتشف طريقة أسهل لبناء واستخدام واجهات برمجة التطبيقات

التسجيل مجانًاتحميل