Next.JS

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.

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.