Migração Umbraco para Next.js

Por que Times Umbraco Estão Migrando para Next.js

Umbraco conquistou sua reputação. É open-source, flexível e profundamente enraizado no ecossistema .NET. Mais de 16.900 empresas rodam nele, com o Reino Unido representando aproximadamente 31% da base de instalação. O recente lançamento v17 LTS prova que o projeto está vivo e bem.

Mas aqui está a parte desconfortável: a maioria dos sites Umbraco ainda são views Razor renderizadas no servidor sentadas atrás do IIS ou Azure App Service. O frontend está fortemente acoplado ao backend .NET. A velocidade da página sofre. A contratação fica mais difícil a cada ano conforme o pool de talentos se desloca para React e TypeScript. E sua equipe editorial está presa a um fluxo de publicação que foi projetado para uma arquitetura monolítica — porque é exatamente isso.

Next.js resolve esses problemas sem fazer você descartar tudo que construiu. Desde a v12, a Content Delivery API do Umbraco habilitou um modo headless genuíno. Você pode manter o backend Umbraco e acoplar um frontend Next.js a ele. Ou fazer uma limpeza completa e migrar conteúdo para um CMS headless propósito-construído como Sanity ou Payload.

Somos uma agência baseada no Reino Unido. Conhecemos o ecossistema Umbraco intimamente porque está em toda parte por aqui. Também sabemos quando é hora de seguir em frente.

Os Pontos de Dor Reais com Umbraco

Gargalos de Performance

O pipeline de renderização padrão do Umbraco produz HTML renderizado no servidor a cada requisição a menos que você camadas agressivas de cache por cima. Mesmo com output caching, TTFB no Azure App Service normalmente fica entre 800ms e 2.5 segundos dependendo do nível de hosting e performance do banco de dados. Scores Lighthouse móveis para sites típicos Umbraco ficam entre 45 e 65 — bem abaixo dos limites Core Web Vitals do Google.

Experiência do Desenvolvedor Frontend

Razor views funcionam, mas são limitadas. Sem arquitetura baseada em componentes. Sem hot module replacement. Sem ferramentas de design system como Storybook. Desenvolvedores junior e mid-level cada vez mais vêm de backgrounds React e acham a camada de templating Razor/C# genuinamente frustrante. Recrutamento se torna o gargalo.

Custos de Hosting e Complexidade

Rodar Umbraco adequadamente significa gerenciar servidores Windows, bancos de dados SQL Server e frequentemente Azure Blob Storage para mídia. Custos mensais de hosting para uma configuração produção-ready normalmente rodam £150 a £500+ dependendo do tráfego. Compare com um site Next.js estático ou baseado em ISR deployado em Vercel ou Cloudflare Pages — não é comparável.

Limitações de Escalabilidade

Umbraco não escala horizontalmente sem esforço significativo. Load balancing requer configuração cuidadosa de cache distribuído e sincronização de banco de dados. Uma abordagem CDN-first com Next.js elimina a maioria dessa complexidade inteiramente.

Rigidez na Modelagem de Conteúdo

Os Document Types do Umbraco são poderosos, mas fortemente acoplados à camada de renderização. Reutilizar conteúdo entre canais — aplicativos móveis, quiosques, plataformas de terceiros — requer trabalho API customizado que a Content Delivery API apenas parcialmente aborda.

Dois Caminhos de Migração: Escolha O Que Se Encaixa

Opção A: Backend Umbraco + Frontend Next.js

Este é o caminho de baixo risco. Sua equipe de conteúdo continua usando o backoffice familiar do Umbraco. Document Types, nós de conteúdo, biblioteca de mídia — tudo permanece exatamente onde está. Construímos um frontend Next.js que consome a Content Delivery API introduzida na v12+.

Esta abordagem funciona bem quando:

• Sua equipe editorial está profundamente investida no fluxo de trabalho do Umbraco
• Você tem Document Types complexos com conteúdo aninhado e block editors
• Você quer des-riscar a migração mudando uma camada de cada vez
• Seu time .NET pode continuar mantendo o backend

Mapeamos cada Document Type para um componente React correspondente. Razor views se tornam templates de página Next.js tipados. Grid layouts e Block List editors são convertidos em componentes React compostos com interfaces TypeScript geradas a partir do seu schema Umbraco.

Opção B: Migração Completa para Sanity ou Payload CMS

Este é o caminho de limpeza completa. Extraímos todo conteúdo do Umbraco, transformamos e o carregamos em um CMS headless moderno. Sanity oferece edição colaborativa em tempo real e um sistema de schema flexível. Payload CMS é open-source, auto-hospedado e construído em Node.js — um companheiro natural para Next.js.

Esta abordagem faz sentido quando:

• Sua instância Umbraco é desatualizada (pré-v10) e fazer upgrade é caro
• Você quer eliminar hosting .NET inteiramente
• Você precisa de conteúdo estruturado que sirva múltiplos canais
• Seu time quer uma stack JavaScript/TypeScript unificada

Escrevemos scripts customizados de migração que mapeiam Document Types para modelos de conteúdo CMS, preservam relacionamentos entre nós de conteúdo e lidam com migração de ativos de mídia com redirecionamento apropriado de URL.

Nosso Processo de Migração

1. Discovery e Audit (Semana 1-2)

Auditamos sua instância Umbraco: versão, Document Types, templates, controladores customizados, volume de mídia, integrações third-party, estrutura de URL existente. Benchmarkamos performance atual e sinalizamos páginas críticas para SEO.

2. Decisão de Arquitetura (Semana 2)

Com base no audit, recomendamos Opção A ou B com rationale detalhado. Definimos a tech stack, estratégia de hosting e mapeamento de modelo de conteúdo.

3. Mapeamento de Modelo de Conteúdo (Semana 2-3)

Cada Document Type é mapeado para um componente React (Opção A) ou um modelo de conteúdo CMS (Opção B). Documentamos isso em uma referência de schema compartilhada que desenvolvedores e editores de conteúdo podem revisar.

4. Build do Frontend (Semana 3-6)

Razor views se tornam componentes React. Construímos o design system em uma component library, criamos page templates e conectamos data fetching via Content Delivery API do Umbraco ou seu novo CMS headless.

5. Migração de Conteúdo (Semana 5-7, apenas Opção B)

Scripts ETL customizados extraem conteúdo do banco de dados Umbraco, transformam para corresponder ao novo schema e o carregam no CMS alvo. Validamos cada nó de conteúdo, relacionamento e ativo de mídia.

6. Preservação de SEO e Launch (Semana 7-8)

É aqui que migrações succedem ou falham. Implementamos um mapa de redirecionamento completo cobrindo cada URL. XML sitemaps são regenerados. Structured data é portado. Verificamos canonical tags, meta descriptions e dados Open Graph página por página. Crawls com Screaming Frog rodam pré e pós-launch para captar qualquer lacuna.

Para uma comparação mais profunda de abordagens Umbraco e Next.js, publicamos uma análise técnica detalhada.

Estratégia de Preservação de SEO

SEO é uma preocupação first-class durante toda a migração — não algo que acoplamos no final:

• Mapeamento completo de redirecionamento 301 de cada URL Umbraco para seu equivalente Next.js
• Preservação da estrutura de link interno — nenhuma página órfã
• Migração de metadata — títulos de página, descrições, imagens OG carregadas programaticamente
• Structured data portado e validado contra Google's Rich Results Test
• Ganhos de performance que melhoram diretamente rankings Core Web Vitals
• Monitoramento pós-launch com Search Console e Ahrefs por 90 dias

Timeline e Investimento

Uma migração típica Umbraco para Next.js para um site de tamanho médio (50-200 páginas) leva 6-10 semanas dependendo da complexidade e qual caminho de migração você toma.

• Opção A (Umbraco Headless + Next.js): £15.000 – £35.000
• Opção B (Migração completa para Sanity/Payload): £20.000 – £50.000

Sites maiores — integrações complexas, setups multi-idioma, e-commerce — ficarão no extremo superior. Fazemos escopo de cada projeto com uma proposta preço-fixo após a fase discovery. Sem surpresas no meio do projeto.

Por que Trabalhar com Social Animal

Somos baseados no Reino Unido, então entendemos o mercado Umbraco melhor que a maioria. Trabalhamos diretamente com times .NET, migramos codebases Razor e lidamos com as quirks específicas da arquitetura de conteúdo do Umbraco na prática. Também construímos aplicações Next.js produção todos os dias — é nossa capability central.

Seu site Umbraco serviu você bem. Vamos garantir que a próxima plataforma o sirva ainda melhor.