Lucas Caton

Migrei meu site para Next.js

Lucas Caton

Lucas Caton

@lucascaton

Criei esse site/blog em 2009 usando Wordpress. Depois migrei para Enki mas acabei voltando para o Wordpress. Parece que foi ontem que refiz tudo do zero, mas na realidade foi em 2017, quando comecei a usar Jekyll para gerar um site estático pela primeira vez.

Por que mudar novamente?

Jekyll me serviu bem, mas desde o ano passado eu notei que precisava de algo ainda mais flexível e com melhor performance já que gerar o site (aka. processo de build) e também renderizar páginas em ambiente de desenvolvimento estava deixando a desejar. Aproveitei que estava estudando Next.js e decidi usá-lo no site novo para ganhar experiência na prática. A migração foi bastante lenta, pois eu não tinha pressa e queria experimentar combinações de bibliotecas e soluções diferentes, que vou detalhar mais na sessão "Stack" abaixo.

Processo

Em vez de reusar o mesmo repositório, criei um novinho em folha. Eis o primeiro commit, que aconteceu há mais de um ano:

commit 7fdcbe4
Author: Lucas Caton
Date:   Thu Jun 11 17:21:21 2020 +1000

    Initial commit from Create Next App

Depois de alguns meses, o site estava longe de estar finalizado, porém estava bom o suficiente. Como eu sempre sigo a idéia de que feito é melhor que perfeito, decidi colocar no ar, sem muito alarde. Só agora porém, meses depois, parei para escrever um post e contar essa história.

O quanto "pronto" eu esperei para colocar no ar?

Só nesse repositório novo, já foram 441 commits:

❯ git shortlog -sn
   441  Lucas Caton

Mas ainda tem muitas coisas para arrumar. Você provavelmente vai encontrar algumas partes meio feias, inacabadas ou até mesmo inexistes no site novo (não tem mais uma busca, por exemplo). Aos poucos, eu farei melhorias incrementais para re-adicionar o que falta e/ou corrigir o que precisa.

Valeu a pena?

Tudo saiu melhor que o planejado e talvez eu escreva posts separados no futuro para contar os vários motivos. De forma resumida, a flexibilidade e performance que o Next.js e o React têm, mudaram o jogo para mim. Falando nisso, deixa eu contar quais bibliotecas e ferramentas exatamente que o site novo está usando:

Stack

Mudei do GitHub Pages para a Vercel

Migrei para a Vercel por 3 motivos:

  • Melhor integração com o Next.js
  • Deploys mais simples
  • Plano gratuito bastante generoso

O que eu NÃO estou usando

  • Biblioteca com componentes prontos, exemplo: Bootstrap, Bulma, etc.
  • Pré-processador CSS, exemplo: SASS, SCSS, Slim, nem nenhum outro. Apenas Tailwind e CSS puro.

Layout próprio

Eu criei a UI de todas as páginas, menus, componentes, etc. Em todas as versões anteriores, eu usava templates prontos, mas resolvi eu mesmo criar um dessa vez. Ainda estou atualizando/melhorando várias partes que precisam de um pouco mais de amor :)

Screenshot do site novo criado em 2021

Feedback

Para concluir, eu adoraria saber o que você achou do site novo. Me conte nos comentários abaixo! 😉