Next.js এর হাতেখড়ি (পর্ব ১৩) – Environment Variables ও Production Checklist

Next.js Environment Variables ও Production Checklist

পর্ব ১২-তে ডেপ্লয়মেন্ট দেখেছিলাম। কিন্তু "কাজ করছে" আর "প্রোডাকশনের জন্য প্রস্তুত" — দুটো ভিন্ন জিনিস। এই পর্বে দুটো বিষয় দেখব — Next.js-এ Environment Variables কীভাবে সঠিকভাবে ম্যানেজ করতে হয়, আর লাইভ করার আগে একটা চেকলিস্ট, যা এই পুরো সিরিজে শেখা সবকিছুকে একসাথে জোড়া লাগায়।

Next.js-এ Environment Variables — বেসিক

.env.local ফাইলে ভ্যারিয়েবল রাখা হয়, Cloudflare এর হাতেখড়ি পর্ব ১০-এর .dev.vars-এর মতোই একটা ধারণা।

# .env.local
FIREBASE_DB_SECRET=your-secret-here
NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSy...
# .gitignore
.env.local
.env*.local

NEXT_PUBLIC_ — পর্ব ১২-এর নিয়মের পুরো ব্যাখ্যা

এটা এই সিরিজের সবচেয়ে গুরুত্বপূর্ণ নিয়মগুলোর একটা, তাই আবার স্পষ্ট করে বলা দরকার —

  • NEXT_PUBLIC_ প্রিফিক্স থাকলে — বিল্ড টাইমে সরাসরি ব্রাউজারের JavaScript-এ বসিয়ে দেওয়া হয়, Client Component থেকে অ্যাক্সেসযোগ্য
  • প্রিফিক্স না থাকলে — শুধু সার্ভারে (Server Component, API Route, Server Action, Middleware) অ্যাক্সেসযোগ্য, ব্রাউজারে কখনো পাঠানো হয় না
// ✅ ঠিক — Firebase config পাবলিক তথ্য (Firebase এর হাতেখড়ি পর্ব ১-এর নোট মনে আছে?)
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
};

// ❌ ভুল — এই সিক্রেট ব্রাউজারে কখনো যাওয়া উচিত না
const secret = process.env.NEXT_PUBLIC_FIREBASE_DB_SECRET; // "PUBLIC" লিখে ভুল করলে বিপদ!

// ✅ ঠিক — সিক্রেট শুধু সার্ভার-সাইড কোডে
// app/api/admin/route.js-এ
const secret = process.env.FIREBASE_DB_SECRET; // "PUBLIC" নেই, তাই সার্ভারেই থাকবে

সবচেয়ে সাধারণ প্রোডাকশন ভুল — ভুলবশত একটা সিক্রেটের নামে NEXT_PUBLIC_ বসিয়ে ফেলা, যা সেই সিক্রেটকে সরাসরি সবার সামনে এক্সপোজ করে দেয়। প্রতিবার নতুন ভ্যারিয়েবল যোগ করার সময় নিজেকে জিজ্ঞেস করুন — "এটা কি ব্রাউজারে দেখা গেলে সমস্যা হবে?"

একাধিক Environment ফাইল

ফাইল কখন ব্যবহার হয় Git-এ commit হয়?
.env সব এনভায়রনমেন্টে ডিফল্ট হ্যাঁ (সেনসিটিভ কিছু না থাকলে)
.env.local নিজের লোকাল মেশিনে ওভাররাইড না
.env.production শুধু প্রোডাকশন বিল্ডে সেনসিটিভ না হলে হ্যাঁ

বাস্তবে, Cloudflare Workers-এ ডেপ্লয় করলে (পর্ব ১২) — সিক্রেট এই ফাইলগুলোর বদলে সরাসরি wrangler secret put দিয়েই রাখা হয়, লোকাল ফাইলগুলো শুধু ডেভেলপমেন্টের জন্য।

প্রোডাকশন চেকলিস্ট — সিরিজের সবকিছু একসাথে

একটা Next.js প্রজেক্ট লাইভ করার আগে, এই সিরিজের প্রতিটা পর্বের সাথে সম্পর্কিত একটা চেক তালিকা —

রেন্ডারিং ও ডেটা (পর্ব ৩-৬)

  • ☐ প্রতিটা পেজ সঠিক কৌশলে আছে কিনা (SSG/SSR/ISR) যাচাই করা হয়েছে
  • ☐ প্রতিটা মূল রুটে loading.js আর error.js আছে
  • ☐ fetch কলে try/catch বা এরর হ্যান্ডলিং আছে

Auth ও Security (পর্ব ৯-১০)

  • ☐ সব প্রোটেক্টেড রুট Middleware দিয়ে coverage-এ আছে
  • ☐ সেশন কুকি httpOnlysecure
  • ☐ Firebase RTDB-এর Security Rules (Firebase এর হাতেখড়ি পর্ব ৮) প্রোডাকশন-রেডি, test mode-এর খোলা Rules না
  • ☐ প্রতিটা NEXT_PUBLIC_ ভ্যারিয়েবল ইচ্ছাকৃতভাবে পাবলিক করা হয়েছে, ভুলবশত না

পারফরম্যান্স ও SEO (পর্ব ১১)

  • ☐ সব ছবিতে next/image ব্যবহার হয়েছে, সাধারণ <img> না
  • ☐ প্রতিটা পাবলিক পেজে metadata/generateMetadata সেট করা আছে
  • ☐ Open Graph ছবি/টাইটেল যাচাই করা হয়েছে (সোশ্যাল শেয়ারে কেমন দেখায়)

ডেপ্লয়মেন্ট (পর্ব ১২)

  • ☐ সঠিক ডেপ্লয়মেন্ট পদ্ধতি বেছে নেওয়া হয়েছে (static export বনাম vinext+Workers)
  • ☐ প্রোডাকশন সিক্রেট wrangler secret দিয়ে সেট করা, কোডে হার্ডকোড না
  • ☐ CI/CD পাইপলাইন lint/build ব্যর্থ হলে ডেপ্লয় থামে (Cloudflare এর হাতেখড়ি পর্ব ২)
  • ☐ Custom domain ও SSL কাজ করছে (Cloudflare এর হাতেখড়ি পর্ব ৩)

ইন্টারেক্টিভ — প্রোডাকশন-রেডি চেকলিস্ট

নিজের প্রজেক্টের জন্য নিচের তালিকা চেক করে দেখো কতটা প্রস্তুত।

নিজে চেষ্টা করো

Exercise:

  1. নিজের প্রজেক্টের সব Environment Variable একটা তালিকায় লেখো, প্রতিটার পাশে ঠিক করো এটা NEXT_PUBLIC_ হওয়া উচিত কিনা।
  2. উপরের চেকলিস্ট নিজের একটা বাস্তব প্রজেক্টে প্রয়োগ করো, প্রতিটা আইটেম সরাসরি প্রজেক্টে গিয়ে যাচাই করো।
  3. .env.local ফাইল বানাও, .gitignore-এ আছে কিনা নিশ্চিত করো, তারপর git status দিয়ে যাচাই করো এটা ট্র্যাক হচ্ছে না।

পরের পর্বে যা থাকছে

সিরিজের শেষ পর্বে আমরা সব একসাথে জুড়ে একটা পূর্ণাঙ্গ প্রজেক্ট বানাব — Firebase Auth + RTDB, একটা প্রোটেক্টেড ড্যাশবোর্ড, Server Actions দিয়ে ফর্ম, আর Cloudflare-এ লাইভ ডেপ্লয়মেন্ট — শুরু থেকে শেষ পর্যন্ত।

একটি মন্তব্য পোস্ট করুন

নবীনতর পূর্বতন

যোগাযোগ ফর্ম