DEV Community: Mehedi Hasan Joy

API in Next.js vs. Separate Backend (Bangla)🚀

Mehedi Hasan Joy — Mon, 17 Mar 2025 07:58:28 +0000

Next.js-এর "api" ফোল্ডার এবং আলাদা Node.js + Express.js ব্যাকএন্ড রাখার মধ্যে পার্থক্য ও কোনটি বেস্ট প্র্যাকটিস, তা বুঝতে হলে কয়েকটি বিষয় বিবেচনা করতে হবে।

🔹 Next.js API Routes ("/api" ফোল্ডার)

Next.js-এর /api ফোল্ডারের মাধ্যমে আপনি সার্ভারলেস ফাংশন তৈরি করতে পারেন। এখানে আপনি এক্সপ্রেস বা অন্য কোনো সার্ভার সেটআপ ছাড়াই API তৈরি করতে পারবেন।

✅ Next.js API Routes-এর সুবিধা:

একই কোডবেসে API এবং UI – API আলাদা ব্যাকএন্ড সার্ভার ছাড়াই Next.js-এর মধ্যেই থাকে।
সার্ভারলেস ফাংশন সাপোর্ট – Next.js API Routes Vercel বা Netlify-তে সহজে ডিপ্লয় করা যায়।
SSR ও API একসাথে ব্যবহার করা যায় – আপনি সার্ভার-সাইড রেন্ডারিং (SSR) ও API একত্রে ব্যাবহার করতে পারেন।
কম্প্লেক্স ব্যাকএন্ড না থাকলে উপযুক্ত – ছোট বা মিডিয়াম লেভেলের প্রোজেক্টের জন্য ভালো।

❌ দুর্বলতা:

যদি আপনার ব্যাকএন্ড অনেক বেশি কমপ্লেক্স হয় (যেমন: ওয়েবসকেট, ব্যাকগ্রাউন্ড টাস্ক, হেভি অথেন্টিকেশন), তাহলে /api ফোল্ডার সীমাবদ্ধ হয়ে যাবে।
Next.js API Routes সাধারণত লং রানিং প্রসেস (যেমন: ভিডিও প্রসেসিং, ব্যাকগ্রাউন্ড জব) হ্যান্ডেল করতে পারে না।

🔹 আলাদা Backend (Node.js + Express.js)

এখানে আপনি সম্পূর্ণ আলাদা একটি Node.js + Express.js সার্ভার তৈরি করেন, যেখানে API এবং ফ্রন্টএন্ড আলাদা থাকে।

✅ এর সুবিধা:

স্কেলেবল – বড় স্কেলের অ্যাপ ডেভেলপমেন্টের জন্য ভালো।
সর্বোচ্চ কাস্টমাইজেশন – Next.js API Routes-এর তুলনায় Express.js দিয়ে আপনি অনেক বেশি কাস্টম লজিক লিখতে পারবেন।
সিকিউরিটি – ব্যাকএন্ড আলাদা হলে সিকিউরিটি কনফিগারেশন আরও ভালোভাবে হ্যান্ডেল করা যায়।
ব্যাকগ্রাউন্ড প্রসেস সহজ – ভিডিও প্রসেসিং, ব্যাচ প্রসেসিং, ওয়েবসকেট, জব স্ক্যজ্যুলিং সহজে হ্যান্ডেল করা যায়।
ডাটাবেস কনফিগারেশন – ডেডিকেটেড ব্যাকএন্ড থাকায় ডাটাবেস কানেকশন ও ORM (যেমন Prisma, Mongoose) আরও ভালোভাবে ব্যবহার করা যায়।

❌ দুর্বলতা:

ডিপ্লয়মেন্ট বেশি কষ্টকর – Next.js API Routes Vercel বা Netlify-তে সরাসরি হোস্ট করা যায়, কিন্তু Express.js আলাদা সার্ভারে (যেমন: DigitalOcean, AWS, Heroku) হোস্ট করতে হয়।
এক্সট্রা মেইনটেন্যান্স দরকার – আলাদা সার্ভার মেইনটেন করা লাগবে।

🔥 তাহলে কোনটি ভালো?

✅ ছোট প্রোজেক্ট বা MVP (Minimal Viable Product) → Next.js API Routes

✅ বড় স্কেলের SaaS, ই-কমার্স, রিয়েল-টাইম অ্যাপ → Express.js + আলাদা Backend

আপনার যদি একটা ছোট বা মিডিয়াম-সাইজ প্রোজেক্ট থাকে যেখানে API বেশি কমপ্লেক্স না, তাহলে Next.js API Routes বেস্ট।

কিন্তু যদি বড় স্কেল প্রোজেক্ট বানাচ্ছেন যেখানে ওয়েবসকেট, ব্যাকগ্রাউন্ড জব, ভিডিও প্রসেসিং, মাল্টিপল সার্ভিস ইন্টিগ্রেশন লাগবে, তাহলে Express.js ব্যাকএন্ড ভালো অপশন হবে।

Best Practice: API in Next.js vs. Separate Backend

Mehedi Hasan Joy — Mon, 17 Mar 2025 07:41:33 +0000

🔹 Next.js API Routes ("/api" Folder)

Next.js provides an "/api" folder where you can define API routes without needing a separate backend server. These API routes act like serverless functions and can handle requests just like a traditional backend.

✅ Advantages of Next.js API Routes:

API & UI in the same codebase – You don’t need a separate backend; everything is managed within Next.js.
Supports serverless functions – Works seamlessly with platforms like Vercel and Netlify for easy deployment.
Combines SSR and API – You can use server-side rendering (SSR) and API endpoints together.
Great for simple or medium-level applications – If your project doesn't require a complex backend, this is an easy solution.

❌ Disadvantages:

Not ideal for complex backend logic like WebSockets, background tasks, or advanced authentication.
Long-running processes (e.g., video processing, job scheduling) are difficult to handle with Next.js API Routes.

🔹 Separate Backend (Node.js + Express.js)

This approach involves creating a standalone Node.js + Express.js backend, which operates separately from the frontend.

✅ Advantages of a Separate Backend:

Highly scalable – Ideal for large-scale applications.
More customization – Unlike Next.js API Routes, you have full control over backend logic.
Better security – A dedicated backend allows for more advanced security configurations.
Handles background processes efficiently – Great for video processing, batch jobs, WebSockets, and complex tasks.
Better database management – Works well with dedicated database connections using Prisma, Mongoose, PostgreSQL, MongoDB, etc.

❌ Disadvantages:

More complex deployment – Unlike Next.js API Routes (which can be deployed on Vercel/Netlify), a separate backend requires hosting on DigitalOcean, AWS, Heroku, etc.
Additional maintenance required – You have to manage the backend server separately.

🔥 Which One is Better?

✅ For small projects or MVPs (Minimal Viable Products) → Next.js API Routes

✅ For large-scale SaaS, eCommerce, or real-time applications → Express.js + Separate Backend

If you’re building a small or medium-sized application where API logic is simple, Next.js API Routes are a great choice.

However, if you're working on a large-scale project requiring WebSockets, background tasks, video processing, or multiple services, then a separate Express.js backend is the better option.

👉 **What kind of project are you working on?

জাভাস্ক্রিপ্ট ফাংশন কী? (জয়)

Mehedi Hasan Joy — Fri, 20 Dec 2024 16:47:30 +0000

জাভাস্ক্রিপ্ট ফাংশন কী? (জয়)
জাভাস্ক্রিপ্ট ফাংশন হলো প্রোগ্রামিংয়ের একটি গুরুত্বপূর্ণ অংশ। আপনি যদি একেবারে নতুন হন এবং কোনো ধারণা না থাকে, তবে চিন্তার কিছু নেই। এরপর আশা করি আপনার কোন ভয় আপনার থাকবেনা!

ফাংশন কী?
ফাংশন হলো এমন একটি কোডের ব্লক যা একটি নির্দিষ্ট কাজ সম্পন্ন করে। এটিকে আপনি একটি জাদুর বাক্স হিসাবে কল্পনা করতে পারেন, যেখানে আপনি কিছু ইনপুট দিবেন এবং এটি কাজ করে ফলাফল আউটপুট পাবেন।বিষয়টা একটু সহজ ভাবে বলতে গেলে মনে করুন,একবার আপনি বাক্সটি তৈরি করলেন এবং আপনি এটি বারবার ব্যবহার করতে চান।
যেমন: ধরুন, আপনার মা প্রতিদিন সুস্বাদু খাবার রান্না করেন। প্রতিবার, তিনি পেঁয়াজ কাটেন, মশলা মেশান এবং রান্না করেন। এখন, যদি তাঁর কাছে একটি জাদুর বাক্স থাকত যেখানে তিনি শুধু লিখতেন "মুরগির কারি রান্না করো" এবং খাবার প্রস্তুত হয়ে যেত, তাহলে সময় এবং পরিশ্রম কতটা বাঁচত!
জাভাস্ক্রিপ্টে, ফাংশন সেই জাদুর বাক্স।

জাভাস্ক্রিপ্টে ফাংশন কিভাবে কাজ করে
১. জাদুর বাক্স তৈরি করা(ফাংশন ডিফাইন করা):
প্রথমে, আমরা ফাংশন ডিফাইন করি যেন জাভাস্ক্রিপ্ট জানে কী কাজ করতে হবে।
উদাহরণ:


function sayHello() {
    console.log("হ্যালো, কেমন আছেন?");
}

এখানে:
function: ফাংশন ডিফাইন করার জন্য কিওয়ার্ড( এটা লিখতে হবেই)।
sayHello: ফাংশনের নাম (আপনি যেকোনো অর্থবহ নাম দিতে পারেন)।
{}: এই কার্লি ব্রেসের ভেতরেই ফাংশনের কি কাজ করবে সেটা লেখা হয়।

২. ফাংশন কল করা (জাদুর বাক্স খোলা):
ফাংশন ডিফাইন করার পরে, আপনাকে এটি কল করতে হবে যেন এটি কাজ করে।
উদাহরণ:
sayHello(); // আউটপুট: হ্যালো, কেমন আছেন?
যখনই আপনি sayHello() লিখবেন, ফাংশনটি চালু হবে এবং "হ্যালো, কেমন আছেন?" প্রিন্ট করবে।

ফাংশনের ভিন্ন ধরন
১. প্যারামিটারযুক্ত ফাংশন (ইনপুটসহ জাদুর বাক্স):
যখন ফাংশন কোনো ডেটা নেয় এবং তার উপর কাজ করে।
উদাহরণ:

function greet(name) {
    console.log("হ্যালো, " + name + "! কেমন আছো?");
}

greet("রাহুল"); // আউটপুট: হ্যালো, রাহুল! কেমন আছো?
এখানে name হলো প্যারামিটার, যা আপনি ফাংশনে ইনপুট দেন।
২. রিটার্নযুক্ত ফাংশন (ফলাফল দেয়ার জাদুর বাক্স):
যখন ফাংশন কোনো ফলাফল প্রয়োজনীয় জায়গায় ফেরত পাঠায়।
উদাহরণ:

function addNumbers(a, b) {
    return a + b;
}
let sum = addNumbers(5, 7);
console.log(sum); // আউটপুট: ১২
return কিওয়ার্ড ফাংশনের ফলাফল ফেরত দেয়।

ফাংশনের আরেকটি উদাহরণ দিয়ে বোঝার চেষ্টা করি
ধরুন, আপনি একটি চায়ের দোকান চালান। প্রতিবার আপনাকে বলতেই হয়:
চা বানাও
চিনি দাও
দুধ দাও
স্টির করো

আপনি যদি এটি একটি ফাংশনে লিখে রাখেন, তাহলে কী সহজ হবে না?

example 1:

function makeEasyTea(){
console.log("পানি গরম করো")
console.log("চিনি দাও")
console.log("মসলা দাও")
console.log("চা পাতা দাও")
console.log("আপনার চা হয়ে গেছে")

}

makeEasyTea();// output:
 পানি গরম করো,
 চিনি দাও
 মসলা দাও
 চা পাতা দাও
 আপনার চা হয়ে গেছে

এখন আপনি শুধু makeEasyTea() কল করবেন এবং এখানে আপনি তাকে বলে দিছেন চা করতে সে তার মতো করে চা তৈরি করে দিবে একটু পরে তারমত করে চা তৈরি হয়ে যাবে। কী মজার, তাই না?
এখন আপনি চাচ্ছেন আমি রং চা খাবোনা আমি খাবো দুধ খাবো,আপনার কোন একব্যক্তি বললো আমি রং চাই খাবো, এমতবস্থায় কি করবেন? এজন্য ও আছে ফাংশনের আরেক মজার উপায়। আপনি জাদুর বাক্সকে বলবেন, চা করে দাও তখন এই জাদুর বাক্স কথাও বলতে পারে প্রতি বার যখন আপনি একে কিছু করতে বলবে তখন সে বলে আমাকে কিছু দাও যদি না দাও তাহলে আমি নিজের মতো করে করব।
কিন্তু আপনি তো তার মতো করে তৈরি করা চা খাবেন না , যে রং চা করে কিন্তু আপনি খাবেন দুধ চা তাই এবার আপনি তাকে বলে দিবেন আমি দুধ চা খাবো ,ব্যাচ। চলুন দেখি

function makeTea(এইধরনের) {
    console.log(এইধরনের + " চা বানানো হচ্ছে...");
}

এখন আপনি একে কল করার সময় বলে দিবেন কি চা খাবেন যেমন
makeTea("দুধের") আবার বললেন makeTea("রং") makeTea("দুধের"); // আউটপুট: দুধের চা বানানো হচ্ছে... makeTea("রং"); // আউটপুট: রং চা বানানো হচ্ছে...

ফাংশন হলো আপনার কোডের মস্তিষ্ক। এটি কাজ সহজ করে, সময় বাঁচায় এবং প্রোগ্রামকে আরও গোছানো করে। আপনি চায়ের দোকান চালান বা যোগফল বের করুন, ফাংশন সবসময় সাহায্য করবে।
তাই, কোডে কোনো কাজ বারবার করতে হলে মনে রাখুন: "হাত দিয়ে করব কেন? ফাংশন ব্যবহার করব!" 😄

Closure in Javascript(Bangla) With Joy

Mehedi Hasan Joy — Thu, 22 Aug 2024 19:57:30 +0000

ক্লোজার কি? জাভাস্ক্রিপ্টের কিছু অদ্ভুত আচরণের মধ্যে অসাধারণ একটা কনসেপ্ট হলো ক্লোজার,

এ কেমন কথা, অদ্ভুত আবার অসাধারণ হয় কিভাবে ?

চলুন আজকে একটু ক্লোজার নিয়ে গল্প করি, প্রথমে আসি অদ্ভুত আচরণ নিয়ে,জাভাস্ক্রিপ্টে লোকালি ডিক্লেয়ার করা কোন ভেরিয়েবল ততক্ষণ সক্রিয় থাকে যতক্ষণ এটি তার প্যারেন্ট এক্সিকিউশন কন্টেক্সটের অংশ হিসেবে রেফারেন্স করা হয় বা প্রয়োজন হয়। কনসেপ্টটি মাথার উপর দিয়ে গেল? চলুন আমরা আগে একটা কাউন্টার ফাংশন তৈরি করার চেষ্টা করি।
‌‌‌‌

  function sum(){
    let a=10;
    let b=20
    return a+b
 }
 console.log(sum()) //30

উপরক্ত ফাংশনের ডিক্লেয়ার করা ‌‌a‌ এবং b ফাংশন এক্সিকিউশন কন্টেক্সটে এলাইভ ছিল। যখনি ফাংশনের কার্যসম্পাদন শেষ তখনি জাভাস্ক্রিপ্ট ভেরিয়েবল দুটোকে গার্বেজ কালেক্টর দ্বারা অপসারিত করা হয়। চলুন এরকম আরেক ভিন্ন ধর্মি কার্যক্রম দেখি:-

 function sum(){
    let a=10;
    let b=20;
    let c=12;
    return a+b;
}
console.dir(sum())

একটু খেয়াল করলে দেখতে পাবো উপরে আমরা c শুধু ডিকলার করেই রাখছি এটাকে কোন কাজে লাগাইনি,এখন যেটাকে কাজে লাগালাম না সেটা ডিকলার করে কেন শুধু শুধু মেমোরি দখল করাব? যেহেতু let c =12 এর ব্যবহার হচ্ছেনা জাভাস্ক্রিপ্ট ইন্টেলিজেন্টলি এটা এটাকে গার্বেজ হিসেবে কাউন্ট করে ডাস্টবিনে ফেলে দেয়। তবে এ ডাস্টবিন দেখা যায় না , এজন্য জাভাস্ক্রিপ্টকে গার্বেজ কালেক্টর ল্যাংগুয়েজ ও বলে।তবে শুধু let c=12 ই না সকল ভেরিয়েবলই এক্সিকিউট করার পর গার্বেজ কালেক্টর দ্বারা অপসারিত হয়, যদি না ভেরিয়বলকে রেফারেন্স না করে।

সবই তো বুঝলাম তাহলে ক্লোজার কি? এটা কখন ব্যবহার করব?

চলুন ক্লোজারকে ওপেন হার্ট সার্জারি করি। যেহেতু প্রোগ্রামেটিক তথ্য গুলো গানিতিক ভাবে ভালো বোঝানো যায় তাই চলুন একটু গানিতিক ভাবে এর মূল উৎপাটন করি।

মনে করুন আপনি একটি কাউন্টার তৈরি করবেন যেটা প্রতিবার ক্লিক করার মাধ্যমে এর ভ্যালু পরিবর্তন হবে। কথা শুনে মনে হতে পারে এ এমন কি কাজ ? এটাতো খুবই সহজ! হ্যা ক্লোজার ও খুবই সহজ শুধু কনসেপ্টা নিয়েই একটু কনফিউশন।

let a=10;

function sum(){
return a=a+1
}
console.log(sum()) // 11
console.log(sum()) // 12
console.log(sum()) // 13

কি মনে হয় কাউন্টারেবল ফাংশন হয়েগেছে। আপাত দৃষ্টিতে হলেও a এর ভ্যালু চাইলেই অন্য কোন ফাংশন বা ম্যানুয়ালি পরিবর্তন করা যাবে, যেমন

let a=10;

function sum(){
return a=a+1
}
console.log(sum()) // 11
console.log(sum()) // 12
console.log(sum()) // 13
 a++
 a++
 a++
 console.log(a) // 16

এখানে ম্যানুয়ালি a এর মান পরিবর্তন করা হয়েছে চাইলে আরো কয়েকভাবে এটা করা যেত। কিন্তু আপনি চাচ্ছেন কাউন্টার কেবল আপনার নির্দেশে নির্দিষ্ট কোন ফাংশনের ফাংশনালিটির উপর ভিত্তি করে a এর ভ্যালু পরিবর্তন করবেন।
মানে a এর অ্যাক্সেস শুধু আপনার কাছেই থাকবে। এমতাবস্থায় আপনার মনে হতে পারে let a =10 এটাকে ফাংশন স্কোপের মধ্যে নিলেই তো হয়। চলুন দেখি কি হয়।

function sum(){
    let a=10;
return a=a+1
}
console.log(sum()) // 11
console.log(sum()) // 11
console.log(sum()) // 11

যা ! একি হলো? কেন কাজ করতেছে না? এতশত প্রশ্নের সিম্পল উত্তর হলো ফাংশন এক্সিকিউশন পলিসি। এটা আবার কি? sum ফাংশন যখন কল করা হয় তখন প্রথমেই দেখে let a =10 সুতরাং সে a এর ভ্যালু ১০ সেট করে এবং পরে যখন a=a+1 লজিক পায়, তখন লজিক অনুযায়ি a এর ভ্যালু ১ বাড়ায় এবং ১১ রিটার্ন করে। এই কাজটাই ফাংশন রিপিটেডলি করতে থাকে। মনে হতে পারে কেন a এর ভ্যালু জাভাস্ক্রিপ্ট মনে রাখেনা? এবিষয় আমরা প্রথমেই আলোচনা করেছি

যখনি ফাংশনের কার্যসম্পাদন শেষ তখনি জাভাস্ক্রিপ্ট ভেরিয়েবল গুলো গার্বেজ কালেক্টর দ্বারা অপসারিত করা হয়। যেকারনে পুন:রায় ভ্যারিয়েবল নতুন করে এক্সিউট হয়।

এরকম কোন সিস্টেম হলো কেমন হতো, যদি ফাংশনকে একবার কল করব কিন্তু লজিকটা বার বার ব্যবহার করব। বিষয়টা তাহলে মজার হতো না?

এখন তাহলে উপায়?
এই মহা সমস্যার উপায় নিয়েই হাজির ক্লোজার। প্রথমে নিচের কোড ফলো করুন।

function sum(){
    let a=10;
    function logic(){
        return a=a+1
    }
    return logic
}
const logic=sum()
console.log(logic()) // 11
console.log(logic()) // 12

আরে বাহ! কোড কাজ করতেছে। কিন্তু কনফিউশন তো দুর হলো না, কিভাবে কাজ করলো? ক্লোজার কোথায়? কোডে মুলত sum ফাংশনকে কল করে logic নামক ভ্যারিয়েবলে স্টোর হচ্ছে । sum ফাংশনকে কল করলে মুলত sum এর মধ্যে থাকা logic ফাংশনই রিটার্ন করে।
এখন চলুন একটা একটা করে প্রশ্নের উত্তর দেই। কিভাবে কাজ করল?
ক্লোজার ফাংশনটির মধ্যে থাকা লোকাল ভেরিয়েবলগুলি "লক" করা হয় এবং এক্সিকিউশন কন্টেক্সট শেষ হওয়ার পরেও সেই ভেরিয়েবলগুলিকে রেফারেন্স করা যায়। এটিই ক্লোজারের মূল কাজ।
জাভাস্ক্রিপ্টে, আমি স্কোপের যেখানে অবস্থান করছি তার উপরের সকল স্কোপের অ্যাক্সেস থাকে (স্কোপ কি? এবিষয় না হয় আরেকদিন আলোচনা করব) উপরের কোডে logic ফাংশন let a =10 এর অ্যাক্সেস পাচ্ছে। যেহেতু এটা তার উপরের লোকাল স্কোপে অবস্থান করতেছে।তাই logic ফাংশন a এর ভ্যালু পরিবর্তন করতে পারতেছে। এখন আবার আপনার মাথায় প্রশ্ন আসতে পারে (যেহেতু আপনি ব্রিলিয়েন্ড জাভাস্ক্রিপ্ট লার্নার) যে একটু আগে বললেন ফাংশনের এক্সিকিউশন শেষ হয়ে গেলে ভেরিয়েবল গুলো destroy হয়ে যায়, তাহলে কিভাবে a এর ভ্যালু অপরিবর্তিত থাকছে? এখানেই মুলত ক্লোজার কাজ করছে যা দেখতে হলে আপনাকে console.dir(logic) করতে হবে।

Scopes এর ভিতরে আমরা দেখতে পাচ্ছি closure নামক এক ভদ্রলোক sum নামক ফাংশনকে রেফার করে a এর বর্তমান ভ্যালু দেখাচ্ছে। এতো আলোচনা যাকে নিয়ে সে কিনা এখানে এসে বসে আছে।বুঝলাম! তো এখানে বসে আসলে কি করছে?
সে তেমন কিছুই করতেছেনা শুধু let a ভ্যারিয়েবলের সাথে সুসম্পর্ক বজায় রেখে তার সাথে গানিতিক হিসাব করতেছে। ক্লোজার মুলত let a ভেরিয়েবলকে রেফারেন্স করে রাখছে যাতে গার্বেজ কালেক্টর এটাকে destroy না করে।যেহেতু let a কে নিয়েই logic function কাজ করতেছে তাই ক্লোজার let a কে রেফারেন্স হিসেবে রেখে প্রতিবার let a এর ভ্যালু আপডেট করতেছে। এই সিম্পল কাজটাই ক্লোজার।রেফারেন্স করে ভেরিয়বলকে এলাইভ রাখছে।
আর যেহেতু a কে ফাংশনের মধ্যে ডিকলার করা হয়েছে, তাই চাইলেও তাকে বাইরে থেকে মডিফাই করা যাবে না এবং লজিক অনুযায়ি আমাদের কাউন্টারও তৈরি করা হলো।মেইন ফাংশন বার বার কল না করেও অন্তবর্তি ভ্যারিয়েবলের ভ্যালু পরিবর্তন করতে পারলাম। আমাদের সকল সমস্যা সমাধান করলো Closure।

আমাদের আজকের আড্ডাটা এখানেই রাখলাম।অন্যদিন অন্য কোন টপিক নিয়ে আবার আড্ডা দিব।