Como migrar de pages para app router no Next.js com Chakra UI sem
Chegou a hora de evoluir: leve seu projeto Next.js das velhas pages para o app router, aprendendo cada detalhe sem medo, de rotas a temas escuros e fontes
Por que isso é importante
Resposta direta: aplique “Migrar Next.js pages para app router + Chakra” com boundaries e métricas de UX — migração big-bang costuma sair cara.
Por que isso é importante
Como migrar de pages para app router no Next.js com Chakra UI sem. Chegou a hora de evoluir: leve seu projeto Next.js das velhas pages para o app router, aprendendo cada detalhe sem medo, de rotas a temas escuros e fontes modernas, do login ao loading, com zero enrolação.
Migração: a coragem de sair do velho
Se seu projeto ainda roda em Next.js 12 e usa a clássica pasta pages , a hora de mudar é agora. O novo Next.js (v15+) exige app router para recursos de servidor otimizados, loading independente e meta SEO potente nativo. Migrar parece assustador, mas é só seguir a trilha certa: renomeie pages para legacy-pages , crie a pasta app e vá transportando, adaptando rotas e layouts, sem colidir as estruturas antigas.
Atenção
Não apague sua pasta pages de imediato. Renomeie para legacy-pages para garantir rollback rápido caso algo quebre.
Roteamento: o segredo das rotas inteligentes
O novo sistema de rotas do Next.js é revolucionário: cada pasta dentro de app é uma rota, e arquivos como layout.tsx , loading.tsx e page.tsx trazem controle total do fluxo. Comece pela rota raiz. Em vez de _app.tsx e _document.tsx , agora tudo é distribuído em layouts e providers.
Dica técnica
Use layout.tsx para wrappers globais (temas, fontes, contextos) e loading.tsx para controladores de estado de carregamento específicos por rota.
Layouts: nunca mais reescreva boilerplate
Com o layout.tsx global, todas as páginas têm cabeçalho, providers de contexto e tema automaticamente. Adicione o ChakraProvider, garanta que fontes e cores do sistema fiquem num só lugar e acabe com repetição. Torne League Spartan ou a fonte da sua escolha padrão do projeto inteiro sem gambiarra.
Evite Erros
Não tente importar pageProps ou Component como antes. Eles não existem na nova arquitetura do App Router.
Providers: contexto, temas e a dor do Chakra UI
Centralize todos os Providers (Chakra, Theme, Auth etc) em providers.tsx dentro da pasta app . Copie o que funcionava na arquitetura antiga e adapte para o mundo SSR do Next.js 15+. Use use client no topo do arquivo se o contexto precisar do lado do cliente.
Atenção Extra
O ChakraProvider precisa ser importado e funcionar sem conflitos. Se der dor de cabeça, quebre em pequenos providers e adicione-os um a um.
Fontes: fugindo do Arial seco, criando personalidade
Nada de fonte padrão sem graça. Agora é hora de trazer identidade. Instale fontes modernas – como League Spartan, Inter ou Pops – usando o sistema do Next.js ( next/font ) e as integre direto no layout global. Chega de mexer na fonte toda rota!
Boas Práticas
Exporte a fonte customizada como variável e use-a globalmente no className do html ou do body .
Temas: definindo as cores do seu produto
Aproveite para abandonar o roxo pronto de outros projetos. Crie seu próprio tema: escolha primary , secondary , tertiary e uma escala de cinza ( grayscale ). Deixe o Chakra UI refletir sua identidade visual e torne o dark mode real.
Atenção
Não mantenha variáveis de cores que não são usadas – limpe os temas antigos para evitar confusões futuras e bugs visuais.
Loading aprimorado: carregamento sob controle granular
O loading.tsx está em cada rota, incluindo global. Ele permite spinners sob medida, backgrounds personalizados e controle total sobre UX durante a renderização SSR e CSR.
Alerta Técnico
O loading.tsx global cobre todas as rotas onde não há um loading específico. Ganhe experiência customizando o loading por página para garantir consistência e rapidez percebida.
Meta SEO: o segredo da nova meta optimization
Adeus document.tsx , adeus tags soltas! O Next.js 15+ gerencia metadata por arquivo, com tipagem, SEO otimizado e flexibilidade para titles dinâmicos, descriptions e tags sociais.
SEO na veia
Use o objeto Metadata em cada page.tsx para definir títulos, descrição, keywords e openGraph – tudo pronto para ranquear alto no Google.
Funções utilitárias: cookies sem dor e sem libs a mais
A manipulação de cookies mudou: agora a função cookies do Next.js lê cookies no SSR. Crie utilitários em utils como parseCookies e getCookies para acessar cookies do servidor sem usar o oldschool nookies .
Dica prática
Use try/catch nos hooks de leitura dos cookies para ignorar erros de ambiente ou SSR.
Login page: comece sempre pelo fluxo simples
Evite complicar. Migre antes o login page para garantir rota principal e autenticação. O segredo do novo Next é: código componentizável roda em qualquer arquitetura, então use seus antigos screens prontos, importando direto no novo page.tsx .
Evite retrabalho
Componente bem escrito não quebra ao migrar: só ajuste sintaxe de rota e SSR/CSR.
Redirect: controle absoluto de navegação
Saia de next/router , entre em next/navigation . Toda navegação, inclusive redirect após login, logout, precisa ser adaptada para a nova abordagem – e atenção: ela é server e client side ao mesmo tempo.
Evite bugs de navegação
Não confunda uso do redirect no servidor com hooks de navegação do client. Consulte sempre a doc antes de usar múltiplos redirects no mesmo fluxo.
SSR/CSR: quando usar server e quando usar client
Hooks como useContext e cookies só rodam no client. Toda função que precisa renderizar algo no lado do servidor não pode depender de estado global do client . Equilibre e use use client sempre que necessário.
Atenção arquitetura
Importou provider? Lembre-se de colocar use client ANTES de qualquer chamada – senão seu contexto quebra e nada funciona.
Container responsivo: componentização é vida longa!
Padronize containers (como Container sm= ) em um único local. Atualize todos os componentes para usar essas versões consistentes. Sucesso = menos retrabalho futuro e responsividade automática.
Padrão é tudo
Quanto mais componentizado seu projeto, mais rápido e seguro é migrar entre frameworks e versões.
Conclusão: menos medo, mais adaptação
Migrar do pages para o app router do Next.js é uma maratona, mas sem segredo. Revise cada etapa: rotas, layouts, providers, fontes, tema, login, loading e cookies. Faça com calma, teste em partes e nunca apague a estrutura antiga antes dos testes finais.
Novidade ao seu alcance
Quer aprender migrações avançadas ao vivo? Explore também o <a href="https://www.youtube.com/@DevDoido">canal de vídeo para devs hands-on</a> com dicas contínuas de Next.js, React e muito mais.
Perguntas frequentes
Se você aplicar «Roteamento: o segredo das rotas inteligentes» hoje, o que muda no render?
Checklist de front: O novo sistema de rotas do Next.js é revolucionário: cada pasta dentro de app é uma rota, e arquivos como layout.tsx , loading.tsx e page.tsx trazem controle total do fluxo. Comece pela rota raiz. Em vez de _app.tsx e _document.tsx , agora tudo é distribuído. Depois confirme no path crítico com review humano.
Como provar «Layouts: nunca mais reescreva boilerplate» com evidência do artigo?
Do texto: Com o layout.tsx global, todas as páginas têm cabeçalho, providers de contexto e tema automaticamente. Adicione o ChakraProvider, garanta que fontes e cores do sistema fiquem num só lugar e acabe com repetição. Torne League Spartan ou a fonte da sua escolha.
Qual erro de estado «Providers: contexto, temas e a dor do Chakra UI» ajuda a cortar?
Centralize todos os Providers (Chakra, Theme, Auth etc) em providers.tsx dentro da pasta app . Copie o que funcionava na arquitetura antiga e adapte para o mundo SSR do Next.js 15+. Use use client no topo do arquivo se o contexto precisar do lado do cliente. Em «Providers: contexto, temas e a dor do Chakra UI», trate isso como decisão de interface mensurável — não como checklist genérico.
Como resumir «Fontes: fugindo do Arial seco, criando personalidade» em critério de aceite?
Comece pelo mecanismo do corpo: Nada de fonte padrão sem graça. Agora é hora de trazer identidade. Instale fontes modernas – como League Spartan, Inter ou Pops – usando o sistema do Next.js ( next/font ) e as integre direto no layout global. Chega de mexer na fonte toda rota!