Migrei meu site para Next.js

Depois de usar WordPress, Enki e Jekyll, meu site finalmente está como eu quero e usando React!

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

React.js (https://reactjs.org/) & Next.js (https://nextjs.org/).
- Aproveite para conhecer meu curso! 😉
Posts em Markdown - um dos pré-requisitos que eu mesmo defini é que eu não queria mudar absolutamente nada nos arquivos dos posts. Até mesmo o front matter eu mantive o mesmo que usava com Jekyll. Só que agora são as bibliotecas react-markdown e gray-matter que convertem tudo.
TailwindCSS (https://tailwindcss.com/) - eu tenho usado esse framework CSS na maioria dos meus projetos e continuo achando ele sensacional. Se você não conhece, vale a pena dar uma olhada no canal deles no YouTube. Veja mais detalhes na sessão "Layout próprio" abaixo.
Styled components - https://styled-components.com/.
TypeScript (https://www.typescriptlang.org/) & TypeScript Coverage Report (https://github.com/alexcanessa/typescript-coverage-report).
React Highlight (https://react-highlight.neostack.com/) - suporte para syntax highlighting em aplicações React.
Disqus (https://disqus.com/) - já usava antes e continuo usando esse serviço para permitir comentários nos posts.
ES Lint (https://eslint.org/) & Prettier (https://prettier.io/) - para manter os estilos e qualidade do código.
Jest - https://jestjs.io/.

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 :)

Feedback

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