نحوه ایجاد فرم اشتراک ایمیل رایگان در NextJS، Netlify و MailerLite

در ماه‌های گذشته چندین بار در مورد راه‌اندازی وبلاگ خود و ایجاد محتوا برای رسانه‌های اجتماعی فکر کرده‌ام. چیزی که همیشه مرا آزار می‌داد این بود که نمی‌دانستم چگونه یک لیست ایمیل ایجاد کنم، حتی اگر می‌دانستم داشتن آن بسیار ارزشمند است! من نتیجه نهایی آنچه را که در حال حاضر در وبلاگم duncanteege.com استفاده می کنم با شما به اشتراک خواهم گذاشت

نکته مهم صرفه جویی در پول

راه های زیادی برای ایجاد لیست اشتراک ایمیل با استفاده از فرم وجود دارد. یکی از این راه‌ها استفاده از قابلیت نوشتن نقاط پایانی خود در NextJS و استفاده از آن برای برقراری ارتباط با یک سرویس ایمیل مانند MailerLite است. نکته منفی این است که به دلیل تعریف مسیر API از Node استفاده می شود. این به خودی خود قطعاً یک نقطه ضعف نیست، اما داشتن میزبانی ممکن است یک نقطه ضعف بالقوه باشد زیرا می تواند هزینه های اضافی را به همراه داشته باشد. من ابتدا این مسیر را انتخاب کردم و وب سایت خود را در DigitalOcean بر روی یک پلت فرم برنامه میزبانی کردم. آنها هزینه های تخمینی 5 دلار در ماه را فقط برای میزبانی یک وب سایت ثابت با نقطه پایانی به من دادند! فکر کردم “نه، باید جور دیگری باشد، درست است؟”… و هست!

Netlify Forms

رایگان است! Netlify با افتخار عملکرد Netlify Forms را ارائه می کند. آنها به شما اجازه می دهند تا 100 فرم ارسالی در هر سایت در هر ماه در ردیف “شروع” رایگان آنها. این بسیار سخاوتمندانه است و این یکی از چیزهایی است که من عاشق Netlify هستم. (من حمایت مالی نمی شوم، فقط از آنچه که آنها ارائه می دهند شگفت زده شده ام 🙂) اگر فرم رایگان باشد، باید سخت باشد … درست است؟

جواب منفی. به طرز مسخره ای آسان است. تنها کاری که باید انجام دهید این است که یک ویژگی ساده اضافه کنید netlify به فرم شما بله آن به آن سادگی است! اتفاقی که می افتد این است که ربات های Netlify ویژگی را با بررسی HTML سایت شما قبل از انتشار پیدا می کنند. این بدان معنی است که هیچ تماس API دیگری مورد نیاز نیست! نکته قابل توجه این است که استفاده از Netlify Forms به این معنی است که باید وب سایت خود را در Netlify میزبانی کنید.

فرم در NextJS چگونه است

بیایید با یک کد کثیف شویم.

<form
  name="subscribe"
  method="POST"
  data-netlify="true"
  onSubmit={handleSubmit}
>
  <div className={`${styles.formContainer}`}>
    <div className={`${styles.inputGroup}`}>
      <label htmlFor="name"></label>
      <input
        type="text"
        id="name"
        name="name"
        value={subscriberName}
        required
        placeholder="What is your first name?"
        className={`${styles.input}`}
        onChange={(e) => setSubscriberName(e.target.value)}
      />
    </div>
    <div className={`${styles.inputContainer}`}>
      <label htmlFor="email"></label>
      <input
        type="email"
        id="email"
        name="email"
        required
        value={subscriberEmail}
        placeholder="On what email can I reach you?"
        className={`${styles.input}`}
        onChange={(e) => setSubscriberEmail(e.target.value)}
      />
    </div>
    <SubmitButton text="Subscribe" />
  </div>
</form>

این فرمی است که من در وبلاگ خود duncanteege.com استفاده می کنم. توجه داشته باشید که چگونه فقط یک ویژگی داده ساده برای اطلاع دادن به ربات های Netlify وجود دارد که می خواهم از Netlify Forms استفاده کنم؟ علاوه بر این، فرم فقط شبیه یک فرم معمولی HTML در React است.

از بارگیری مجدد یا رفتن به صفحه جدید خودداری کنید

رفتار استاندارد استفاده از Netlify Forms این است که هنگام ارسال، شما را به صفحه دیگری هدایت می کند. من نمی خواستم این در وب سایت من باشد. من می خواستم کاربران ارسال کنند و سپس تغییر بلوک اشتراک را ببینند، اما نه یک رفرش کامل صفحه. خوشبختانه آنها یک مثال بسیار خوب در مستندات خود داشتند که در آن نحوه استفاده را توضیح می دادند fetch برای ارسال به وب سایت تا بتوانید بر اساس پاسخ درخواست تغییر دهید. این کد به شکل زیر است:

const handleSubmit = async (e: any) => {
    e.preventDefault();

    const form = e.target;
    const formData = new FormData(form);
    try {
      await fetch("/", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: new URLSearchParams(formData as any).toString(),
      });
      setFormState(FormState.SUCCESS);
    } catch (error) {
      setFormState(FormState.ERROR);
      console.error(error);
    }
  };

این فوق العاده هیجان انگیز نیست، اما این به روز رسانی صفحه را لغو می کند و من را قادر می سازد تا بر اساس پاسخ درخواست، تغییرات حالت را انجام دهم! این کد بر روی onSubmit از فرم من من وضعیت فرم را در حالت خودم مدیریت می کنم تا بتوانم بر اساس تغییرات این حالت عمل کنم.

در MailerLite چه باید کرد

بسیاری از خدمات ایمیل وجود دارد. من کمی تحقیق کردم و به نظر می رسد MailerLite بهترین گزینه برای من است. درست مانند Netlify، یک سطح رایگان بسیار سخاوتمندانه را ارائه داد. برای حداکثر 1000 مشترک رایگان است. در کنار این، می توانید تا 12000 ایمیل در ماه در ردیف رایگان ارسال کنید! این … مانند 12000 ایمیل در ماه! دودهای مقدس

قبل از اینکه به نحوه وصل کردن همه این موارد نگاه کنیم، اجازه دهید کلیدهای لازم را برای ایجاد یک درخواست موفق به سرویس ایمیل خود آماده کنیم. من به شما نشان خواهم داد که چه کاری باید در MailerLite انجام دهید، اما اگر از MailerLite استفاده نمی کنید، از پاراگراف بعدی رد شوید.

در MailerLite یک آیتم منو به نام “Integrations” وجود دارد. وقتی روی این مورد کلیک می‌کنید، صفحه‌ای با ادغام‌های احتمالی می‌بینید که می‌توانید با MailerLite استفاده کنید. یک لیست کاملاً چشمگیر است، اما ما به عملکرد “API” علاقه مند هستیم زیرا می خواهیم API را از توابع Netlify خود فراخوانی کنیم. اطلاعات بیشتر در مورد توابع Netlify بعدا. روی “use” کلیک کنید و یک توکن API ایجاد کنید. مطمئن شوید که این توکن را ذخیره کرده اید (اما آن را به مخزن خود متعهد نکنید، آن را در فایل env. خود ذخیره کنید). چیزی که باید به آن توجه داشته باشید هدری است که از شما می خواهند ارسال کنید:

Content-Type: application/json
Accept: application/json

و آدرس پایه است https://connect.mailerlite.com/

جالب است، اما چگونه از این api استفاده کنیم؟ اینجاست که Netlify Functions در کلاچ قرار می گیرد.

استفاده از توابع Netlify

بنابراین ما از Netlify Forms برای ارسال فرم های خود استفاده می کنیم. ارسال‌های ما به فرم ارسالی Netlify ختم می‌شوند. ما می‌توانیم این موارد ارسالی را به صورت دستی در MailerLite تایپ کنیم، اما ما توسعه‌دهنده هستیم درست است؟ کار دستی برای ما نیست. خوشبختانه Netlify همچنین توابع Netlify را ارائه می دهد! باز هم Netlify با ارائه 125000 فراخوان در ماه در ردیف “شروع” سخاوتمند است. یعنی… چی؟ این یک مقدار دیوانه کننده است. اما چگونه از آن با فرم ارسالی خود استفاده کنیم؟

این به نظر می رسد که ما باید به نوعی رویداد یا محرک گوش دهیم. اگر به مستندات نگاه کنیم، بیان می‌کند که چند رویداد وجود دارد که می‌توانیم به آنها گوش دهیم… از جمله submission-created. صبر کن این چیزی است که ما نیاز داریم! پس چگونه از این استفاده کنیم؟

Netlify از شما می خواهد که یک پوشه خاص برای عملکردهای بدون سرور ایجاد کنید. این پوشه در سطح ریشه پروژه شما، در همان سطح زندگی می کند src اگر شما نیز این کار را در NextJS انجام می دهید. این پوشه نامیده می شود netlify. در این پوشه یک پوشه دیگر به نام ایجاد می کنید functions. این جایی است که توابع بدون سرور شما زندگی می کنند. به منظور گوش دادن به submission-created رویداد، ما یک فایل به نام ایجاد می کنیم submission-created.ts (برای استفاده از TypeScript) در functions پوشه در این پوشه آنها انتظار دارند که یک تابع async فراخوانی شود handler. در این تابع می توانید بدنه درخواست POST را از فرم دریافت کنید و آن را همانطور که نیاز دارید مدیریت کنید. این همان چیزی است که کنترل کننده می تواند شبیه باشد.

const axios = require("axios");

const API_KEY = process.env.MAILERLITE_PRODUCTION_API_KEY;
const BASE_URL = process.env.MAILERLITE_PRODUCTION_BASE_API_URL;
const GROUP_ID = process.env.MAILERLITE_PRODUCTION_NEWSLETTER_GROUP_ID;


async function handler(event: any) {
  if (!event.body) {
    return;
  }
  const { email, name } = JSON.parse(event.body).payload;
  const url = `${BASE_URL}/subscribers`;


  const data = {
    email: email,
    fields: {
      name: name,
    },
    groups: [`${GROUP_ID}`],
  };


  const options = {
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${API_KEY}`,
    },
  };


  try {
    await axios.post(url, data, options);
    return {
      statusCode: 201,
      body: JSON.stringify({
        message: "Subscriber successfully created and added to group",
      }),
    };
  } catch (error: any) {
    console.log(error);
    return {
      statusCode: 500,
      body: JSON.stringify(error),
    };
  }
}

export { handler };

توجه: همانطور که می بینید من از متغیرهای محیطی استفاده می کنم. این متغیرهای محیطی باید به وب سایت شما در Netlify اضافه شوند تا مطمئن شوید که هندلر کار می کند. می توانید از متغیرهای محیطی در یک فایل .env استفاده کنید. آنها به این صورت تعریف می شوند:

MAILERLITE_PRODUCTION_API_KEY = “your-api-key-here”
MAILERLITE_PRODUCTION_BASE_API_URL = https://connect.mailerlite.com/api
MAILERLITE_PRODUCTION_NEWSLETTER_GROUP_ID = “your-group-id-here”

در قطعه کد بالای کنترل کننده، همچنین می توانید ببینید که من یک شی داده با تمام داده هایی که می خواهم به MailerLite ارسال کنم ایجاد می کنم. از آنجایی که من نیز مستقیماً می خواهم مشترکین جدید را به یک گروه خبرنامه خاص اضافه کنم، آن را به شی داده خود نیز اضافه می کنم. یادآوری این نکته مهم است که برای اینکه عملکرد بدون سرور کار کند، پروژه در واقع باید مستقر شود.

خلاصه

معلوم شد که این یک پست وبلاگ بسیار طولانی است، اما در مجموع تنظیم آن نسبتاً آسان است. اگر تازه شروع به کار کرده اید، برای ایجاد موفقیت آمیز فرم خود بدون پرداخت هزینه برای سرور Node با مسیر API، باید چند مرحله را انجام دهید. Netlify ویژگی‌های زیادی را ارائه می‌دهد و ما از لایه اولیه بسیار سخاوتمندانه برنامه‌های آنها استفاده کردیم! اوه و… من توسط Netlify یا MailerLite حمایت نمی‌شوم. فقط یک طرفدار بزرگ خدمات آنها.

اگر این پست به شما کمک کرد و می خواهید تعداد بیشتری از این پست ها را داشته باشید، در خبرنامه من مشترک شوید! من ماهانه یک بار محتوای با کیفیت را به اشتراک می گذارم، بدون هرزنامه.