Next.js-এ SendGrid API ব্যবহার করে কন্ট্যাক্ট ফর্ম তৈরি করুন: ধাপে ধাপে গাইড

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

প্রাচীনভাবে আপনি হয় PHP ব্যবহার করতেন সার্ভারের ওপর ইমেইল পাঠাতে বা কোনো থার্ড পার্টি সার্ভিস ব্যবহার করতেন যা ইমেইল লজিক হ্যান্ডেল করত।

কিন্তু এই আর্টিকেলে, আমরা আলোচনা করব কীভাবে Next.js অ্যাপ্লিকেশন থেকে SendGrid API ব্যবহার করে ইমেইল পাঠাতে হয়।

আমরা একটি সিম্পল পেজ তৈরি করব – React-এ বিল্ট একটি কন্ট্যাক্ট ফর্ম যাতে ইনপুট ফিল্ড থাকবে যেগুলো পাঠানোর আগে ভ্যালিডেট করব। আমরা ফর্মটিকে SendGrid API-এ কানেক্ট করব যা ইমেইল পাঠানোর দায়িত্ব নিবেয়ে নেবে। দিন শেষে, আপনাকে শুধু আপনার ইমেইল চেক করতে হবে সেই কোয়েরিগুলো পাওয়ার জন্য।

তবে, আপনার যদি ইতিমধ্যে Next.js প্রজেক্ট না থাকে, তবে আপনি সহজে একটি তৈরি করে Vercel-এ ইন্টিগ্রেট করতে পারেন নিচের ধাপগুলো ফলো করে:

1. Vercel-এ একাউন্ট তৈরি করুন এবং New Project-এ ক্লিক করুন

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

৩. আপনার রিপোজিটরির যেকোনো নাম দিন এবং Create Project-এ ক্লিক করুন। (GitHub, GitLab বা BitBucket বেছে নিন রিমোট কোড ভার্সনিংয়ের জন্য)

উপরের তিনটি পয়েন্ট ফলো করলে, আপনার ভার্সনিং একাউন্টে একটি রিপোজিটরি তৈরি হবে।

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

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

আমরা Next.js-এর API রুট ব্যবহার করব ফর্ম ইভেন্ট হ্যান্ডেল করার জন্য। API মডিউলগুলো আমাদের Next.js অ্যাপ্লিকেশনে ব্যাকএন্ড লজিক হ্যান্ডেল করার একটি ফ্লেক্সিবল উপায় দেয়।

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

আপনার যদি ইতিমধ্যে একটি Next.js প্রজেক্ট থাকে যেখানে আপনি একটি ওয়ার্কিং কন্ট্যাক্ট ফর্ম সেট আপ করতে চান, তবে এটি চমৎকার। সেক্ষেত্রে, পেজ তৈরি করা এবং শুরু করা আপনার জন্য সহজ হবে।

কিন্তু আপনার যদি প্রজেক্ট সেট আপ করা না থাকে, তবে চিন্তা নেই – Vercel-এ যান এবং একটি Next.js স্টার্টার প্রজেক্ট তৈরি করুন এবং রিপোজিটরি ক্লোন করুন।

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

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

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

TailwindCSS সেট আপ করার পদ্ধতি

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

1. TailwindCSS আপনার প্রজেক্টে ডিপেন্ডেন্সি হিসেবে ইনস্টল করুন:

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

২. আপনার প্রজেক্টের জন্য 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

তারপর আপনার রুট লেভেল স্টাইলশीতে Tailwind-এর কোর CSS ইনক্লুড করুন এরকম:

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

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

কন্ট্যাক্ট পেজের মার্কআপ এবং স্টাইলিং

আমরা পুরো ওয়েবপেজ Tailwind-এ বিল্ড করব। আমি পেজটি সরাসরি Tailwind Master Kit থেকে নিলাম যা Tailwind ওয়েব প্রজেক্টের জন্য একটি কম্পোনেন্ট এবং টেমপ্লেট লাইব্রেরি।

চলুন পেজের HTML-এ (অসলে কন্ট্যাক্ট ফর্ম) যাই যাতে বুঝতে পারি কীভাবে সবকিছু ইমপ্লিমেন্ট করা হয়েছে:

<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>

ফর্মে ৪টি ফিল্ড আছে:

• Full Name
• Email
• Subject
• Message

সকল ফিল্ড বাধ্যতামূলক – এবং আমরা পরে সেগুলো ভ্যালিডেট করব। আপনি আপনার ইউজার থেকে তাদের সকল ডিটেইলস আশা করবেন ইমেইল পাঠাতে সময়।

ফিল্ডগুলো ক্যাপচার করতে, আমরা 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-এর মাধ্যমে ইমেইল পাঠাব। কিন্তু তার আগে, চলুন একটি SendGrid প্রজেক্ট তৈরি করি এবং API keys রিট্রিভ করি।

SendGrid প্রজেক্ট সেট আপ করার পদ্ধতি

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

সফলভাবে একাউন্ট তৈরি হলে, একটি API Key রেজিস্টার করুন। এখানে করতে পারেন।

SendGrid আপনাকে একটি Sender Identity তৈরি করতে বাধ্য করে স্প্যাম এবং ম্যালিশিয়াস মেইল থেকে রক্ষা পাওয়ার জন্য। এটি করতে, SendGrid Identity পেজে যান এবং Create New Sender-এ ক্লিক করে একটি সেন্ডার আইডেন্টিটি তৈরি করুন।

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

API keys রিট্রিভ হলে, আপনার লোকাল এনভায়রনমেন্টে একটি .env.local ফাইল তৈরি করুন এবং নিচের কোড পেস্ট করুন:

SENDGRID_API_KEY= YOUR_API_KEY_HERE 

YOUR_API_KEY_HERE-কে আপনি এখন সেটা রিট্রিভ করেছেন সেই API কী দিয়ে রিপ্লেস করুন।

সার্ভারলেস API রুট তৈরি করার পদ্ধতি

Next.js-এ সার্ভারলেস API রুট তৈরি করা খুব সহজ।

/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: "mannuarora7000@gmail.com", // আপনার ইমেইল যেখানে আপনি ইমেইল পাবেন from: "manuarorawork@gmail.com", // আপনার ওয়েবসাইটের ইমেইল ঠিকানা 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 অবজেক্ট ইনিশিয়ালাইজ করতে বলে API কীসহ setApiKey() মেথড দিয়ে। অবজেক্টটি আপনার API কী দিয়ে ইনিশিয়ালাইজ করুন এবং send() মেথড দিয়ে ইমেইল পাঠান।

send() মেথডের বডিতে মূলত চারটি ফিল্ড রিকোয়ার্ড:

• to – যে ইমেইল ঠিকানায় আপনি আপনার ইমেইল ডেলিভার করতে চান
• from – আপনার SendGrid ইমেইল যা আপনি Sender Identity Verification-এ ব্যবহার করেছেন। আপনার ইমেইলগুলো এই ইমেইল থেকে পাঠানো হবে।
• subject – ইমেইলের সাবজেক্ট লাইন
• message – ইমেইলের মেসেজ বডি

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

import sendgrid from "@sendgrid/mail"; sendgrid.setApiKey(process.env.SENDGRID_API_KEY); async function sendEmail(req, res) { try { await sendgrid.send({ to: "youremail@gmail.com", // আপনার ইমেইল যেখানে আপনি ইমেইল পাবেন from: "youremail@gmail.com", // আপনার ওয়েবসাইটের ইমেইল ঠিকানা 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 দ্বারা প্রদত্ত যা ইমেইল পাঠাতে। আমরা sendgrid অবজেক্টের সাথে send() মেথড ব্যবহার করছি जिसे API কী দিয়ে ইনিশিয়ালাইজ করা হয়েছে। এটি নিশ্চিত করে যে আমাদের ইমেইলগুলো সিকিউর এবং শুধু আমাদের পারমিশন দিয়ে ডেলিভার হচ্ছে।

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

ব্যাকএন্ড থেকে API রেসপন্স দেখে, ফ্রন্টএন্ড অনুযায়ী রেসপন্স করে এবং UI পরিবর্তন হয়।

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

এখন আমাদের 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> ); } 

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

Fetch সার্ভারলেস API-কে বডি সহ কল করে এরকম:

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

এই হলো আমাদের ফর্ম ফিল্ডগুলো ফর্ম ডেটা সহ (মনে রাখুন useState()?) যেগুলো এখন আমাদের কাছে উপলব্ধ।

API সাকসেস বা ফেইলিউর দিয়ে রেসপন্ড করে। যদি সাকসেস হয়, ইমেইল ডেলিভার হবে – অন্যথায়, মেইল ডেলিভার হবে না।

এন্ড-ইউজারের জন্য ফর্ম স্টেটাস জানার জন্য, আমাদের কিছু UI এলিমেন্ট দেখাতে হবে। কিন্তু তার আগে, আমাদের হ্যান্ডেল করতে হবে খালি ফিল্ড থাকলে কী হবে।

ফর্ম ভ্যালিডেশন হ্যান্ডেল করা এবং API রেসপন্স অনুযায়ী UI রেসপন্স করানো

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

1. সকল ফিল্ড পূরণ করা থাকতে হবে – অর্থাৎ, কোনো ফিল্ড খালি থাকলে ফর্ম সাবমিট হবে না। এছাড়া, ইউজারকে জানতে হবে কেন ফর্ম সাবমিট হচ্ছে না। সেজন্য, আমরা এরর মেসেজ ডিসপ্লে করব।
2. ফর্ম সাবমিট হওয়ার সময়, ইউজারকে জানতে হবে কিছু প্রসেসিং চলছে। সেজন্য, ফর্ম সাবমিট হওয়ার সময় বাটনের টেক্সট পরিবর্তন করব।
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> ); } 

ফর্ম সফলভাবে ডেলিভার হলে, আমরা কন্ট্যাক্ট ফর্মেই একটি সফল মেসেজ পাই। সেই রেসপন্স ডেলিভার করার জন্য, আমাদের showSuccessMessage এবং showFailureMessage স্টেট আছে। যদি ব্যাকএন্ড API রুট থেকে রেসপন্সে error প্রপার্টি না থাকে, তাহলে ফর্ম সাবমিশন সফল হয়েছে এবং ইমেইল পাঠানো হয়েছে।

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

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

ইমেইল রিসিভ করা এবং UI রেসপন্স

ইমেইল সফলভাবে ডেলিভার হলে, কন্ট্যাক্ট ফর্মে একটি সাকসেস মেসেজ मिलে।

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

এনভায়রনমেন্ট ভেরিয়েবলস

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

যেহেতু আমাদের লোকাল এনভায়রনমেন্টে .env.local আছে, হোস্টিং প্রোভাইডারটিও API কীস সম্পর্কে জানতে হবে।

Vercel API কীস হোস্টিং প্যানেলেই সিকিউরলি স্টোর করার সহজ উপায় দেয়।

আপনার Vercel একাউন্টে API কীস সিকিউরলি স্টোর করতে, নিচের ধাপগুলো ফলো করুন:

• আপনার প্রজেক্টস পেজে যান
• Settings-এ যান
• Environment variables-এ যান
• এনভায়রনমেন্ট ভেরিয়েবলের নাম যোগ করুন, আমাদের কেসে এটি SENDGRID_API_KEY, এবং কoresponding API কী ভ্যালু ফিল্ডে যোগ করুন।
• আপনার অ্যাপ্লিকেশন রি-ডিপ্লয় করুন এবং আপনার প্রজেক্ট প্রোডাকশন এনভায়রনমেন্টে কাজ করবে।

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

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

Live Demo
Source Code

উপসংহার

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

SendGrid আপনাকে টেমপ্লেট ইন্টিগ্রেট করার অপশনও দেয় যেখানে আপনি আপনার ইমেইলগুলোর জন্য কাস্টম থিম रखতে পারেন।

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

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

আপনি যদি এই ব্লগ পছন্দ করেন, তবে আপনার নিজস্ব ওয়েবসাইটে ইমপ্লিমেন্ট করার চেষ্টা করুন যাতে আপনি আপনার এন্ড-ইউজারদের সাথে যোগাযোগ করতে পারেন।

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

হ্যাপি কোডিং। :)