Do Estático ao Escalável: Por que refatorei meu portfólio com Next.js 16 e Sanity CMS

Se você é um desenvolvedor, sabe que o nosso portfólio nunca está 100% pronto. Mas chega um momento em que a estrutura antiga começa a limitar seu crescimento. Recentemente, tomei a decisão de “abandonar” meu portfólio feito em React e JavaScript “hardcoded” para construir algo mais escalável, performático e dinâmico.

Histórico de versões: v1.0 à v3.0

Antes de apresentar as melhorias, é válido apresentar à vocês as versões anteriores e suas características. Houveram três versões até o momento.

Versão 1.0

A primeira versão foi criada como uma forma de eu agrupar e acessar os meus projetos de forma mais fácil.

Características:

• Feito em HTML, CSS e JavaScript puro;
• Não reativo;
• Difícil de manter;
• Projetos inseridos direto na estrutura HTML;
• SEO Básico (não sendo o foco no momento).

Versão 2.0

Criada para consolidar o que vinha aprendendo em React.js e aplicar melhorias na experiência de navegação. Seguindo a essência do design da primeira versão.

Características:

• Feito em React.js, Styled-Components e JavaScript;
• Reativo;
• Fácil de manter;
• Projetos inseridos em um arquivo JSON e renderizados com um Map.
• SEO Básico (ainda não sendo o foco);

Versão 3.0

Última versão, também criada para consolidar meus conhecimentos, porém, agora em Next.js e TypeScript. Inserido novas páginas e recursos, mas ainda seguindo o mesmo design da segunda versão.

Características:

• Feito em Next.js, Tailwind, TypeScript e Sanity (CMS);
• Reativo;
• Fácil de manter;
• Projetos inseridos através do Sanity Studio;
• SEO Avançado

O Problema: A barreira do “Hardcoded”

Nas versões anteriores, a cada novo projeto que eu queria adicionar exigia uma alteração direta no código, um novo commit e um novo deploy. Um processo mais demorado.

• Dados engessados: Informações inseridas diretamente no JSX.
• Manutenção difícil: Alterar uma imagem ou descrição era um processo burocrático.
• SEO limitado: Falta de páginas dinâmicas e otimizadas para busca.

A Solução: Uma stack performática e um CMS

Para a nova versão, foquei em três pilares: Tipagem, Performance e Gestão de Conteúdo.

1. Next.js 16 + TypeScript

A escolha pelo Next.js foi estratégica, pois gostaria de que cada projeto tivesse um página dedicada, onde eu pudesse trazer mais informações e imagens, e que fosse renderizada com alta performance. O TypeScript foi utilizado para trazer a segurança de tipos e me ajudar no desenvolvimento, além de me dar a possibilidade de aprender mais esse superset.

2. Sanity.io (Headless CMS)

Acredito que esta foi a maior mudança. Agora, meus projetos não estão embutidos no código, mas estão em um gerenciador de conteúdo.

• Flexibilidade: Posso cadastrar novos projetos, fazer upload de imagens e escrever os detalhes técnicos de qualquer lugar, sem tocar no VS Code e tendo que fazer novos commits e deploys.

• Escalabilidade: O portfólio agora se comporta como uma plataforma real.

3. Tailwind

Troquei o Styled-Components pelo Tailwind para acelerar o tempo de desenvolvimento. O que, pelas minhas pesquisas, acabou gerando um “bundle” final mais leve.

Melhorias evidentes: Lighthouse

Não basta eu dizer que é rápido, é preciso provar. Após a migração, os números do Google Lighthouse deixaram claro que a mudança de arquitetura valeu a pena:

Observações: Todas as versões estão rodando localmente. A V2.0 e V3.0 estão rodando através do Vite e Next.js respectivamente.

Novas Funcionalidades

Além da mudança estrutural, adicionei novas funcionalidades para gerar mais valor ao meu portfólio:

• Página para todos os projetos: página dedicada para a apresentação de todos os projetos. Ainda está em construção, mas procuro adicionar filtros de pesquisa e outros recursos. Quem sabe na versão 3.1?

• Páginas de Detalhes (Projetos): página dedicada ao detalhamento do projeto, onde eu posso adicionar mais imagens e texto.

Conclusão

Essa refatoração foi muito mais do que uma simples mudança estética, foi um exercício de Engenharia de Software. O foco que era “ter um site para apresentar projetos” acabou se tornando em “ter uma ferramenta de comunicação técnica e apresentação pessoal eficiente”.