Ein Monorepo verbessert Code-Sharing, Refactoring und Abhängigkeitsverwaltung. In 2026 dominieren Turborepo, Nx und pnpm Workspaces.
Turborepo: Einrichtung und Struktur
Turborepo ist für JavaScript/TypeScript-Monorepos optimiert.
# Create a new Turborepo monorepo
npx create-turbo@latest my-monorepo
cd my-monorepo
# Or add Turborepo to an existing monorepo
npm install turbo --save-dev
# Directory structure
my-monorepo/
├── apps/
│ ├── web/ # Next.js app
│ └── docs/ # Docs site
├── packages/
│ ├── ui/ # Shared React components
│ ├── utils/ # Shared utilities
│ └── tsconfig/ # Shared TypeScript configs
├── turbo.json # Pipeline configuration
└── package.json # Root workspace configTurborepo-Pipeline-Konfiguration
Die turbo.json-Pipeline definiert Task-Abhängigkeiten und gecachte Ausgaben.
// turbo.json — pipeline definition
{
"$schema": "https://turbo.build/schema.json",
"pipeline": {
"build": {
"dependsOn": ["^build"], // ^ means: run in dependency order
"outputs": [".next/**", "!.next/cache/**", "dist/**"]
},
"test": {
"dependsOn": ["^build"],
"inputs": ["src/**/*.tsx", "src/**/*.ts", "test/**/*.ts"]
},
"lint": {
"outputs": []
},
"dev": {
"cache": false, // Never cache dev servers
"persistent": true // Long-running task
},
"type-check": {
"dependsOn": ["^build"],
"outputs": []
}
},
"globalEnv": ["NODE_ENV", "DATABASE_URL"]
}
# Run all build tasks (uses cache if inputs unchanged)
npx turbo build
# Run only for specific apps/packages
npx turbo build --filter=web
npx turbo build --filter=...ui # ui and all its dependents
# Force re-run (bypass cache)
npx turbo build --force
# View task graph
npx turbo build --graphNx: Einrichtung und Projektgraph
Nx bietet mehr Funktionen: Code-Generatoren, Affected-Befehle.
# Create Nx monorepo
npx create-nx-workspace@latest my-nx-repo --preset=ts
# Add Nx to existing monorepo
npx nx@latest init
# Generate a new app or library
nx generate @nx/next:app web
nx generate @nx/react:library ui
nx generate @nx/node:library utils
# nx.json — workspace configuration
{
"tasksRunnerOptions": {
"default": {
"runner": "nx/tasks-runners/default",
"options": {
"cacheableOperations": ["build", "test", "lint", "e2e"],
"parallel": 3
}
}
},
"targetDefaults": {
"build": {
"dependsOn": ["^build"],
"inputs": ["production", "^production"]
}
},
"namedInputs": {
"default": ["{projectRoot}/**/*", "sharedGlobals"],
"production": ["default", "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)"],
"sharedGlobals": []
}
}pnpm Workspaces: Leichtgewichtiger Ansatz
pnpm Workspaces bietet nativen Monorepo-Support ohne zusätzliche Tools.
# pnpm-workspace.yaml
packages:
- 'apps/*'
- 'packages/*'
# Install all workspace dependencies
pnpm install
# Add a package to a specific workspace
pnpm add react --filter @myapp/web
# Add a local workspace package as dependency
# In apps/web/package.json:
{
"dependencies": {
"@myapp/ui": "workspace:*"
}
}
# Run scripts across all packages
pnpm --filter '*' run build
pnpm --filter './apps/*' run dev
pnpm --filter '...@myapp/ui' run test # ui and dependents
# Publish all public packages
pnpm publish -r --access publicEntfernter Cache
Remote-Caching teilt Build-Artefakte zwischen Entwicklern und CI.
# Turborepo Remote Cache (Vercel)
# Enables sharing build cache across developers and CI
# 1. Link to Vercel
npx turbo login
npx turbo link
# 2. Now CI builds share cache with local dev:
# CI run: builds from scratch, uploads to cache
# Developer: pulls cache, gets instant builds
# Self-host with Turborepo Remote Cache (open source)
# docker run -p 3000:3000 ducktors/turborepo-remote-cache
# .turbo/config.json (auto-generated by turbo link)
{
"teamId": "team_xxx",
"apiUrl": "https://vercel.com"
}
# Nx Cloud (similar offering from Nx)
# nx connect-to-nx-cloud
# Provides remote caching + task distributionVersionierung mit Changesets
Changesets ist das Standardtool für Versionierung und Veröffentlichung in Monorepos.
# Changesets — versioning and publishing for monorepos
# Works with npm/yarn/pnpm workspaces
pnpm add -D @changesets/cli
pnpm changeset init
# When you make a change that needs a version bump:
pnpm changeset
# → Interactive prompt: which packages changed, bump type (major/minor/patch)
# Creates a markdown file in .changeset/ describing the change
# Example .changeset/funny-bears-dance.md:
---
"@myapp/ui": minor
"@myapp/utils": patch
---
Add new Button component with loading state
# Apply changesets (bumps versions, updates CHANGELOG.md)
pnpm changeset version
# Publish all changed packages
pnpm changeset publishTurborepo vs Nx vs pnpm Workspaces
| Feature | Turborepo | Nx | pnpm Workspaces |
|---|---|---|---|
| Setup complexity | Low | Medium | Very Low |
| Task caching | Built-in | Built-in | Manual/external |
| Remote cache | Vercel (free tier) | Nx Cloud (paid) | None built-in |
| Code generators | No | Yes (rich) | No |
| Affected detection | Basic (--filter) | Advanced (nx affected) | Via Changesets |
| Language support | JS/TS focused | Polyglot | Any |
| Learning curve | Low | Medium-High | Low |
Best Practices
- Mit pnpm Workspaces + Turborepo beginnen.
- Klare Grenzen definieren: Shared Packages in packages/, Apps in apps/.
- Changesets für Versionierung verwenden.
- Remote-Caching früh aktivieren.
- Jedes package.json explizit halten.
FAQ
Turborepo oder Nx?
Turborepo ist für die meisten JS-Projekte einfacher. Nx hat mehr Features für große Repos.
Monorepo vs Polyrepo?
Monorepo speichert allen Code in einem Repository.
Wie funktioniert Turborepo-Caching?
Turborepo hasht die Eingaben jeder Task und stellt Ausgaben aus dem Cache wieder her.
Verschiedene Paketmanager im Monorepo?
Nein. Alle Workspaces müssen denselben Paketmanager verwenden.
Umgebungsvariablen im Monorepo?
Umgebungsvariablen pro App definieren und in turbo.json globalEnv auflisten.