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

[antonioalexandre1984]

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

Para:

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: