কিভাবে 2026 সালে একটি Turborepo Monorepo সেট আপ করবেন: Next.js এবং প্যাকেজ সহ সম্পূর্ণ গাইড

2026 সালে জাভাস্ক্রিপ্ট/টাইপস্ক্রিপ্ট মনোরেপোসের জন্য Turborepo হল স্ট্যান্ডার্ড — বিল্ড ক্যাশিং একা বড় কোডবেসে CI টাইম 70-90% কমিয়ে দেয়। এই নির্দেশিকাটি স্ক্র্যাচ থেকে দুটি Next.js অ্যাপ এবং ভাগ করা প্যাকেজ সহ একটি উত্পাদন-প্রস্তুত মনোরেপো সেট আপ করে৷

আমরা কি তৈরি করছি

my-monorepo/
├── apps/
│   ├── web/          # Next.js marketing site
│   └── docs/         # Next.js documentation site
├── packages/
│   ├── ui/           # Shared React components
│   ├── utils/        # Shared utilities
│   └── tsconfig/     # Shared TypeScript configs
├── turbo.json        # Turborepo configuration
└── package.json      # Workspace root

ধাপ 1: Turborepo দিয়ে শুরু করুন

# Create from official template
npx create-turbo@latest my-monorepo
cd my-monorepo

# Or manual setup
mkdir my-monorepo && cd my-monorepo
pnpm init
# pnpm is recommended for monorepos — faster, better disk usage

ধাপ 2: Root package.json

{
  "name": "my-monorepo",
  "private": true,
  "scripts": {
    "build":   "turbo build",
    "dev":     "turbo dev",
    "lint":    "turbo lint",
    "test":    "turbo test",
    "format":  "prettier --write "**/*.{ts,tsx,md}""
  },
  "devDependencies": {
    "turbo":     "^2.0.0",
    "prettier":  "^3.0.0",
    "typescript": "^5.0.0"
  },
  "packageManager": "pnpm@9.0.0"
}

ধাপ 3: pnpm ওয়ার্কস্পেস কনফিগারেশন

# pnpm-workspace.yaml
packages:
  - "apps/*"
  - "packages/*"

ধাপ 4: turbo.json — পাইপলাইন কনফিগারেশন

{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env.*local"],
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],    // build dependencies first
      "outputs": [".next/**", "dist/**", "!.next/cache/**"],
      "env": ["NODE_ENV", "NEXT_PUBLIC_*"]  // cache key includes these env vars
    },
    "dev": {
      "cache":     false,   // never cache dev servers
      "persistent": true    // keep running (don't wait for exit)
    },
    "lint": {
      "dependsOn": ["^lint"]
    },
    "test": {
      "dependsOn": ["build"],
      "outputs":   ["coverage/**"],
      "inputs":    ["src/**/*.tsx", "src/**/*.ts", "test/**/*.ts"]
    },
    "typecheck": {
      "dependsOn": ["^build"],
      "outputs":   []
    }
  }
}

ধাপ 5: শেয়ার করা টাইপস্ক্রিপ্ট কনফিগার প্যাকেজ

mkdir -p packages/tsconfig
cat > packages/tsconfig/package.json << 'EOF'
{
  "name": "@mymonorepo/tsconfig",
  "version": "0.0.0",
  "private": true,
  "files": ["*.json"]
}
EOF

// packages/tsconfig/base.json
{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Default",
  "compilerOptions": {
    "target":           "ES2022",
    "lib":              ["ES2022", "DOM"],
    "module":           "ESNext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "allowJs":          true,
    "strict":           true,
    "esModuleInterop":  true,
    "skipLibCheck":     true,
    "noEmit":           true
  }
}

// packages/tsconfig/nextjs.json
{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Next.js",
  "extends":      "./base.json",
  "compilerOptions": {
    "plugins": [{ "name": "next" }],
    "jsx":     "preserve",
    "module":  "ESNext"
  }
}

ধাপ 6: শেয়ার্ড UI প্যাকেজ

mkdir -p packages/ui/src

cat > packages/ui/package.json << 'EOF'
{
  "name": "@mymonorepo/ui",
  "version": "0.0.0",
  "private": true,
  "exports": {
    "./button":   "./src/button.tsx",
    "./card":     "./src/card.tsx"
  },
  "scripts": {
    "lint":      "eslint src/",
    "typecheck": "tsc --noEmit"
  },
  "devDependencies": {
    "@mymonorepo/tsconfig": "workspace:*",
    "typescript": "^5.0.0"
  },
  "peerDependencies": {
    "react": "^18.0.0 || ^19.0.0"
  }
}
EOF

// packages/ui/src/button.tsx
import { type ButtonHTMLAttributes } from "react";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "secondary";
}

export function Button({ variant = "primary", children, ...props }: ButtonProps) {
  return (
    <button
      className={variant === "primary" ? "btn-primary" : "btn-secondary"}
      {...props}
    >
      {children}
    </button>
  );
}

ধাপ 7: শেয়ার করা প্যাকেজ ব্যবহার করে Next.js অ্যাপ

# apps/web/package.json
{
  "name": "web",
  "dependencies": {
    "@mymonorepo/ui":      "workspace:*",
    "@mymonorepo/utils":   "workspace:*",
    "next":                "^15.0.0",
    "react":               "^19.0.0"
  },
  "devDependencies": {
    "@mymonorepo/tsconfig": "workspace:*"
  }
}

// apps/web/tsconfig.json
{
  "extends": "@mymonorepo/tsconfig/nextjs.json",
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

// apps/web/app/page.tsx
import { Button } from "@mymonorepo/ui/button";  // shared component

export default function HomePage() {
  return (
    <main>
      <h1>Welcome</h1>
      <Button variant="primary">Get Started</Button>
    </main>
  );
}

ধাপ 8: মনোরেপো চালানো

# Install all dependencies
pnpm install

# Run all dev servers in parallel
pnpm dev

# Build all apps and packages (with caching)
pnpm build

# Build only one app
pnpm turbo build --filter=web

# Build only changed packages (incremental)
pnpm turbo build --filter="[HEAD^1]"

ধাপ 9: CI এর জন্য রিমোট ক্যাশিং

# Turbo remote cache with Vercel (free tier available)
npx turbo login
npx turbo link

# Now CI can use remote cache — artifacts shared across team
# .github/workflows/ci.yml
- name: Build
  run: pnpm turbo build
  env:
    TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
    TURBO_TEAM:  ${{ vars.TURBO_TEAM }}

অনুশীলনে ক্যাশে হিট হার: 5 জন ডেভেলপারের একটি দলে, CI-তে 70-80% ক্যাশে হিট রেট সাধারণ। একটি বিল্ড যা প্রথম রানে 8 মিনিট সময় নেয় তা প্রায়শই ক্যাশে হিট সহ 1 মিনিটের কম সময় নেয় — প্রতিদিন একাধিকবার CI চালানো যে কোনও দলের জন্য ROI তাৎপর্যপূর্ণ।

প্রায়শই জিজ্ঞাসিত প্রশ্ন

প্রশ্ন: মনোরেপোসের জন্য পিএনপিএম বনাম এনপিএম বনাম সুতা?
উত্তর: pnpm হল 2026-এ মনোরেপোসের জন্য স্পষ্ট পছন্দ — সিমলিঙ্কড নোড_মডিউলগুলি 60-80% কম ডিস্ক স্পেস বনাম npm ব্যবহার করে, ওয়ার্কস্পেস প্রোটোকল (workspace:*) আরও নির্ভরযোগ্য, এবং ইনস্টলেশন উল্লেখযোগ্যভাবে দ্রুততর৷ বেশিরভাগ নতুন Turborepo প্রকল্প pnpm ব্যবহার করে।

প্রশ্ন: আমার কখন মনোরেপো ব্যবহার করা উচিত?
উত্তর: যখন আপনার কাছে 2+ সম্পর্কিত প্রকল্প শেয়ারিং কোড থাকে (প্রকার, উপাদান, ইউটিলিটি)। একক প্রকল্প: বিরক্ত করবেন না। 2-3টি ঘনিষ্ঠভাবে সম্পর্কিত অ্যাপ: মনোরেপো দ্রুত পরিশোধ করে। ব্রেক-ইভেন পয়েন্টটি মোটামুটিভাবে “আপনি রেপোর মধ্যে ইউটিলিটি ফাংশন অনুলিপি করতে করতে ক্লান্ত।”

প্রশ্নঃ আমি কিভাবে একটি নতুন প্যাকেজ যোগ করব?
A: mkdir packages/my-package && cd packages/my-package && pnpm init, এটি কর্মক্ষেত্রে যোগ করুন, তারপরpnpm install. প্যাকেজটি অবিলম্বেworkspace:*এর মাধ্যমে উপলব্ধ অন্যান্য প্যাকেজে।

প্রশ্নঃ Turborepo কি Nx এর চেয়ে ভালো?
উত্তর: Turborepo সেট আপ এবং কনফিগার করা সহজ। Nx-এ আরও বিল্ট-ইন জেনারেটর এবং একটি সমৃদ্ধ প্লাগইন ইকোসিস্টেম রয়েছে। ছোট দল যারা সরলতা চায় তাদের জন্য Turborepo; জটিল বিল্ড গ্রাফ সহ বড় প্রতিষ্ঠানের জন্য Nx। উভয়ই উৎপাদন-প্রমাণিত।

প্রশ্ন: আমি কীভাবে মনোরেপো থেকে পৃথক অ্যাপ্লিকেশন স্থাপন করব?
উত্তর: Vercel এবং Netlify-এর স্থানীয় মনোরেপো সমর্থন রয়েছে — অ্যাপ সাবডিরেক্টরিতে “রুট ডিরেক্টরি” কনফিগার করুন। বিকল্পভাবে,COPY . .এর সাথে ডকার ব্যবহার করুন মনোরেপো মূলে এবংturbo build --filter=app-name.

উপসংহার

টার্বোরেপো অপ্রয়োজনীয় বিল্ডগুলি বাদ দিয়ে এবং পরিষ্কারভাবে কোড ভাগ করে মাল্টি-অ্যাপ জাভাস্ক্রিপ্ট বিকাশকে রূপান্তরিত করে। সেটআপ — pnpm ওয়ার্কস্পেস, শেয়ার করা tsconfig প্যাকেজ, শেয়ার্ড UI প্যাকেজ, turbo.json পাইপলাইন, রিমোট ক্যাশিং — কনফিগার করতে প্রায় 2 ঘন্টা সময় নেয় কিন্তু পরবর্তী প্রতিটি বিল্ডে ফেরত দেয়। দ্রুততম পথের জন্য তৈরি-টার্বো টেমপ্লেট দিয়ে শুরু করুন, অথবা আপনার প্রকৃত প্রকল্প কাঠামোর সাথে মেলে এমন একটি সম্পূর্ণ কাস্টমাইজড সেটআপের জন্য এই নির্দেশিকা অনুসরণ করুন।