بناء نماذج اتصال جاهزة للإنتاج باستخدام Cloudflare Turnstile وResend

أولاً، احصل على مفتاح موقع Turnstile من Cloudflare.

أضفه إلى .env.local:

NEXT_PUBLIC_TURNSTILE_SITE_KEY=your-site-key
TURNSTILE_SECRET_KEY=your-secret-key

ثم أضف الأداة إلى النموذج:

"use client";

export default function ContactForm() {
  return (
    <form method="POST" action="/api/contact">
      <input name="name" required />
      <input name="email" type="email" required />
      <textarea name="details" required />

      {/* تحدي Turnstile */}
      <div
        className="cf-turnstile"
        data-sitekey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY}
      />

      <button type="submit">إرسال</button>

      <script
        src="https://challenges.cloudflare.com/turnstile/v0/api.js"
        async
        defer
      />
    </form>
  );
}

في مسار API الخاص بك، تحقق من الرمز قبل إرسال أي بريد إلكتروني. تحقق دائماً على جانب الخادم—يمكن تزوير رموز العميل.

export async function POST(request: Request) {
  const formData = await request.formData();
  const turnstileToken = formData.get("cf-turnstile-response");

  if (!turnstileToken) {
    return NextResponse.json(
      { ok: false, message: "فشل التحقق من السبام." },
      { status: 400 },
    );
  }

  // التحقق مع Cloudflare
  const verifyResponse = await fetch(
    "https://challenges.cloudflare.com/turnstile/v0/siteverify",
    {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        secret: process.env.TURNSTILE_SECRET_KEY,
        response: turnstileToken,
      }),
    },
  );

  const verifyData = await verifyResponse.json();

   (!verifyData.) {
     .(
      { : , :  },
      { :  },
    );
  }
}

احصل على مفتاح API الخاص بك من Resend وأرسل البريد باستخدام واجهتهم البسيطة:

const emailPayload = {
  from: process.env.RESEND_FROM,
  to: [process.env.RESEND_TO],
  subject: `استفسار جديد من ${formData.get("name")}`,
  reply_to: formData.get("email"),
  text: `الاسم: ${formData.get("name")}\nالبريد: ${formData.get("email")}\n\n${formData.get("details")}`,
};

const emailResponse = await fetch("https://api.resend.com/emails", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.RESEND_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify(emailPayload),
});

إرسال بريد إلكتروني سهل. وصوله إلى صندوق الوارد هو الصعب. تحتاج إلى ثلاثة سجلات DNS:

بدون هذه السجلات، سيصنف Gmail/Outlook رسائلك كسبام أو يرفضها تماماً. تعلمت هذا بالطريقة الصعبة—نموذج الاتصال الخاص بنا لم يعمل لأسابيع حتى أضفنا DMARC.

التحسين التدريجي

يجب أن يعمل النموذج حتى لو فشل تحميل JavaScript. استخدم المنصة من خلال اكتشاف نوع المحتوى في مسار API الخاص بك:

const contentType = request.headers.get("content-type") ?? "";
const isFormSubmit = contentType.includes("application/x-www-form-urlencoded");

if (isFormSubmit) {
  return NextResponse.redirect(
    new URL("/contact?success=1&lang=ar", request.url),
    303,
  );
}

تعامل محدد مع الأخطاء

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