Manipulação de Imagens no Next.js

Imagens desempenham um papel significativo na aparência visual de qualquer site. Vamos focar em como adicioná-las no Next.js.

O componente <Image> é uma versão avançada da tag HTML <img> convencional que oferece uma variedade de otimizações automáticas. Ele foi projetado para lidar com as complexidades do design web moderno e garante uma experiência visualmente estável ao usuário, mitigando mudanças de layout durante a fase de carregamento. O componente também redimensiona imagens de forma inteligente, o que reduz o consumo de banda em dispositivos com visualizações menores, otimizando assim a entrega do conteúdo.

De volta ao projeto

Vamos conferir como incorporar imagens em nosso projeto. Na pasta public, você encontrará hero-desktop.png e hero-mobile.png. Agora é hora de incluí-las no arquivo app/page.tsx utilizando o componente Image do next/image.

Ao navegar para a página inicial do aplicativo, a imagem deve estar visível.

Para a versão mobile, adicione outra imagem com largura de 560px e altura de 620px. Caso encontre algum problema, consulte a solução fornecida abaixo.

Na Prática