Microfrontend

Monorepo — Turborepo & Nx

Gerenciar múltiplos apps e packages no mesmo repositório com build caching e pipeline inteligente.

Definição

Monorepo é um repositório único com múltiplos projetos/packages. Benefícios: compartilhamento de código fácil (UI lib, utils), uma versão de cada dependência, refatorações atômicas entre packages, CI/CD unificado. Turborepo e Nx adicionam: build caching (só rebuilda o que mudou), task pipeline (ordem de execução), e remote caching (compartilhar cache entre CI runs).

Problema → Solução

Problema

Times com múltiplos repos ficam dessincronizados (UI lib na v1 em um app, v2 em outro). Refatoração que afeta 3 apps exige 3 PRs. Mudança no package compartilhado não é testada contra todos os consumers antes do merge.

Solução

Monorepo com Turborepo: packages/ui (design system), packages/utils (helpers), apps/web (Next.js), apps/dashboard (Next.js). Pipeline: build depende de ^build dos deps. Cache: outputs em .turbo. Remote cache: Vercel Remote Cache ou self-hosted.

Dica de entrevista

Tip

Monorepo não é Monólito. Cada app ainda faz deploy independente. O monorepo resolve apenas o problema de coordenação de código e builds. Comece com Turborepo — menor curva de aprendizado. Use Nx para projetos com build graph muito complexo ou necessidade de plugins.

Código

// turbo.json — pipeline de tasks
{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],   // build deps primeiro
      "outputs": [".next/**", "dist/**"]
    },
    "test": {
      "dependsOn": ["^build"],
      "outputs": ["coverage/**"]
    },
    "lint": {},
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

// package.json raiz
{
  "workspaces": ["apps/*", "packages/*"],
  "scripts": {
    "build": "turbo build",
    "dev": "turbo dev",
    "test": "turbo test",
    "lint": "turbo lint"
  }
}

// Estrutura
apps/
  web/          # Next.js app principal
  dashboard/    # Next.js admin
packages/
  ui/           # Design System
  utils/        # Helpers compartilhados
  config/       # ESLint, TS config compartilhados
  tsconfig/

Perguntas de entrevista

Q.Turborepo vs Nx: qual escolher?▾

A.Turborepo: simples, zero config, melhor para JS/TS puro, excelente caching, opinionado mas flexível. Nx: mais features (generators, plugins, affected), melhor para workspaces grandes e diversificados (Go, Java, etc.), mais complexo. Para maioria dos projetos Next.js/React, Turborepo é suficiente.

Q.Como funciona o build caching no Turborepo?▾

A.Turborepo faz hash de inputs (arquivos de source + env vars + dependências) e outputs (dist/, .next/). Se o hash não mudou, retorna o cache em vez de rebuildar. Remote cache compartilha esse resultado entre máquinas — dev e CI compartilham cache.

Q.Como lidar com versionamento de packages internos no monorepo?▾

A.Opções: 1) Sem versão (workspace:*) — sempre a versão mais recente, ideal para apps no mesmo repo. 2) Versão semântica — quando packages são publicados no npm. Changesets automatiza o versionamento: gera changelogs e bumps de versão baseados em changesets commitados.

64/122← →