Monorepos con Nx y Turborepo: La Revolución en Proyectos JavaScript 2025

Hola HaWkers, monorepos se convirtieron en el estándar para proyectos JavaScript en escala. Google, Facebook, Microsoft - gigantes de tech gestionan millones de líneas de código en repositorios únicos. Y ahora, con Nx y Turborepo, esa arquitectura está accesible para todos.

¿Todavía gestionas múltiples repos desconectados? Estás perdiendo velocidad y consistencia.

¿Qué Son Monorepos (Y Por Qué Importan)?

Monorepo es estrategia arquitectural donde múltiples proyectos viven en un único repositorio, compartiendo código, herramientas y configuraciones.

Ventajas Decisivas:

Compartimiento de Código Trivial: No necesitas publicar paquetes NPM internos. Imports directos entre proyectos.

Refactorización Atómica: ¿Cambias interface? Actualiza todos los usos en un único commit. Imposible en polyrepos.

Tooling Unificado: ESLint, TypeScript, Prettier - una configuración para todo.

Builds Inteligentes: Herramientas como Nx y Turborepo saben exactamente lo que cambió y compilan solo lo necesario.

// Estructura típica de monorepo
{
  "apps": {
    "web": "Next.js app principal",
    "admin": "Dashboard administrativo",
    "mobile": "React Native app"
  },
  "packages": {
    "ui": "Biblioteca de componentes compartidos",
    "utils": "Utilidades comunes",
    "api-client": "Cliente API tipado",
    "config": "Configuraciones compartidas"
  }
}

// Nx - Monorepo poderoso y extensible
// nx.json - Configuración del Nx

{
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        // Caching distribuido - comparte entre equipo
        "cacheableOperations": ["build", "test", "lint"],
        "parallel": 3
      }
    }
  }
}

// Turborepo - Velocidad extrema
// turbo.json

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "outputs": ["dist/**", ".next/**"],
      "dependsOn": ["^build"],
      "env": ["NODE_ENV"]
    },
    "test": {
      "dependsOn": ["build"],
      "outputs": ["coverage/**"],
      "cache": true
    },
    "lint": {
      "cache": true
    }
  }
}

// Ejemplo práctico: Biblioteca compartida
// packages/ui/src/Button.tsx

export interface ButtonProps {
  variant: 'primary' | 'secondary';
  children: React.ReactNode;
  onClick?: () => void;
}

export function Button({ variant, children, onClick }: ButtonProps) {
  return (
    <button className={`btn btn-${variant}`} onClick={onClick}>
      {children}
    </button>
  );
}

// apps/web usa la biblioteca
// apps/web/pages/index.tsx

// Import directo - ¡no necesita npm install!
import { Button } from '@monorepo/ui';

export default function Home() {
  return (
    <div>
      <h1>Welcome</h1>
      <Button variant="primary" onClick={() => alert('Clicked!')}>
        Get Started
      </Button>
    </div>
  );
}

Nx vs Turborepo: ¿Cuál Elegir?

Nx: Poder y Flexibilidad

Puntos Fuertes:

Ecosistema rico (plugins para React, Angular, Node, etc)
Dependency graph visualization
Code generators poderosos
Distributed task execution
Nx Cloud para cache remoto

Ideal Para:

Proyectos enterprise complejos
Equipos que valoran DX
Necesidad de customización profunda

Turborepo: Simplicidad y Velocidad

Puntos Fuertes:

Configuración minimal
Performance extrema
Caching distribuido nativo
Integración perfecta con Vercel
Curva de aprendizaje suave

Ideal Para:

Startups que necesitan moverse rápido
Proyectos enfocados en web apps
Equipos que quieren simplicidad

Patrones de Organización

Estructura por Tipo

monorepo/
├── apps/           # Aplicaciones deployables
│   ├── web/
│   ├── api/
│   └── admin/
├── packages/       # Bibliotecas compartidas
│   ├── ui/
│   ├── utils/
│   └── config/
└── tools/          # Herramientas de build

Estructura por Dominio

monorepo/
├── domains/
│   ├── auth/
│   │   ├── app/
│   │   ├── api/
│   │   └── ui/
│   └── billing/
│       ├── app/
│       ├── api/
│       └── ui/
└── shared/
    ├── ui/
    └── utils/

Desafíos y Soluciones

Tiempo de CI Aumentado

Desafío: CI necesita testar todo, lleva tiempo.

Solución: Usa affected commands. Testa solo lo que cambió.

Merge Conflicts

Desafío: Más código = más conflictos.

Solución: Estructura bien organizada minimiza conflictos.

Si trabajas con TypeScript en monorepos, lee: TypeScript en 2025.