2026 में टर्बोरेपो मोनोरेपो कैसे स्थापित करें: नेक्स्ट.जेएस और पैकेज के साथ पूरी गाइड

टर्बोरेपो 2026 में जावास्क्रिप्ट/टाइपस्क्रिप्ट मोनोरेपोज़ के लिए मानक है – अकेले कैशिंग का निर्माण बड़े कोडबेस पर सीआई समय को 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: टर्बोरेपो

# 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: रूट पैकेज.जेसन

{
  "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-workspace.yaml
packages:
  - "apps/*"
  - "packages/*"

चरण 4: टर्बो.जसन – पाइपलाइन कॉन्फ़िगरेशन

{
  "$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: साझा यूआई पैकेज

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: सीआई के लिए रिमोट कैशिंग

# 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 डेवलपर्स की टीम में, सीआई पर 70-80% की कैश हिट दरें आम हैं। किसी निर्माण को पहली बार चलाने में 8 मिनट लगते हैं, कैश हिट के साथ अक्सर 1 मिनट से कम समय लगता है – प्रति दिन कई बार सीआई चलाने वाली किसी भी टीम के लिए आरओआई महत्वपूर्ण है।

अक्सर पूछे जाने वाले प्रश्न

प्रश्न: मोनोरेपोज़ के लिए पीएनपीएम बनाम एनपीएम बनाम यार्न?
ए: पीएनपीएम 2026 में मोनोरेपोज़ के लिए स्पष्ट विकल्प है – सिम्लिंक्ड नोड_मॉड्यूल एनपीएम की तुलना में 60-80% कम डिस्क स्थान का उपयोग करते हैं, वर्कस्पेस प्रोटोकॉल (workspace:*) अधिक विश्वसनीय है, और इंस्टॉलेशन काफी तेज है। अधिकांश नए टर्बोरेपो प्रोजेक्ट पीएनपीएम का उपयोग करते हैं।

प्रश्न: मुझे मोनोरेपो का उपयोग कब करना चाहिए?
उत्तर: जब आपके पास 2+ संबंधित प्रोजेक्ट शेयरिंग कोड (प्रकार, घटक, उपयोगिताएँ) हों। एकल परियोजना: परेशान मत होइए। 2-3 निकट से संबंधित ऐप्स: मोनोरेपो शीघ्र भुगतान करता है। ब्रेक-ईवन बिंदु मोटे तौर पर यह है कि “आप रिपोज़ के बीच उपयोगिता कार्यों की प्रतिलिपि बनाते-बनाते थक गए हैं।”

प्रश्न: मैं नया पैकेज कैसे जोड़ूँ?
A: mkdir packages/my-package && cd packages/my-package && pnpm init, इसे कार्यक्षेत्र में जोड़ें, फिरpnpm install. पैकेजworkspace:*के माध्यम से तुरंत उपलब्ध है अन्य पैकेजों में.

प्रश्न: क्या टर्बोरेपो एनएक्स से बेहतर है?
उ: टर्बोरेपो को स्थापित करना और कॉन्फ़िगर करना आसान है। एनएक्स में अधिक अंतर्निर्मित जनरेटर और एक समृद्ध प्लगइन पारिस्थितिकी तंत्र है। छोटी टीमों के लिए टर्बोरेपो जो सादगी चाहते हैं; जटिल बिल्ड ग्राफ़ वाले बड़े संगठनों के लिए एनएक्स। दोनों उत्पादन-सिद्ध हैं।

प्रश्न: मैं मोनोरेपो से अलग-अलग ऐप्स कैसे तैनात करूं?
उ: वर्सेल और नेटलिफाई के पास मूल मोनोरेपो समर्थन है – ऐप उपनिर्देशिका में “रूट डायरेक्टरी” को कॉन्फ़िगर करें। वैकल्पिक रूप से, डॉकर का उपयोगCOPY . .के साथ करें मोनोरेपो रूट पर औरturbo build --filter=app-name.

निष्कर्ष

टर्बोरेपो अनावश्यक बिल्ड को हटाकर और कोड को साफ़-साफ़ साझा करके मल्टी-ऐप जावास्क्रिप्ट विकास को बदल देता है। सेटअप – पीएनपीएम वर्कस्पेस, साझा टीएसकॉन्फिग पैकेज, साझा यूआई पैकेज, टर्बो.जेसन पाइपलाइन, रिमोट कैशिंग – कॉन्फ़िगर करने में लगभग 2 घंटे लगते हैं लेकिन प्रत्येक बाद के निर्माण में भुगतान मिलता है। सबसे तेज़ पथ के लिए क्रिएट-टर्बो टेम्पलेट से शुरुआत करें, या पूरी तरह से अनुकूलित सेटअप के लिए इस गाइड का पालन करें जो आपकी वास्तविक परियोजना संरचना से मेल खाता हो।