Next.js-এর সাথে Monorepo ও Turborepo.

Monorepo আসলে কী? (এক ছাদের নিচে সব সংসার)

সহজ কথায়, Monorepo (Monolithic Repository) হলো এমন একটি আর্কিটেকচার, যেখানে আপনার সমস্ত প্রজেক্ট এবং প্যাকেজ আলাদা আলাদা রিপোজিটরিতে না থেকে একটি মাত্র গিটহাব রিপোজিটরির ভেতরে থাকে।

বিষয়টা একটা বড় বহুতল শপিং মলের মতো। নিচতলায় আপনার মেইন ওয়েবসাইট, দোতলায় অ্যাডমিন প্যানেল, আর তিনতলায় মোবাইল অ্যাপের কোড। ভবন একটাই, কিন্তু ভেতরে যার যার কাজের জায়গা আলাদা।

তাহলে Turborepo-র কাজ কী?

এখন আপনার মনে প্রশ্ন আসতে পারে— "এত বড় কোডবেস একসাথে রাখলে তো প্রজেক্ট স্লো হয়ে যাবে, রান বা বিল্ড হতে খবর হয়ে যাবে!"

এই ভয় দূর করতেই এসেছে Turborepo। এটি Next.js-এর নির্মাতা প্রতিষ্ঠান Vercel-এর তৈরি একটি হাই-পারফরম্যান্স বিল্ড সিস্টেম। টার্বোরেপো এক অদ্ভুত সুন্দর ‘ক্যাশিং (Caching)’ প্রযুক্তি ব্যবহার করে। আপনি কোডের যে অংশটুকু পরিবর্তন করেননি, টার্বোরেপো সেটা দ্বিতীয়বার বিল্ড করে না; আগের মেমোরি থেকে সরাসরি দেখিয়ে দেয়। ফলে যে প্রজেক্ট বিল্ড হতে আগে ৫ মিনিট লাগতো, টার্বোরেপো সেটা কয়েক সেকেন্ডে নামিয়ে আনে।

একটি Next.js প্রজেক্টে এটি কীভাবে কাজ করে?

একটি স্ট্যান্ডার্ড টার্বোরেপো প্রজেক্টের ফোল্ডার স্ট্রাকচার দেখতে সাধারণত এরকম হয়:

my-workspace/

├── apps/

│ ├── web/ <-- আপনার মূল Next.js ওয়েবসাইট

│ └── admin/ <-- Next.js অ্যাডমিন ড্যাশবোর্ড

│

└── packages/

├── ui/ <-- শেয়ার করা বাটন, ইনপুট, কার্ড (Design System)

└── config/ <-- কমন সেটিংস (ESLint, Tailwind Config)

ম্যাজিকটা ঘটে ঠিক এখানে:

আপনার apps/web প্রজেক্টের ভেতরে নতুন করে কোনো বাটন তৈরি করার দরকার নেই। আপনি সরাসরি কোডে লিখবেন:

অর্থাৎ, আপনার ওয়েবসাইট কোড ধার নিচ্ছে packages/ui ফোল্ডার থেকে। কালকে যদি আপনি packages/ui-তে বাটনটার ডিজাইন বদলান, আপনার মূল ওয়েবসাইট এবং অ্যাডমিন প্যানেল—দুটি প্রজেক্টেই তা স্বয়ংক্রিয়ভাবে আপডেট হয়ে যাবে!

কেন আপনার পরবর্তী প্রজেক্টে এটি ব্যবহার করা উচিত?

১. কোড রি-ইউজেবিলিটি (Code Reusability): একই কোড বারবার লেখার দিন শেষ। একবার একটি ‘ডিজাইন সিস্টেম’ বানাবেন, আর আপনার কোম্পানির ১০টা প্রজেক্টে সেটা ব্যবহার করবেন।
২. ব্র্যান্ড কনসিস্টেন্সি (Brand Consistency): বড় টিমে কাজ করার সময় ডিজাইনের সমতা বজায় রাখা খুব কঠিন। এই সিস্টেমে পুরো টিমের প্রজেক্ট জুড়ে একই ফন্ট, একই কালার এবং একই ইউজার এক্সপেরিয়েন্স বজায় থাকে।
৩. অবিশ্বাস্য গতি: টার্বোরেপোর রিমোট ক্যাশিংয়ের কারণে লোকাল পিসি এবং প্রোডাকশন সার্ভার—উভয় জায়গাতেই কোড বিল্ড হয় রকেটের গতিতে।
৪. সহজ মেইনটেইন্যান্স: প্রজেক্টের সমস্ত থার্ড-পার্টি প্যাকেজ (যেমন: React বা Tailwind-এর ভার্সন) একটি নির্দিষ্ট জায়গা থেকে নিয়ন্ত্রণ করা যায়। ভার্সন মিসম্যাচ হওয়ার কোনো ভয় থাকে না।

এটি কি সবার জন্য?

ছোট্ট একটি সতর্কর্তা: আপনি যদি মাত্র ২-৩ পেজের একটি সাধারণ পোর্টফোলিও বা ল্যান্ডিং পেজ বানান, তবে মনোরেপো ব্যবহার করাটা হবে "মশা মারতে কামান দাগানোর" মতো।

এটি মূলত তাদের জন্য—

• যারা বড় কোনো SaaS প্রজেক্ট বা E-commerce তৈরি করছেন।

• যাদের একটি প্রজেক্টের সাথে যুক্ত একাধিক সাব-সাইট বা ড্যাশবোর্ড রয়েছে।

• যারা প্রজেক্টটিকে ভবিষ্যতে অনেক বড় স্কেলে নিয়ে যাওয়ার স্বপ্ন দেখছেন।

শেষ কথা

বর্তমান সফটওয়্যার ইন্ডাস্ট্রিতে গুগল, মাইক্রোসফট থেকে শুরু করে শপিফাই কিংবা উবারের মতো টেক জায়ান্টরা এই Monorepo আর্কিটেকচারেই কাজ করে। Next.js-এর সাথে Turborepo-র এই কম্বিনেশন তাই শুধু একটি সাময়িক ‘ট্রেন্ড’ নয়, বরং স্কেলেবল ওয়েব ডেভেলপমেন্টের ভবিষ্যৎ।

আপনার বর্তমান প্রজেক্ট কি চিরাচরিত নিয়মে চলছে, নাকি মনোরেপোতে শিফট করার কথা ভাবছেন? আপনার কোনো অভিজ্ঞতা বা প্রশ্ন থাকলে নিচে কমেন্টে জানাতে পারেন!