next/image é a substituição otimizada do Next.js para a tag <img>. Ele aplica automaticamente um conjunto de melhores práticas de desempenho de imagem que você implementaria manualmente.
tsx
;
() {
(
);
}
next/image é a substituição otimizada do Next.js para a tag <img>. Ele aplica automaticamente um conjunto de melhores práticas de desempenho de imagem que você implementaria manualmente.
;
() {
(
);
}
srcset responsivo — gera vários tamanhos para que cada dispositivo baixe o correto.priority).width/height necessária (ou fill) reserva espaço para que a página não pule quando a imagem for carregada.placeholder="blur" mostra uma pequena visualização desfocada durante o carregamento.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Use fill (em vez de largura/altura fixa) quando a imagem deve preencher seu contêiner posicionado — comum para imagens hero/capa.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
As imagens geralmente são os ativos mais pesados de uma página e a principal causa de pobres Core Web Vitals (LCP, CLS). next/image automatiza o redimensionamento, formatos modernos, srcset responsivo, lazy loading e prevenção de deslocamento de layout — transformando uma tarefa de desempenho importante em um único componente, onde priority para a imagem LCP é o único botão que você precisa lembrar.