Submit Test Bangla Blog Post

ছবিটি দেখে সমস্যাটি একদম পরিষ্কার বোঝা যাচ্ছে! আপনি ব্রাউজারে foxcoder.me/graphql লিখে এন্টার দিয়েছেন, এবং যে 404 পেজটি এসেছে সেটি কিন্তু ওয়ার্ডপ্রেসের নয়, সেটি আপনার Next.js (Vercel) ফ্রন্টএন্ডের 404 পেজ (কারণ উপরে আপনার ওয়েবসাইটের লোগো ‘AI Affiliate Insights’ দেখা যাচ্ছে)।

সমস্যাটি কোথায় হয়েছে? হেডলেস (Headless) ওয়েবসাইটের প্রধান নিয়ম হলো: ফ্রন্টএন্ড (Next.js) এবং ব্যাকএন্ড (WordPress) হুবহু একই লিংকে থাকতে পারে না। আপনি আপনার মেইন ডোমেইন foxcoder.me-কে Vercel-এর সাথে কানেক্ট করে ফেলেছেন। তাই এখন এই লিংকে গেলে Vercel তার পেজগুলো দেখাচ্ছে। যেহেতু Next.js-এর ভেতরে /graphql নামে কোনো পেজ আমরা বানাইনি, তাই সে “404 Page not found” দেখাচ্ছে।

এখন সঠিক সমাধান কী? আপনাকে আপনার ওয়ার্ডপ্রেস (WordPress) ড্যাশবোর্ডটিকে মেইন ডোমেইন থেকে সরিয়ে একটি সাব-ডোমেইনে (Sub-domain) নিয়ে যেতে হবে। নিচে ধাপে ধাপে সমাধান দেওয়া হলো:

ধাপ ১: ওয়ার্ডপ্রেসের জন্য সাব-ডোমেইন তৈরি করা

১. আপনার হোস্টিংয়ের কন্ট্রোল প্যানেলে (Hostinger/cPanel) লগইন করুন। ২. সেখানে foxcoder.me এর আন্ডারে একটি সাব-ডোমেইন তৈরি করুন। নাম দিতে পারেন wp.foxcoder.me বা admin.foxcoder.me। ৩. আপনার বর্তমান ওয়ার্ডপ্রেস সাইটটিকে এই সাব-ডোমেইনে ইনস্টল বা ট্রান্সফার করুন।

ধাপ ২: আসল API লিংক টেস্ট করা

ওয়ার্ডপ্রেস সাব-ডোমেইনে রেডি হওয়ার পর, সেখানে WPGraphQL প্লাগিনটি ইনস্টল ও অ্যাক্টিভ করুন। এরপর ব্রাউজারে গিয়ে চেক করুন: https://wp.foxcoder.me/graphql (যদি এখানে JSON ডেটা বা গ্রাফকিউএল-এর স্ক্রিন আসে, তার মানে আপনার API ১০০% পারফেক্ট)।

ধাপ ৩: Vercel-এ লিংক আপডেট করা

১. আবার Vercel-এর Settings > Environment Variables-এ যান। ২. আগের দেওয়া ভুল লিংকটি (https://foxcoder.me/graphql) এডিট করুন। ৩. সেখানে আপনার নতুন সাব-ডোমেইনের লিংকটি বসিয়ে দিন: https://wp.foxcoder.me/graphql ৪. সেভ করে Deployments থেকে সাইটটি আরেকবার Redeploy করে নিন।