cPanel-এ Next.js Static Web App ডিপ্লয় করার সহজ ও পূর্ণাঙ্গ গাইড

আপনি যদি ফ্রন্টএন্ডের জন্য Next.js ব্যবহার করেন এবং আপনার ব্যাকএন্ড/API আলাদা কোনো সার্ভারে চলে, তবে cPanel-এ জটিল Node.js কনফিগারেশনের কোনো প্রয়োজন নেই। Next.js-এর Static Export ফিচার ব্যবহার করে খুব সহজেই সম্পূর্ণ ফ্রন্টএন্ডকে বিশুদ্ধ HTML, CSS ও JavaScript ফাইলে রূপান্তর করে সাধারণ শেয়ার্ড হোস্টিং বা cPanel-এ হোস্ট করা যায়।

এই আর্টিকেলে আমরা ধাপে ধাপে শিখব কীভাবে প্রজেক্ট কনফিগার করা থেকে শুরু করে .env হ্যান্ডলিং এবং cPanel-এ ফাইল আপলোড পর্যন্ত সবকিছু নির্বিঘ্নে সম্পন্ন করতে হয়।

---

১. কেন Static Export বেছে নেবেন?

• Node.js সার্ভারের ঝামেলামুক্ত: ব্যাকগ্রাউন্ড পোর্ট রান রাখা বা মেমোরি ক্র্যাশের কোনো ভয় নেই।
• সুপারফাস্ট লোডিং স্পিড: ক্লাউডফ্লেয়ার বা সাধারণ সার্ভার থেকে ব্রাউজার সরাসরি প্রাক-রেন্ডার করা HTML/JS ক্যাশ করে দ্রুত সার্ভ করতে পারে।
• শেয়ার্ড হোস্টিং ফ্রেন্ডলি: যেকোনো সস্তা বা সাধারণ cPanel হোস্টিংয়ে সরাসরি চালানো যায়।
• ড্যাশবোর্ড ও ক্লায়েন্ট অ্যাপের জন্য পারফেক্ট: ব্রাউজার থেকেই আলাদা ব্যাকএন্ড API-তে ডেটা আদান-প্রদান করা যায়।

---

২. Next.js কনফিগারেশন (next.config.js)

স্ট্যাটিক ফাইল জেনারেট করার জন্য প্রজেক্টের রুট ডিরেক্টরিতে থাকা next.config.js (বা next.config.mjs) ফাইলে সামান্য পরিবর্তন আনতে হবে।

/** @type {import('next').NextConfig} */
const nextConfig = {
  // স্ট্যাটিক এক্সপোর্ট এনাবল করার ফ্ল্যাগ
  output: 'export',

  // স্ট্যাটিক হোস্টিংয়ে ইমেজ অপটিমাইজেশন সার্ভার থাকে না, তাই এটি আন-অপটিমাইজড করতে হবে
  images: {
    unoptimized: true,
  },

  // পেজগুলোর শেষে স্ল্যাশ যুক্ত করার জন্য (যেমন: /about/index.html)
  trailingSlash: true,
};

module.exports = nextConfig;

---

৩. Environment Variables (.env) ও আলাদা API URL সেটআপ

যেহেতু স্ট্যাটিক সাইটে কোনো রানটাইম Node.js সার্ভার থাকে না, তাই ব্রাউজারে API এক্সেস করার জন্য ভ্যারিয়েবলের নামের শুরুতে অবশ্যই NEXT_PUBLIC_ থাকতে হবে।

১. প্রজেক্ট রুটে একটি .env.production ফাইল তৈরি করুন:

NEXT_PUBLIC_API_BASE_URL=https://api.yourdomain.com/v1

২. আপনার কোডে বা API রিকোয়েস্টে এটি ব্যবহার করুন:

const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL;

export async function getDashboardData() {
  const res = await fetch(`${BASE_URL}/analytics`);
  if (!res.ok) throw new Error('API রিকোয়েস্ট ব্যর্থ হয়েছে');
  return res.json();
}

সতর্কতা: NEXT_PUBLIC_ ভ্যারিয়েবল বিল্ড ফাইলের ভেতরে ব্রাউজার সোর্সে উন্মুক্ত থাকে। তাই এতে কোনো ডাটাবেজ পাসওয়ার্ড বা প্রাইভেট সিক্রেট কি রাখবেন না।

---

৪. স্ট্যাটিক বিল্ড তৈরি করা

আপনার লোকাল টার্মিনালে বিল্ড কমান্ড চালান:

npm run build

বিল্ড সফলভাবে শেষ হলে প্রজেক্টে out নামে একটি ফোল্ডার তৈরি হবে। এই ফোল্ডারটিতেই আপনার ওয়েবসাইটের সমস্ত ক্যাশেবল স্ট্যাটিক অ্যাসেট থাকবে।

---

৫. ফাইল প্যাকেজিং

1. আপনার প্রোজেক্টের out ফোল্ডারের ভেতরে প্রবেশ করুন।
2. ভেতরের সমস্ত ফাইল ও সাবফোল্ডার (যেমন: index.html, _next, 404.html ইত্যাদি) সিলেক্ট করুন।
3. রাইট-ক্লিক করে কম্প্রেস করে একটি .zip ফাইল বানান (যেমন: build.zip)।

(মনে রাখবেন: পুরো out ফোল্ডারটিকে বাইরে থেকে জিপ করবেন না, কেবল ভেতরের উপাদানগুলো জিপ করবেন।)

---

৬. cPanel-এ আপলোড ও আনজিপ করা

1. আপনার হোস্টিং অ্যাকাউন্টের cPanel-এ লগইন করুন।
2. Files সেকশন থেকে File Manager ওপেন করুন।
3. ডোমেনের রুট ডিরেক্টরিতে যান:
   • মেইন ডোমেন হলে: public_html
   • সাবডোমেন বা অ্যাডঅন ডোমেন হলে: নির্ধারিত ডিরেক্টরি।
4. আগের কোনো অপ্রয়োজনীয় ফাইল থাকলে মুছে ফেলুন।
5. উপরের মেন্যু থেকে Upload-এ ক্লিক করে আপনার তৈরি করা build.zip আপলোড করুন।
6. আপলোড শেষ হলে ফাইলটি সিলেক্ট করে Extract করুন।

---

৭. Client-Side Routing ও 404 ফিক্স (.htaccess)

Next.js স্ট্যাটিক অ্যাপ্লিকেশনে ইউজার যখন কোনো ইনার পেজে (যেমন: /dashboard) গিয়ে ব্রাউজার রিফ্রেশ দেয়, তখন সার্ভার সরাসরি ফাইল না পেয়ে 404 Not Found দেখাতে পারে।

এটি সমাধান করার জন্য:

1. public_html-এ .htaccess ফাইলটি খুঁজুন (না পেলে cPanel File Manager-এর Settings থেকে Show Hidden Files অন করুন)।
2. ফাইল না থাকলে + File-এ ক্লিক করে .htaccess নামে ফাইল তৈরি করুন।
3. ফাইলে নিচের কোডটুকু পেস্ট করে সংরক্ষণ করুন:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /

  # বিদ্যমান ফাইল বা ফোল্ডার থাকলে সরাসরি লোড করবে
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d

  # বাকি সব রিকোয়েস্ট index.html-এ পাঠিয়ে দেবে
  RewriteRule ^ index.html [L]
</IfModule>

---

উপসংহার

আপনার Next.js স্ট্যাটিক সাইটটি এখন পুরোপুরি কার্যকর এবং দ্রুত গতিতে লাইভ থাকবে। ভবিষ্যতে কোডে কোনো পরিবর্তন বা API ডোমেন বদল করলে, লোকাল মেশিনে পুনরায় npm run build দিয়ে নতুন out ফোল্ডারের ফাইলগুলো cPanel-এ রিপ্লেস করলেই আপডেট সম্পন্ন হয়ে যাবে।