Como refatorei o site da FSAKM usando Next.js, Nextra e ShadCN/UI
Introdução
Este é um projeto pessoal de redesign e reimplementação do site da Federação Sul Americana de Krav Maga. O objetivo foi modernizar a estrutura do site, melhorar sua performance e torná-lo mais acessível e organizado. Aproveitei o projeto como uma oportunidade para experimentar tecnologias modernas de front-end como Next.js, Nextra e ShadCN/UI. O resultado é um site leve, rápido e fácil de navegar, pensado para escalar com novos conteúdos e idiomas.
Acesse o projeto online: https://fsakm.carlosbronze.com.br/pt
Código fonte: https://github.com/bronze/fsakm
Motivação
Achei o site original pesado, carregamento lento e navegação com baixa legibilidade. A estrutura do conteúdo dificultava a arquitetura lógica de seções. Além disso, vi no projeto uma boa oportunidade para aprofundar meus conhecimentos em Next.js, acessibilidade e componentização com ShadCN/UI.
Pagespeed do kravmaga.com.br https://pagespeed.web.dev/analysis/https-kravmaga-com-br/7rbjskugvw?form_factor=desktop
Em 04/06/2025
Escolhas técnicas
Pesquisei ferramentas que facilitassem a criação de sites estruturados com boa documentação e navegação. Avaliei Docusaurus, Fumadocs e Nextra.
Descartei o Docusaurus por não usar Next.js, e escolhi o Nextra v4 por ser baseado em Next.js, ter suporte nativo a internacionalização e busca integrada com Pagefind. A estrutura inicial é limpa e fácil de personalizar. Além disso, o uso do ShadCN/UI como base de componentes trouxe ganhos importantes em padronização e acessibilidade.
Desenvolvimento
Comecei mapeando as seções principais do site original e usando crawlers para identificar a estrutura de URLs. Descobri que havia cerca de 500 páginas organizadas de forma confusa, com instrutores em
/teams/ e academias em /academias/unidade-*-estado.Redesenhei a arquitetura da informação para algo mais semântico. Instrutores passaram a ter URLs como
/federacao/instrutores/nome e academias como /academias/pais/estado/unidade. Isso facilitou a navegação e melhorou o SEO.
Implementação
Com a estrutura definida, iniciei o trabalho de conteúdo. Adicionei página por página, focando nos textos e imagens, deixando de lado funcionalidades complexas como carrosséis.
Esse processo me ajudou a entender padrões e necessidades do projeto. Padronizei o armazenamento de imagens e identifiquei componentes reutilizáveis para criar depois.
Internacionalização
O Nextra já vem com suporte ao Next I18n. A estrutura padrão adiciona o prefixo da linguagem nas rotas, como
/pt/. Embora funcional, achei visualmente poluído e tentei replicar o comportamento do Fumadocs, que permite esconder o idioma padrão na URL. Ainda estou avaliando essa melhoria.Componentes reutilizáveis
Com o conteúdo base pronto, implementei componentes mais ricos como cards, lightbox e carrosséis usando Embla. O ShadCN/UI facilitou muito esse processo, permitindo editar os componentes diretamente com consistência de estilo e comportamento.
Ajustes finais
No fim, fiz um pente-fino na interface, testando tanto no desktop quanto no mobile. Corrigi bugs, implementei um novo rodapé com sitemap e otimizei imagens.
O resultado foi um site mais leve, moderno, com navegação clara e carregamento muito mais rápido.
Resultados
Comparando com o site anterior, o ganho de performance foi notável. O novo site tem notas excelentes no PageSpeed e está preparado para expansão futura com novos conteúdos e idiomas.
Veja o PageSpeed atualizado: https://pagespeed.web.dev/analysis/https-fsakm-carlosbronze-com-br-pt/lcqea9wjbb
Em 04/06/2025
Conclusão
Esse projeto foi uma ótima forma de colocar em prática conhecimentos sobre Next.js, organização de conteúdo, arquitetura de informação e design acessível. O Nextra com ShadCN se mostrou uma combinação poderosa para criar sites estruturados de forma rápida e eficiente.
Melhorias Futuras
Mesmo com o projeto entregue e funcionando bem, algumas decisões ainda me deixam com vontade de iterar. A principal delas é a estrutura de rotas. Ainda me incomoda a necessidade de incluir
/pt nas URLs para o conteúdo em português, o que gera uma percepção de complexidade desnecessária para quem acessa o site no idioma principal.Caso retome esse projeto, penso em explorar uma reimplementação mais customizada usando apenas Next.js puro ou testando o Fumadocs como base, que já lida melhor com a ocultação do idioma padrão. Ou ainda voltando pro AstoJS.
Pontos a ter em mente se retomar o projeto:
- Criar uma estrutura de rotas onde o conteúdo em português não dependa do prefixo
/pt
- Implementar um dicionário de termos comuns usado no layout, facilitando a tradução de termos em outros idiomas
- Modularizar ainda mais os componentes visuais e reutilizar textos e metadados entre páginas.
- Criar automaticamente o Sitemap de acordo com as páginas e títulos.
- Repensar a Arquitetura/Navegação. Dá pra se apoiar nas 3 seções mais importantes e enxugar a barra de navegação.
Se quiser ver o código ou contribuir, está tudo no GitHub.
