Monorepo Setup

Turborepo, workspaces, shared packages, and code organization.

Overview

Monorepos manage multiple packages in a single repository.

Key Concepts

• Turborepo — Build system for monorepos
• Workspaces — npm/yarn workspace configuration
• Shared Packages — Reusable code across apps
• Build Caching — Cache builds for faster development
• Code Generation — Scaffold new packages

Code Examples

// package.json (root)
{
  "name": "my-monorepo",
  "workspaces": ["apps/*", "packages/*"],
  "scripts": {
    "dev": "turbo run dev",
    "build": "turbo run build"
  }
}

// turbo.json
{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**"]
    },
    "dev": {
      "cache": false
    }
  }
}

// packages/ui/src/Button.tsx
export function Button({ children, variant = 'primary' }) {
  return <button className={`btn btn-${variant}`}>{children}</button>;
}

// apps/web/app/page.tsx
import { Button } from '@my/ui';

export default function Home() {
  return <Button>Click me</Button>;
}

Practice

Set up a Turborepo monorepo with a Next.js app and shared UI package.