Next.js, Supabase ও Cloudinary দিয়ে রাহাতভার্স তৈরির গল্প
রাহাতভার্স কোনো প্রোডাক্ট আইডিয়া হিসেবে শুরু হয়নি। শুরু হয়েছিল একটা বিরক্তি থেকে: আমার কাজ ছড়িয়ে-ছিটিয়ে ছিল নানা প্রোফাইল, ফাইল আর চ্যাটে — কোনোটাই মনে হচ্ছিল না নিজের ঠিকানা। এইচএসসিতে পড়তে পড়তেই ঠিক করলাম একটা ওয়েবসাইট বানাবো, যেখানে সবকিছু থাকবে — পোর্টফোলিও, লেখা, ছবি, আর আমার ওয়েব ডেভেলপমেন্ট সার্ভিস — এবং কোড ছোঁয়া ছাড়াই যেকোনো কিছু বদলাতে পারবো।
এই লেখাটি সেই প্রজেক্টের সৎ বিল্ড লগ।
## টেক স্ট্যাক, এবং কেন
সাইটটি Next.js 16-এর App Router ব্যবহার করে তৈরি, ভাষা TypeScript, আর ডিজাইনে Tailwind CSS। Next.js বেছে নেওয়ার প্রধান কারণ সার্ভার-সাইড রেন্ডারিং: কেউ — কিংবা কোনো সার্চ ক্রলার — পেজ খুললে আসল কনটেন্ট যেন HTML-এই আগে থেকেই থাকে, লোডিং স্পিনারের আড়ালে নয়। TypeScript বড় কোডবেসকে সুষ্ঠু রাখে, আর Tailwind ডিজাইন সিস্টেমকে সামঞ্জস্যপূর্ণ রাখে।
ব্যাকএন্ডে Supabase — ডেটার জন্য PostgreSQL, অ্যাডমিন এরিয়ার জন্য অথেনটিকেশন। ছবি থাকে Cloudinary-তে; স্বয়ংক্রিয় ফরম্যাট ও কোয়ালিটি অপটিমাইজেশনের কারণে ভারী ফটো গ্যালারিও ধীরগতির সংযোগে দ্রুত খোলে।
পুরো সাইট দ্বিভাষিক — বাংলা ও ইংরেজি — next-intl দিয়ে। শুধু অনুচ্ছেদ নয়: রুট, মেটাডেটা, Open Graph ট্যাগ ও স্ট্রাকচার্ড ডেটা — সবই দুই ভাষায় থাকে; ক্যানোনিক্যাল URL ও hreflang দুটি সংস্করণকে একই পেজ হিসেবে চিহ্নিত করে।
## পেছনের অ্যাডমিন CMS
আপনি যা দেখছেন তার প্রায় সবই একটি ব্যক্তিগত অ্যাডমিন ড্যাশবোর্ড থেকে নিয়ন্ত্রিত: হিরো সেকশন, অ্যাবাউট পেজ, এক্সপেরিয়েন্স টাইমলাইন, গ্যালারি, সার্ভিস ও প্রাইসিং, পোর্টফোলিও প্রজেক্ট, FAQ, লিগ্যাল পেজ, এমনকি এই ব্লগও। প্রতিটি সেকশন সার্ভার ও API — দুই জায়গাতেই স্কিমা যাচাই হয়, তাই ভুল কনফিগ কখনোই পাবলিক সাইট ভাঙতে পারে না — তখন নিরাপদ ডিফল্টে ফিরে যায়।
কয়েকটি ফিচার আমি প্রতিদিন ব্যবহার করি: প্যাকেজ মূল্য হিসাব করা লাইভ অর্ডার উইজার্ড, নিজস্ব ইভেন্ট ট্র্যাকিংয়ে তৈরি অ্যানালিটিক্স ভিউ, নিউজলেটার সিস্টেম, এবং Nuva — কর্নারে থাকা AI অ্যাসিস্ট্যান্ট, যে আমার ও আমার কাজের প্রশ্নের উত্তর দেয়।
## যে সিদ্ধান্তগুলো কাজে লেগেছে
তিনটি পছন্দ সবচেয়ে বেশি কাজ দিয়েছে। প্রথম, যেখানে দরকার সেখানে SSR: পোর্টফোলিও, এক্সপেরিয়েন্স ও ব্লগ সার্ভারেই রেন্ডার হয়, তাই পেজ ক্রলযোগ্য ও দ্রুত। দ্বিতীয়, কনটেন্টের একটিমাত্র উৎস: প্রতিটি পাবলিক পেজ সেই একই যাচাইকৃত কনফিগ পড়ে যা অ্যাডমিন প্যানেল লেখে। তৃতীয়, সৎ স্ট্রাকচার্ড ডেটা — JSON-LD-তে একটিমাত্র Person ও একটি WebSite এন্টিটি, সবখানে আইডি দিয়ে রেফারেন্স করা, ফলে কোনো তথ্যের দ্বন্দ্ব নেই।
## যা শিখলাম
পরীক্ষার পাশাপাশি সিস্টেম বানাতে গিয়ে শেখা হয় নির্মম অগ্রাধিকার: প্রতিটি ফিচারের সবচেয়ে ছোট কার্যকর সংস্করণ আগে দাও, পরে ধাপে ধাপে উন্নত করো। আরেকটা শিক্ষা — কোডের চেয়ে কনটেন্ট কঠিন: বাস্তব প্রজেক্টের বাস্তব বর্ণনা দুই ভাষায় লিখতে ডেটাবেস বাঁধার চেয়ে বেশি সময় লাগে।
রাহাতভার্স একটি চলমান প্রজেক্ট। পুরো কাঠামোটা দেখুন পোর্টফোলিও কেস স্টাডিতে, চালিয়ে দেখুন আমার সার্ভিস কাজের অর্ডার উইজার্ড, অথবা ঘুরে দেখুন GitHub-এর কোড। কোনো বাগ চোখে পড়লে জানাবেন — এভাবেই এটি আরও ভালো হয়।
রাহাত আহমেদ — সুনামগঞ্জের একজন শিক্ষার্থী, শিক্ষক ও ওয়েব ডেভেলপার, এবং রাহাতভার্সের স্রষ্টা। শিক্ষা, সমাজসেবা ও প্রযুক্তির মাধ্যমে মানুষের পাশে দাঁড়ানোই তার লক্ষ্য।