Next.js: Novidades na versão 10 e atualização do blog para melhorar a performance

React 3 de Nov de 2020

☕ Introdução

Se você nos acompanhou nos últimos posts, já viu que criamos um blog com um contador de visitas usando o MongoDB e Next.js, depois adicionamos a funcionalidade de dark mode.

Na semana passada aconteceu a Next.js Conf. Uma das surpresas foi o anúncio da versão 10, com várias melhorias.

Vamos experimentar algumas dessas melhorias e aplicar na prática no blog que criamos para ir evoluindo com essa ferramenta que tem revolucionado a web.

Novidades na versão 10:

Built-in Image Component and Automatic Image Optimization: Otimização automática de imagens usando o novo componente <Image/> de next/imagem;
Internationalized Routing: Facilidades na internacionalização do projeto web;
Next.js Analytics: Dashboard na plataforma da Vercel com dados reais sobre o comportamento do usuário na aplicação e sua performance;
Next.js Commerce: Boilerplate muito bonito e performático, com as melhores práticas para desenvolver o Front End de um e-commerce;
React 17 Support: Agora você não precisa importar o React toda vez que criar ou usar um componente React — diminuindo assim várias linhas de código;
getStaticProps / getServerSideProps Fast Refresh: Pode editar os códigos dentro desses métodos sem precisar reiniciar o app manualmente;
Fast Refresh for MDX: When using @next/mdx, Se que mexer no conteúdo que está em Markdown o app faz refresh sem precisar ser feito manualmente;
Importing CSS from Third Party React Components: Suporte a importação apenas do CSS necessário do componente de bibliotecas de terceiros;
Blocking Fallback for getStaticPaths: Melhoria na geração de páginas dinâmicas no servidor.

🔄 Atualizando o blog para versão 10

O primeiro passo é, claro, atualizar o Next.js

npm i next@latest

E, já que estamos aqui, esse foi o comando que executei no projeto foi para atualizar o React também:

npm i react@latest react-dom@latest

🖼️ Otimizando as imagens

Para obter a vantagem da otimização nativa do Next.js na renderização de imagens, alterei todos os componentes avatar.tsx e cover-image.tsx que estavam com a tag img para Image do pacote next/image passei os tamanhos reais das imagens nas props width e height .

Arquivos:

components/avatar.tsx
components/cover-image.tsx

Exemplo do avatar.tsx

De:

<img
    src={picture}
    className="w-12 h-12 rounded-full mr-4"
    alt={name}
/>

Para:

<Image
    src={picture}
    width={48}
    height={48}
    className="w-12 h-12 rounded-full mr-4"
    alt={name}
/>

Para mais detalhes, veja o commit.

Com isso, agora as imagens serão convertidas para o formato webP, seu tamanho será diminuído sem perder a qualidade e passarão a ser cacheadas automaticamente.

Serão carregadas em tela assim que estiverem próximas de aparecer em tela, ou seja, só se for realmente visualizada. Isso é um benefício na performance do projeto, confira abaixo:

Maximize a tela e escolha HD para ver melhor o Gif – Testando os componente <Image/>

Essa última imagem tem 44 Kb na máquina local, usando o componente Image ela passa a ter 9.4 Kb na renderização, como pudemos ver no gif acima.

Também temos a opção de configurar para que a imagem seja redimensionada para cada tamanho de tela, referente ao dispositivo, e, com isso, ela fica ainda mais otimizada.

🚀 Refazendo o deploy

Para testar a novar versão em produção, executei o comando:

vercel --prod

Se o projeto estiver integrado com GitHub, não precisa desse comando. Vercel já detecta o novo commit da branch main e faz o novo deploy.

Pronto, projeto no ar!

📈 Habilitando o Analytics

Quando a Vercel detecta a versão 10 do projeto, ela libera o Analytics e, depois de uns 30 minutos que seu site recebe visitas, exibe os dados no dashboard.

Depois de um tempo você terá um resultado assim:

Vercel Analytics funcionando, exibindo gráficos com os dados reais

Link do Código fonte e projeto online 🟢

👍 Conclusão

Foram atualizações bastante interessantes e o mais impactante nessa versão é novo componente de imagens, justamente porque elas ocupam 50% do total de bytes nas páginas webs. O Suporte ao webP nos navegadores está aumentando, conforme podemos observar aqui.

Um post no blog com duas imagens e um gif pode ter de 200kb a 500kb. Isso caso a pessoa ou empresa se preocupar em usar alguma ferramenta de otimização de imagens ou usar os formatos modernos.

Se quiser ouvir mais sobre o Next.js na versão 10, assista esse vídeo onde o Diego Fernandes, João Pedro Schmitz e Guilherme Rodz fizeram um overview sobre as novidades:

Além de vários códigos de exemplos para trabalhar com Next.js, aumentando a experiência do desenvolvedor e o próprio commerce, a Vercel informou também que vai liberar o código fonte da plataforma de eventos.

Se ainda não ficou claro porque o Next.js está revolucionando a maneira de trabalhar no Front End, veja esse vídeo: