Multi-Zones

Core Idea

Multi-Zones divide um domínio grande em várias aplicações Next.js independentes, cada uma servindo um conjunto de paths, permitindo build/deploy separados e até frameworks diferentes por zona.

Key Concepts

• Zona: app Next.js normal + assetPrefix configurado pra evitar conflito de assets estáticos com outras zonas (a zona "default", que pega os paths restantes, não precisa de assetPrefix).
• Soft vs hard navigation: navegar dentro da mesma zona é soft navigation (sem reload); navegar entre zonas diferentes é hard navigation (descarrega recursos da página atual).
• Roteamento entre zonas via rewrites: uma das apps Next.js roteia paths pra outras zonas usando destination com URL completa (scheme+domínio), inclusive apontando pra localhost em dev.
• Roteamento via Proxy: alternativa a rewrites quando a decisão de rota precisa ser dinâmica (ex.: feature flag durante migração); tem mais latência que rewrites.
• Linking entre zonas: usar <a> normal, não <Link>, porque <Link> tenta prefetch/soft navigate em paths relativos, o que não funciona cross-zone.
• Paths únicos por zona: duas zonas não podem servir o mesmo path, gera conflito de roteamento.

Code Examples

async rewrites() {
  return [
    { source: '/blog', destination: `${process.env.BLOG_DOMAIN}/blog` },
    { source: '/blog/:path+', destination: `${process.env.BLOG_DOMAIN}/blog/:path+` },
    { source: '/blog-static/:path+', destination: `${process.env.BLOG_DOMAIN}/blog-static/:path+` },
  ]
}

• O que demonstra: roteamento de path + assets estáticos de uma zona pra outro domínio via rewrites.

export async function proxy(request) {
  const { pathname, search } = request.nextUrl
  if (pathname === '/your-path' && myFeatureFlag.isEnabled()) {
    return NextResponse.rewrite(`${rewriteDomain}${pathname}${search}`)
  }
}

• O que demonstra: roteamento dinâmico entre zonas condicionado a feature flag.

Anti-patterns

• Usar <Link> pra navegar entre zonas: prefetch/soft navigate não funciona cross-zone, precisa ser <a> puro.
• Duas zonas servindo o mesmo path: gera conflito de roteamento.
• Colocar páginas visitadas frequentemente juntas em zonas diferentes: força hard navigation repetida, prejudicando UX.

Key Takeaways

1. Multi-Zones é a estratégia de micro-frontend nativa do Next.js, cada zona é um deploy independente.
2. rewrites é preferível a Proxy pra roteamento entre zonas, por menor latência; Proxy só quando a decisão precisa ser dinâmica.
3. Monorepo facilita compartilhar código entre zonas; NPM packages resolvem quando estão em repos separados.

Connects To

• ch292 Deploying: cada zona é deployada como uma aplicação Next.js independente.