কিভাবে SendGrid এবং Next.js দিয়ে একটি যোগাযোগ ফর্ম তৈরি করবেন

আপনি যদি চান যে আপনার ব্যবহারকারীরা আপনার সাথে ইমেলের মাধ্যমে ইন্টারঅ্যাক্ট করতে পারবে, তাহলে যোগাযোগের ফর্মগুলি ওয়েবসাইটগুলিতে উপযোগী। এবং সেগুলি তৈরি করার অনেক উপায় রয়েছে৷

প্রথাগতভাবে আপনি সার্ভারের মাধ্যমে ইমেল পাঠানোর জন্য পিএইচপি ব্যবহার করতেন বা কোনো তৃতীয় পক্ষের পরিষেবা যা ইমেল যুক্তির যত্ন নেবে।

কিন্তু এই প্রবন্ধে, আমরা SendGrid API-এর মাধ্যমে আপনার Next.js অ্যাপ্লিকেশন থেকে ইমেল পাঠানোর বিষয়ে কথা বলতে যাচ্ছি।

আমরা একটি সাধারণ পৃষ্ঠা তৈরি করতে যাচ্ছি - প্রতিক্রিয়া সহ তৈরি একটি যোগাযোগ ফর্ম - যাতে ইনপুট ক্ষেত্র রয়েছে যা পাঠানোর আগে আমরা যাচাই করব। আমরা ফর্মটিকে SendGrid API-এর সাথে সংযুক্ত করব যা আপনাকে ইমেলগুলি পাঠানোর যত্ন নেবে৷ তারপর, দিনের শেষে, আপনাকে যা করতে হবে তা হল সেই প্রশ্নগুলি খুঁজে পেতে আপনার ইমেল চেক করুন৷

যাইহোক, যদি আপনার কাছে এখনও একটি Next.js প্রজেক্ট না থাকে, তাহলে আপনি সহজেই একটি তৈরি করতে পারেন এবং নিচে উল্লেখিত ধাপগুলি অনুসরণ করে এটিকে Vercel-এর সাথে সংহত করতে পারেন:

ভার্সেলে একটি অ্যাকাউন্ট তৈরি করুন এবং New Project এ ক্লিক করুন

কিভাবে SendGrid এবং Next.js দিয়ে একটি যোগাযোগ ফর্ম তৈরি করবেন

2. টেমপ্লেটটিকে Next.js হিসেবে বেছে নিন :

3. আপনার সংগ্রহস্থলের নাম দিন যা আপনি চান এবং তৈরি প্রকল্পে ক্লিক করুন। (আপনার দূরবর্তী কোড সংস্করণের জন্য GitHub, GitLab বা BitBucket চয়ন করুন)

উপরের তিনটি পয়েন্ট অনুসরণ করে, আপনার সংস্করণ অ্যাকাউন্টে একটি সংগ্রহস্থল থাকবে।

আমরা যে টেক স্ট্যাক ব্যবহার করব

একটি যোগাযোগ ফর্ম ল্যান্ডিং পৃষ্ঠা তৈরি করার জন্য Next.js
উপাদান স্টাইল করার জন্য TailwindCSS
তাদের API ব্যবহার করে ইমেল পাঠানোর জন্য SendGrid
আমাদের অ্যাপ্লিকেশন এবং CI/CD হোস্ট করার জন্য Vercel

আমরা ফর্ম ইভেন্টগুলি পরিচালনা করতে Nextjs এর API রুটগুলি ব্যবহার করতে যাচ্ছি। API মডিউলগুলি আমাদের Next.js অ্যাপ্লিকেশনে ব্যাকএন্ড লজিক পরিচালনা করার একটি নমনীয় উপায় প্রদান করে৷

এপিআই ফোল্ডারে আমরা যে কোডই লিখি না কেন হোস্টিংয়ের জন্য ভার্সেলে সার্ভারলেস ফাংশন হিসাবে স্থাপন করা হবে। আপনি এখানে Next.js API রুট সম্পর্কে আরও পড়তে পারেন

আপনার যদি ইতিমধ্যেই একটি Next.js প্রজেক্ট থাকে যেখানে আপনি একটি কার্যকরী যোগাযোগ ফর্ম সেট আপ করতে চান, এটি দুর্দান্ত। সেই ক্ষেত্রে, পৃষ্ঠাগুলি তৈরি করা এবং এখনই শুরু করা আপনার পক্ষে সহজ হবে৷

কিন্তু আপনার যদি এখনও কোনো প্রজেক্ট সেট আপ না করে থাকে, তাহলে ঠিক আছে – Vercel এ যান এবং একটি Next.js স্টার্টার প্রজেক্ট তৈরি করুন এবং রিপোজিটরি ক্লোন করুন।

অ্যাপ্লিকেশন ফ্লো

আসুন অ্যাপ্লিকেশান ফ্লো দেখে নেওয়া যাক – বা ইমেল পাঠানো আসলে কীভাবে কাজ করে:

শেষ-ব্যবহারকারী বাধ্যতামূলক 4টি ক্ষেত্র পূরণ করে এবং জমাতে ক্লিক করে।
সাবমিট করার সময়, handleSubmit ফাংশন ট্রিগার হয়।
handleSubmit ইনপুট ক্ষেত্রগুলির জন্য ফর্মটি যাচাই করে এবং সেগুলি খালি না থাকলে পরীক্ষা করে৷
যদি ফর্ম ক্ষেত্রগুলি খালি না থাকে, তাহলে api/sendgrid এ একটি API কল করা হয় যেখানে ইমেল পাঠানোর যুক্তি বেঁচে থাকে।
api/sendgrid-এ , @sendgrid/mail মডিউল একটি send আরম্ভ করে ফাংশন যা এটি আপনার অ্যাপ্লিকেশনের API কীগুলি নেয় এবং প্রয়োজনীয় ক্ষেত্রগুলির সাথে ইমেল পাঠায়৷
যদি ইমেল সফলভাবে বিতরণ করা হয়, একটি 200 প্রতিক্রিয়া ক্লায়েন্টকে পাঠানো হয়, অন্যথায় একটি 400 প্রতিক্রিয়া ক্লায়েন্টকে পাঠানো হয়।
প্রতিক্রিয়াগুলি ফ্রন্টএন্ডে পরিচালনা করা হয় এবং উপযুক্ত বার্তাগুলি প্রদর্শিত হয়৷

কিভাবে TailwindCSS সেট আপ করবেন

TailwindCSS সেট আপ করা বেশ সহজ, এবং আপনি এটি দুটি সহজ উপায়ে করতে পারেন।

আপনার প্রকল্পে নির্ভরতা হিসাবে TailwindCSS ইনস্টল করুন:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2. আপনার প্রকল্পের জন্য একটি TailwindCSS কনফিগারেশন ফাইল শুরু করুন। এটি একটি tailwind.config.js তৈরি করবে রুট ডিরেক্টরিতে ফাইল:

npx tailwindcss init

তারপর আপনাকে কনফিগারেশন ফাইলটি সম্পাদনা করতে হবে, purge অন্তর্ভুক্ত করতে হবে পাথ, এবং jit সক্ষম করুন মোড:

module.exports = {
   purge: [],
   mode: 'jit',
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

আপনি purge ব্যবহার করেন নির্মাণের সময় আপনার প্রকল্প থেকে অবাঞ্ছিত শৈলী অপসারণ করতে. আপনি যদি CSS বান্ডেলের আকার কমাতে চান তবে এটি সহায়ক।

jit হল নতুন TailwindCSS মোড যেখানে আপনি কোডেই ডায়নামিক ক্লাসনাম নির্দিষ্ট করতে পারেন।

উদাহরণস্বরূপ, আপনি যদি আপনার পাঠ্যের আকার 10px রাখতে চান (যা ইতিমধ্যেই TailwindCSS মডিউলে নেই), আপনি text-[10px] লিখতে পারেন আপনার ক্লাসের নামগুলিতে এবং এটি স্বয়ংক্রিয়ভাবে প্রতিফলিত হবে। কাস্টম শৈলী বৈশিষ্ট্য আর লিখতে হবে না. 💯

এরপর, আপনার রুট _app.js-এ Tailwind শৈলী আমদানি করুন ফাইল:

// pages/_app.js
 import '../styles/globals.css'
 import 'tailwindcss/tailwind.css'

  function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
  }

  export default MyApp

তারপরে আপনার রুট লেভেলের স্টাইলশীটে টেইলউইন্ডের মূল CSS এইভাবে অন্তর্ভুক্ত করুন:

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

এটির মাধ্যমে, আপনি সফলভাবে আপনার প্রকল্পের জন্য TailwindCSS সেটআপ করেছেন।

যোগাযোগ পৃষ্ঠার জন্য মার্কআপ এবং স্টাইলিং

আমরা টেলউইন্ডের সাথে সম্পূর্ণভাবে ওয়েবপেজ তৈরি করব। আমি পৃষ্ঠাটি সরাসরি Tailwind Master Kit থেকে পেয়েছি যা Tailwind ওয়েব প্রকল্পের জন্য একটি উপাদান এবং টেমপ্লেট লাইব্রেরি।

আসুন সবকিছু কীভাবে বাস্তবায়িত হয় তা বোঝার জন্য পৃষ্ঠার এইচটিএমএল (মূলত যোগাযোগের ফর্ম) দিয়ে যাই:

<form class="rounded-lg shadow-xl flex flex-col px-8 py-8 bg-white dark:bg-blue-500">
      <h1 class="text-2xl font-bold dark:text-gray-50">Send a message</h1>

      <label for="fullname" class="text-gray-500 font-light mt-8 dark:text-gray-50">Full name<span class="text-red-500 dark:text-gray-50">*</span></label>
      <input type="text" name="fullname" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500" />

      <label for="email" class="text-gray-500 font-light mt-4 dark:text-gray-50">E-mail<span class="text-red-500">*</span></label>
      <input type="email" name="email" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500" />

      <label for="subject" class="text-gray-500 font-light mt-4 dark:text-gray-50">Subject<span class="text-red-500">*</span></label>
      <input type="text" name="subject" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500" />

      <label for="message" class="text-gray-500 font-light mt-4 dark:text-gray-50">Message<span class="text-red-500">*</span></label>
      <textarea name="message" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500"></textarea>
      <div class="flex flex-row items-center justify-start">
        <button class="px-10 mt-8 py-2 bg-[#130F49] text-gray-50 font-light rounded-md text-lg flex flex-row items-center">
          Send
          <svg width="24" height="24" viewBox="0 0 24 24" class="text-cyan-500 ml-2" fill="currentColor" xmlns="https://www.w3.org/2000/svg">
            <path d="M9.00967 5.12761H11.0097C12.1142 5.12761 13.468 5.89682 14.0335 6.8457L16.5089 11H21.0097C21.562 11 22.0097 11.4477 22.0097 12C22.0097 12.5523 21.562 13 21.0097 13H16.4138L13.9383 17.1543C13.3729 18.1032 12.0191 18.8724 10.9145 18.8724H8.91454L12.4138 13H5.42485L3.99036 15.4529H1.99036L4.00967 12L4.00967 11.967L2.00967 8.54712H4.00967L5.44417 11H12.5089L9.00967 5.12761Z" fill="currentColor" />
          </svg>
        </button>
      </div>
    </form>

ফর্মটিতে 4টি ক্ষেত্র রয়েছে:

পুরো নাম
ইমেল
বিষয়
বার্তা

সমস্ত ক্ষেত্রগুলি বাধ্যতামূলক - এবং আমরা সেগুলিকেও পরে যাচাই করব৷ আপনি আশা করবেন আপনার ব্যবহারকারী ইমেল পাঠানোর সময় তাদের সমস্ত বিবরণ আপনাকে প্রদান করবে৷

ক্ষেত্রগুলি ক্যাপচার করার জন্য, আমরা আমাদের ডেটা অ্যাপ্লিকেশানে টিকে আছে তা নিশ্চিত করতে React এর useState() হুক ব্যবহার করতে যাচ্ছি৷

export default function ContactUs() {
  const [fullname, setFullname] = useState("");
  const [email, setEmail] = useState("");
  const [subject, setSubject] = useState("");
  const [message, setMessage] = useState("");

    return (
		<form
          onSubmit={handleSubmit}
          className="rounded-lg shadow-xl flex flex-col px-8 py-8 bg-white dark:bg-blue-500"
        >
          <h1 className="text-2xl font-bold dark:text-gray-50">
            Send a message
          </h1>

          <label
            htmlFor="fullname"
            className="text-gray-500 font-light mt-8 dark:text-gray-50"
          >
            Full name<span className="text-red-500 dark:text-gray-50">*</span>
          </label>
          <input
            type="text"
            value={fullname}
            onChange={(e) => {
              setFullname(e.target.value);
            }}
            name="fullname"
            className="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500"
          />
         

          <label
            htmlFor="email"
            className="text-gray-500 font-light mt-4 dark:text-gray-50"
          >
            E-mail<span className="text-red-500">*</span>
          </label>
          <input
            type="email"
            name="email"
            value={email}
            onChange={(e) => {
              setEmail(e.target.value);
            }}
            className="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500"
          />
          

          <label
            htmlFor="subject"
            className="text-gray-500 font-light mt-4 dark:text-gray-50"
          >
            Subject<span className="text-red-500">*</span>
          </label>
          <input
            type="text"
            name="subject"
            value={subject}
            onChange={(e) => {
              setSubject(e.target.value);
            }}
            className="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500"
          />
         
          <label
            htmlFor="message"
            className="text-gray-500 font-light mt-4 dark:text-gray-50"
          >
            Message<span className="text-red-500">*</span>
          </label>
          <textarea
            name="message"
            value={message}
            onChange={(e) => {
              setMessage(e.target.value);
            }}
            className="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500"
          ></textarea>
          
          <div className="flex flex-row items-center justify-start">
            <button
              type="submit"
              className="px-10 mt-8 py-2 bg-[#130F49] text-gray-50 font-light rounded-md text-lg flex flex-row items-center"
            >
              Submit
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                className="text-cyan-500 ml-2"
                fill="currentColor"
                xmlns="https://www.w3.org/2000/svg"
              >
                <path
                  d="M9.00967 5.12761H11.0097C12.1142 5.12761 13.468 5.89682 14.0335 6.8457L16.5089 11H21.0097C21.562 11 22.0097 11.4477 22.0097 12C22.0097 12.5523 21.562 13 21.0097 13H16.4138L13.9383 17.1543C13.3729 18.1032 12.0191 18.8724 10.9145 18.8724H8.91454L12.4138 13H5.42485L3.99036 15.4529H1.99036L4.00967 12L4.00967 11.967L2.00967 8.54712H4.00967L5.44417 11H12.5089L9.00967 5.12761Z"
                  fill="currentColor"
                />
              </svg>
            </button>
          </div>
        </form>
	)
}

ফর্ম অ্যাট্রিবিউট onSubmit={handleSubmit} লক্ষ্য করুন . এটি সেই ফাংশন যেখানে আমরা আসলে সেন্ডগ্রিডের মাধ্যমে ইমেল পাঠাতে যাচ্ছি। কিন্তু তার আগে, আসুন একটি SendGrid প্রকল্প তৈরি করি এবং API keys পুনরুদ্ধার করি .

কিভাবে একটি সেন্ডগ্রিড প্রকল্প সেট আপ করবেন

প্রথমে, আপনাকে শুধুমাত্র SendGrid-এর হোমপেজে যেতে হবে এবং একটি অ্যাকাউন্টের জন্য সাইন আপ করতে হবে (যদি আপনার আগে থেকে না থাকে)।

সফলভাবে একটি অ্যাকাউন্ট তৈরি করার পরে, একটি API কী-এর জন্য নিবন্ধন করুন৷ আপনি এটি এখানে করতে পারেন।

Sendgrid আপনাকে স্প্যাম এবং দূষিত মেল থেকে রক্ষা করার জন্য একটি প্রেরক পরিচয় তৈরি করতে হবে। এটি করতে, সেন্ডগ্রিড আইডেন্টিটি পৃষ্ঠায় যান এবং Create New Sender এ ক্লিক করুন একটি প্রেরকের পরিচয় তৈরি করতে।

একটি বিস্তারিত ফর্ম পূরণ করার জন্য আপনাকে অনুরোধ করা হবে। শুধু ফর্মটি পূরণ করুন এবং সাবমিট টিপুন। অবশেষে, শুধু আপনার ইমেল ঠিকানা যাচাই করুন এবং আপনার কাজ শেষ।

একবার আপনি API keys পুনরুদ্ধার করেছেন , একটি .env.local তৈরি করুন আপনার স্থানীয় পরিবেশে ফাইল করুন এবং নিম্নলিখিত কোডটি পেস্ট করুন:

SENDGRID_API_KEY= YOUR_API_KEY_HERE

YOUR_API_KEY_HERE প্রতিস্থাপন করুন API কী দিয়ে আপনি এইমাত্র পুনরুদ্ধার করেছেন।

কিভাবে একটি সার্ভারহীন API রুট তৈরি করবেন

একটি সার্ভারহীন API রুট তৈরি করা Next.js.

এর মাধ্যমে বেশ সহজ

/pages/api-এ যান এবং api এর ভিতরে ফোল্ডার sendgrid.js নামে একটি ফাইল তৈরি করুন .

import sendgrid from "@sendgrid/mail";

sendgrid.setApiKey(process.env.SENDGRID_API_KEY);

async function sendEmail(req, res) {
  try {
    // console.log("REQ.BODY", req.body);
    await sendgrid.send({
      to: "[email protected]", // Your email where you'll receive emails
      from: "[email protected]", // your website email address here
      subject: `${req.body.subject}`,
      html: `<div>You've got a mail</div>`,
    });
  } catch (error) {
    // console.log(error);
    return res.status(error.statusCode || 500).json({ error: error.message });
  }

  return res.status(200).json({ error: "" });
}

export default sendEmail;

SendGrid-এর জন্য আমাদের একটি sendgrid আরম্ভ করতে হবে setApiKey() সহ API কী সহ বস্তু পদ্ধতি আপনার API কী দিয়ে বস্তুটি শুরু করুন এবং আপনি send() দিয়ে ইমেল পাঠাতে পারেন পদ্ধতি।

মূলত চারটি ক্ষেত্র রয়েছে যা send()-এ প্রয়োজনীয়৷ পদ্ধতির মূল অংশ:

to – ইমেল ঠিকানা যেখানে আপনি আপনার ইমেল বিতরণ করতে চান
from - আপনার সেন্ডগ্রিড ইমেল যা আপনি প্রেরকের পরিচয় যাচাইয়ের জন্য ব্যবহার করেছেন। আপনার ইমেলগুলি এই ইমেল থেকে পাঠানো হবে৷
subject – ইমেলের বিষয় লাইন
message – ইমেইলের মেসেজ বডি

আমরা নিজেরাই এই চারটি প্যারামিটার তৈরি করতে যাচ্ছি যাতে আমরা আমাদের ইমেলগুলি আরও ভালভাবে বুঝতে পারি। এখানে উপরের একই স্নিপেট থেকে আপডেট করা কোড রয়েছে:

import sendgrid from "@sendgrid/mail";

sendgrid.setApiKey(process.env.SENDGRID_API_KEY);

async function sendEmail(req, res) {
  try {
    await sendgrid.send({
      to: "[email protected]", // Your email where you'll receive emails
      from: "[email protected]", // your website email address here
      subject: `[Lead from website] : ${req.body.subject}`,
      html: `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html lang="en">
      <head>
        <meta charset="utf-8">
      
        <title>The HTML5 Herald</title>
        <meta name="description" content="The HTML5 Herald">
        <meta name="author" content="SitePoint">
      <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
      
        <link rel="stylesheet" href="css/styles.css?v=1.0">
      
      </head>
      
      <body>
        <div class="img-container" style="display: flex;justify-content: center;align-items: center;border-radius: 5px;overflow: hidden; font-family: 'helvetica', 'ui-sans';">              
              </div>
              <div class="container" style="margin-left: 20px;margin-right: 20px;">
              <h3>You've got a new mail from ${req.body.fullname}, their email is: ✉️${req.body.email} </h3>
              <div style="font-size: 16px;">
              <p>Message:</p>
              <p>${req.body.message}</p>
              <br>
              </div>
              <img src="https://manuarora.in/logo.png" class="logo-image" style="height: 50px;width: 50px;border-radius: 5px;overflow: hidden;">
              <p class="footer" style="font-size: 16px;padding-bottom: 20px;border-bottom: 1px solid #D1D5DB;">Regards<br>Manu Arora<br>Software Developer<br>+91 9587738861</p>
              <div class="footer-links" style="display: flex;justify-content: center;align-items: center;">
                <a href="https://manuarora.in/" style="text-decoration: none;margin: 8px;color: #9CA3AF;">Website</a>
                <a href="https://manuarora.in/blog/" style="text-decoration: none;margin: 8px;color: #9CA3AF;">Blog</a>
                <a href="https://github.com/manuarora700/" style="text-decoration: none;margin: 8px;color: #9CA3AF;">GitHub</a>
                <a href="https://instagram.com/maninthere/" style="text-decoration: none;margin: 8px;color: #9CA3AF;">Instagram</a>
                <a href="https://linkedin.com/in/manuarora28/" style="text-decoration: none;margin: 8px;color: #9CA3AF;">LinkedIn</a>
                <a href="https://twitter.com/mannupaaji/" style="text-decoration: none;margin: 8px;color: #9CA3AF;">Twitter</a>
                
              </div>
              </div>
      </body>
      </html>`,
    });
  } catch (error) {
    // console.log(error);
    return res.status(error.statusCode || 500).json({ error: error.message });
  }

  return res.status(200).json({ error: "" });
}

export default sendEmail;

আপনি যদি html পাঠাতে চান ইমেইল বডিতে, আপনাকে ইনলাইন শৈলী ব্যবহার করতে হবে যা উদাহরণেও আছে।

এখানে, আমরা মূলত SendGrid এর send() ব্যবহার করছি ইমেল পাঠানোর জন্য SendGrid API দ্বারা প্রদত্ত পদ্ধতি। আমরা send() ব্যবহার করি sendgrid সহ পদ্ধতি বস্তু যা আমরা API কী দিয়ে আরম্ভ করেছি। এটি নিশ্চিত করে যে আমাদের ইমেলগুলি নিরাপদ এবং শুধুমাত্র আমাদের অনুমতি দ্বারা বিতরণ করা হয়৷

৷

এছাড়াও, আমরা কোডটিকে একটি try - catch এ মোড়ানো করেছি ব্লক এটি নিশ্চিত করে যে আমাদের অ্যাপ্লিকেশনটি ব্যতিক্রম এবং ত্রুটিগুলি সঠিকভাবে পরিচালনা করতে পারে। যদি কোনো পরিবর্তনের মাধ্যমে ইমেল পাঠানো ব্যর্থ হয়, তাহলে কোডটি অবিলম্বে catch()-এ পড়ে ব্লক করুন এবং আমরা একটি error ফেরত দিই বস্তু এটি নির্দেশ করে যে ব্যাক-এন্ডে কিছু সমস্যা হয়েছে।

পিছনের প্রান্ত থেকে API প্রতিক্রিয়ার দিকে তাকালে, সামনের প্রান্তটি সেই অনুযায়ী প্রতিক্রিয়া জানায় এবং UI পরিবর্তিত হয়৷

স্টাইলিং html-এ যায় send() এর ভিতরে বৈশিষ্ট্য পদ্ধতি শরীর। আপনি কীভাবে আপনার ইমেল স্টাইল করতে চান তা সম্পূর্ণরূপে আপনার উপর নির্ভর করে। এখানে, আমি আমার টুইটার, ইনস্টাগ্রাম, গিটহাব এবং ওয়েবসাইটে একটি ফুটার সহ একটি সাধারণ টেমপ্লেট অন্তর্ভুক্ত করেছি, সাথে শেষ-ব্যবহারকারীর পাঠানো মূল মেসেজ বডি সহ।

এখন আমাদের API রুট সেটআপ করা হয়েছে, তাই আসুন সামনের প্রান্তে চলে যাই এবং কীভাবে প্রতিক্রিয়া সঠিকভাবে পরিচালনা করতে হয় তা শিখি৷

কিভাবে API কল করবেন এবং প্রতিক্রিয়াগুলি পরিচালনা করবেন

যেহেতু আমাদের API রুট সেটআপ করা হয়েছে, আমরা এখন আমাদের সার্ভারহীন API কল করব এবং প্রতিক্রিয়া আনব৷

import React, { useState } from "react";

export default function ContactUs() {
  const [fullname, setFullname] = useState("");
  const [email, setEmail] = useState("");
  const [subject, setSubject] = useState("");
  const [message, setMessage] = useState("");



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

    let isValidForm = handleValidation();

     
      const res = await fetch("/api/sendgrid", {
        body: JSON.stringify({
          email: email,
          fullname: fullname,
          subject: subject,
          message: message,
        }),
        headers: {
          "Content-Type": "application/json",
        },
        method: "POST",
      });

      const { error } = await res.json();
      if (error) {
        console.log(error);
        return;
      }
    console.log(fullname, email, subject, message);
  };
  return (
    <main>
        <form class="rounded-lg shadow-xl flex flex-col px-8 py-8 bg-white dark:bg-blue-500">
      <h1 class="text-2xl font-bold dark:text-gray-50">Send a message</h1>

      <label for="fullname" class="text-gray-500 font-light mt-8 dark:text-gray-50">Full name<span class="text-red-500 dark:text-gray-50">*</span></label>
      <input type="text" name="fullname" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500" />

      <label for="email" class="text-gray-500 font-light mt-4 dark:text-gray-50">E-mail<span class="text-red-500">*</span></label>
      <input type="email" name="email" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500" />

      <label for="subject" class="text-gray-500 font-light mt-4 dark:text-gray-50">Subject<span class="text-red-500">*</span></label>
      <input type="text" name="subject" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500" />

      <label for="message" class="text-gray-500 font-light mt-4 dark:text-gray-50">Message<span class="text-red-500">*</span></label>
      <textarea name="message" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500"></textarea>
      <div class="flex flex-row items-center justify-start">
        <button class="px-10 mt-8 py-2 bg-[#130F49] text-gray-50 font-light rounded-md text-lg flex flex-row items-center">
          Send
          <svg width="24" height="24" viewBox="0 0 24 24" class="text-cyan-500 ml-2" fill="currentColor" xmlns="https://www.w3.org/2000/svg">
            <path d="M9.00967 5.12761H11.0097C12.1142 5.12761 13.468 5.89682 14.0335 6.8457L16.5089 11H21.0097C21.562 11 22.0097 11.4477 22.0097 12C22.0097 12.5523 21.562 13 21.0097 13H16.4138L13.9383 17.1543C13.3729 18.1032 12.0191 18.8724 10.9145 18.8724H8.91454L12.4138 13H5.42485L3.99036 15.4529H1.99036L4.00967 12L4.00967 11.967L2.00967 8.54712H4.00967L5.44417 11H12.5089L9.00967 5.12761Z" fill="currentColor" />
          </svg>
        </button>
      </div>
    </form>
    </main>
  );
}

এখানে আমরা fetch দিয়ে তৈরি করা APIকে কল করছি , যা প্রতিক্রিয়া দ্বারা প্রদান করা হয়।

আনয়ন এই মত বডি সহ সার্ভারহীন API কল করে:

body: JSON.stringify({
          email: email,
          fullname: fullname,
          subject: subject,
          message: message,
        })

এইগুলি হল আমাদের ফর্ম ক্ষেত্র যেখানে ইতিমধ্যে ফর্ম ডেটা পূরণ করা হয়েছে (মনে রাখবেন useState() ?) যা এখন আমাদের কাছে উপলব্ধ৷

৷

API সাফল্য বা ব্যর্থতার সাথে সাড়া দেয়। এটি সফল হলে, ইমেলটি বিতরণ করা হবে - অন্যথায়, মেলটি বিতরণ করা হবে না।

শেষ-ব্যবহারকারীর ফর্ম স্থিতি জানার জন্য, আমাদের কিছু UI উপাদান দেখাতে হবে। তবে তার আগে, খালি ক্ষেত্র থাকলে কী হবে তা আমাদের পরিচালনা করতে হবে।

কীভাবে ফর্ম বৈধকরণ পরিচালনা করবেন এবং UI কে API প্রতিক্রিয়ার প্রতিক্রিয়া জানাতে হবে

আমাদের এখানে 3টি জিনিস নিশ্চিত করতে হবে:

সমস্ত ক্ষেত্র পূরণ করতে হবে - অর্থাৎ, কোনো ক্ষেত্র খালি থাকলে আমরা ফর্ম জমা দিতে পারব না। এছাড়াও, ব্যবহারকারীকে অবশ্যই জানতে হবে কেন ফর্মটি জমা হচ্ছে না। এর জন্য, আমরা ত্রুটি বার্তা প্রদর্শন করতে যাচ্ছি।
ফর্মটি জমা দেওয়ার সময়, ব্যবহারকারীকে অবশ্যই জানতে হবে যে কিছু প্রক্রিয়াকরণ চলছে। এর জন্য, ফর্ম জমা দেওয়ার প্রক্রিয়ায় আমরা বোতামের পাঠ্য পরিবর্তন করতে যাচ্ছি।
যখন ফর্মটি সফলভাবে জমা দেওয়া হয় বা এটি ব্যর্থ হলে, আমরা ফর্মের নীচে চূড়ান্ত অবস্থা দেখাব৷

চলুন একটি পদ্ধতি তৈরি করি handleValidation() বৈধতা পরীক্ষা করতে:


  const handleValidation = () => {
    let tempErrors = {};
    let isValid = true;

    if (fullname.length <= 0) {
      tempErrors["fullname"] = true;
      isValid = false;
    }
    if (email.length <= 0) {
      tempErrors["email"] = true;
      isValid = false;
    }
    if (subject.length <= 0) {
      tempErrors["subject"] = true;
      isValid = false;
    }
    if (message.length <= 0) {
      tempErrors["message"] = true;
      isValid = false;
    }

    setErrors({ ...tempErrors });
    console.log("errors", errors);
    return isValid;
  };

ফাংশনটি বেশ সহজবোধ্য:এটি সমস্ত ক্ষেত্র পরীক্ষা করে এবং একটি বুলিয়ান isValid প্রদান করে যদি ফর্মটি বৈধ হয়।

এছাড়াও, আমরা শেষ পর্যন্ত ত্রুটি বার্তা প্রদর্শনের জন্য সমস্ত ক্ষেত্রের অবস্থা বজায় রাখছি – মূলত, আমরা ত্রুটিযুক্ত ক্ষেত্রগুলি সংরক্ষণ করছি৷

বোতাম পাঠ্য, ত্রুটি বার্তা এবং ফর্ম যাচাইকরণ সহ চূড়ান্ত কোডটি এরকম কিছু দেখায়:

import React, { useState } from "react";

export default function ContactUs() {
   // States for contact form fields
  const [fullname, setFullname] = useState("");
  const [email, setEmail] = useState("");
  const [subject, setSubject] = useState("");
  const [message, setMessage] = useState("");

  //   Form validation state
  const [errors, setErrors] = useState({});

  //   Setting button text on form submission
  const [buttonText, setButtonText] = useState("Send");

  // Setting success or failure messages states
  const [showSuccessMessage, setShowSuccessMessage] = useState(false);
  const [showFailureMessage, setShowFailureMessage] = useState(false);

  // Validation check method
  const handleValidation = () => {
    let tempErrors = {};
    let isValid = true;

    if (fullname.length <= 0) {
      tempErrors["fullname"] = true;
      isValid = false;
    }
    if (email.length <= 0) {
      tempErrors["email"] = true;
      isValid = false;
    }
    if (subject.length <= 0) {
      tempErrors["subject"] = true;
      isValid = false;
    }
    if (message.length <= 0) {
      tempErrors["message"] = true;
      isValid = false;
    }

    setErrors({ ...tempErrors });
    console.log("errors", errors);
    return isValid;
  };

  //   Handling form submit

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

    let isValidForm = handleValidation();

    if (isValidForm) {
      setButtonText("Sending");
      const res = await fetch("/api/sendgrid", {
        body: JSON.stringify({
          email: email,
          fullname: fullname,
          subject: subject,
          message: message,
        }),
        headers: {
          "Content-Type": "application/json",
        },
        method: "POST",
      });

      const { error } = await res.json();
      if (error) {
        console.log(error);
        setShowSuccessMessage(false);
        setShowFailureMessage(true);
        setButtonText("Send");
        return;
      }
      setShowSuccessMessage(true);
      setShowFailureMessage(false);
      setButtonText("Send");
    }
    console.log(fullname, email, subject, message);
  };
  return (
    <main>
      // Rest of the JSX code goes here. (With form fields)
    </main>
  );
}

যখন ফর্মটি সফলভাবে বিতরণ করা হয়, তখন আমরা UI এ একটি সুন্দর প্রতিক্রিয়া পাই৷ সেই প্রতিক্রিয়া দেওয়ার জন্য, আমাদের কাছে showSuccessMessage আছে এবং showFailureMessage রাজ্যগুলি যদি ব্যাক-এন্ড এপিআই রুটের প্রতিক্রিয়াতে error সম্পত্তি না থাকে , তার মানে ফর্ম জমা দেওয়া সফল হয়েছে এবং ইমেল পাঠানো হয়েছে৷

৷

সেই ক্ষেত্রে, showSuccessMessage সত্যে সেট করা হয়েছে, যা ফর্ম বক্সের ঠিক নীচে সংশ্লিষ্ট মার্কআপ দেখায়। যদি প্রতিক্রিয়া বডিতে error এর সম্পত্তি থাকে , showFailureMessage সত্যে সেট করা হয় এবং সংশ্লিষ্ট বার্তাটি স্ক্রিনে প্রদর্শিত হয়।

সাফল্য এবং ব্যর্থতা উভয় পরিস্থিতিতেই, আমাদের বোতামের পাঠ্যটিকে send এ পুনরায় সেট করতে হবে sending... এর পরিবর্তে . এর জন্য, আমরা স্টেট setButtonText('send') ব্যবহার করছি যা ব্যর্থতা বা সাফল্যের ক্ষেত্রে বোতাম পাঠ্য সেট করে। আমরা বোতাম পাঠ্যটিকে sending... এ সেট করি যখন পাঠান বোতামে ক্লিক করা হয়।

কিভাবে ইমেল এবং UI প্রতিক্রিয়া পেতে হয়

যখন ইমেলটি সফলভাবে বিতরণ করা হয়, তখন আমরা যোগাযোগ ফর্মে একটি সফল বার্তা পাই৷

৷

এবং আপনি সফলভাবে একটি টেমপ্লেট সহ একটি ইমেল পাবেন যা আমরা এইমাত্র তৈরি করেছি, সেন্ডগ্রিড দ্বারা নিরাপদে বিতরণ করা হয়েছে 💯

পরিবেশ ভেরিয়েবল

দয়া করে মনে রাখবেন যে আমরা API কীগুলি ব্যবহার করছি এবং কীগুলি সংবেদনশীল৷ এর মানে হল যে আমাদের সবসময় পরিবেশের ভেরিয়েবলে গোপন বা API কী সংরক্ষণ করা উচিত।

যেমন আমাদের ইতিমধ্যেই .env.local আছে আমাদের স্থানীয় পরিবেশের জন্য, হোস্টিং প্রদানকারীকে API কী সম্পর্কেও জানতে হবে।

Vercel হোস্টিং প্যানেলে API কী সংরক্ষণ করার একটি সহজ উপায় প্রদান করে৷

৷

আপনার Vercel অ্যাকাউন্টে নিরাপদে API কীগুলি সংরক্ষণ করতে, নিম্নলিখিতগুলি করুন:

আপনার প্রকল্প পৃষ্ঠায় যান
সেটিংসে যান
এনভায়রনমেন্ট ভেরিয়েবলে যান
পরিবেশ ভেরিয়েবলের নাম যোগ করুন, আমাদের ক্ষেত্রে এটি SENDGRID_API_KEY , এবং মান ক্ষেত্রে সংশ্লিষ্ট API কী যোগ করুন।
আপনার অ্যাপ্লিকেশন পুনরায় স্থাপন করুন এবং আপনার প্রকল্প একটি উত্পাদন পরিবেশে কাজ করবে।

লাইভ ডেমো এবং সোর্স কোড

এখানে সোর্স কোড এবং অ্যাপ্লিকেশনটির একটি লাইভ ডেমো রয়েছে:

সরাসরি নমুনা
সোর্স কোড

উপসংহার

SendGrid একটি ওয়েবসাইট থেকে ইমেল পাঠাতে ব্যবহার করার জন্য একটি চমৎকার বিকল্প। যখন আপনি এটিকে Next.js এবং তাদের সার্ভারহীন API রুটের সাথে সংহত করেন, তখন আপনার ওয়েবসাইটের যেকোনো অংশে ফর্মগুলিকে একত্রিত করা অত্যন্ত সহজ হয়ে যায়।

সেন্ডগ্রিড আপনাকে টেমপ্লেটগুলিকে সংহত করার একটি বিকল্প দেয় যেখানে আপনি আপনার ইমেলের জন্য কাস্টম থিম রাখতে পারেন৷

Nodemailer-এর মতো ইমেল পাঠানোর জন্য অন্যান্য বিকল্পও রয়েছে যা আমি অতীতে ব্যবহার করেছি এবং এখনও আমার কিছু প্রকল্পের জন্য ব্যবহার করি।

এই অ্যাপ্লিকেশানটি তৈরি করতে আমার প্রায় এক ঘণ্টা সময় লেগেছে – নেক্সট.জেএস, টেইলউইন্ডসিএসএস এবং সেন্ডগ্রিডকে তাদের অত্যন্ত স্বজ্ঞাত কর্মপ্রবাহ এবং API শব্দার্থবিদ্যার জন্য ধন্যবাদ। এছাড়াও সুন্দর যোগাযোগ পৃষ্ঠা UI-এর জন্য Tailwind Master Kit-কে ধন্যবাদ।

আপনি যদি এই ব্লগটি পছন্দ করেন তবে এটি আপনার নিজের ওয়েবসাইটে প্রয়োগ করার চেষ্টা করুন যাতে আপনি আপনার শেষ ব্যবহারকারীদের কাছে পৌঁছাতে পারেন।

আপনি যদি কোন মতামত দিতে চান, আমার টুইটার হ্যান্ডেলে আমার সাথে যোগাযোগ করুন বা আমার ওয়েবসাইট দেখুন

খুশি কোডিং. :)