# 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`) ফাইলে সামান্য পরিবর্তন আনতে হবে।

```javascript
/** @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` ফাইল তৈরি করুন:

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

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

```typescript
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_` ভ্যারিয়েবল বিল্ড ফাইলের ভেতরে ব্রাউজার সোর্সে উন্মুক্ত থাকে। তাই এতে কোনো ডাটাবেজ পাসওয়ার্ড বা প্রাইভেট সিক্রেট কি রাখবেন না।

---

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

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

```bash
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. ফাইলে নিচের কোডটুকু পেস্ট করে সংরক্ষণ করুন:

```apache
<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-এ রিপ্লেস করলেই আপডেট সম্পন্ন হয়ে যাবে।