⚡Build Tools

Turborepo für Monorepos

Mehrere Apps, ein Repository — April 2026

Wenn du Frontend, Backend und Shared Packages in einem Repo verwalten willst, ist Turborepo dein bester Freund. Es cached Build-Ergebnisse, parallelisiert Tasks und sorgt dafür, dass nur geänderte Packages neu gebaut werden.

Pro-Tip — Der schnelle Weg
Turborepo cached Builds lokal UND remote — wenn dein Kollege den gleichen Code schon gebaut hat, nutzt du seinen Cache.
Seite 1
01

Turborepo Monorepo erstellen

Starte ein neues Monorepo mit der offiziellen Turborepo-Vorlage.

npx create-turbo@latest mein-monorepo
cd mein-monorepo


# Struktur:
# apps/
# web/ → Next.js Frontend
# api/ → Backend
# packages/
# ui/ → Shared Komponenten
# config/ → Shared Config
# tsconfig/ → Shared TypeScript Config
02

Turbo Pipeline konfigurieren

In turbo.json definierst du welche Tasks wie zusammenhängen und was gecached wird.

// turbo.json
{
 "tasks": {
 "build": {
 "dependsOn": ["^build"],
 "outputs": [".next/**", "dist/**"]
 },
 "dev": {
 "cache": false,
 "persistent": true
 },
 "lint": {
 "dependsOn": ["^build"]
 },
 "test": {
 "dependsOn": ["build"]
 }
 }
}
03

Shared Package nutzen

Erstelle ein Shared UI-Package und importiere es in deiner App.

// packages/ui/package.json
{ "name": "@repo/ui", "exports": { ".": "./src/index.ts" } }


// packages/ui/src/button.tsx
export function Button({ children, ...props }) {
 return <button className="px-4 py-2 bg-black text-white rounded" {...props}>{children}</button>;
}


// apps/web/package.json → dependencies:
// "@repo/ui": "workspace:*"


// apps/web/app/page.tsx
import { Button } from "@repo/ui";
Seite 2
Warum das funktioniert
  • Incremental Builds: nur geänderte Packages werden neu gebaut
  • Shared Code: UI-Komponenten und Typen einmal schreiben, überall nutzen
  • Parallelisierung: unabhängige Tasks laufen gleichzeitig
  • Remote Caching spart Build-Zeit im gesamten Team
Tipps
  • turbo run build baut nur Packages die sich geändert haben — der Rest kommt aus dem Cache
  • Remote Caching mit Vercel: turbo login && turbo link für Team-weiten Cache
  • Nutze workspace:* für lokale Package-Referenzen statt Versionsnummern
  • turbo run dev startet alle Apps parallel mit einem Befehl
  • Filtere einzelne Apps: turbo run build --filter=web
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen