next/image, <img> etiketi için Next.js'in optimize edilmiş bir yerine koymadır. Aksi takdirde elle uygulayacağınız bir dizi görüntü performansı en iyi uygulamalarını otomatik olarak uygular.
tsx
;
() {
(
);
}
next/image, <img> etiketi için Next.js'in optimize edilmiş bir yerine koymadır. Aksi takdirde elle uygulayacağınız bir dizi görüntü performansı en iyi uygulamalarını otomatik olarak uygular.
;
() {
(
);
}
srcset — birden çok boyut oluşturur, böylece her cihaz doğru olanı indirir.priority ile geçersiz kılın).width/height (veya fill) alanı ayırır, böylece görüntü yüklendiğinde sayfa atlamaz.placeholder="blur" yükleme sırasında küçük bir bulanık önizleme gösterir.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Görüntünün konumlandırılmış ebeveynini doldurması gerektiğinde fill kullanın (sabit genişlik/yükseklik yerine) — kahraman/kapak görüntüleri için yaygındır.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Görüntüler genellikle bir sayfadaki en ağır varlıklardır ve zayıf Core Web Vitals'ın (LCP, CLS) başlıca nedenidir. next/image, yeniden boyutlandırma, modern formatlar, duyarlı srcset, lazy yükleme ve düzen kayması önlemeyi otomatikleştirir — büyük bir performans görevini tek bir bileşene dönüştürür; burada LCP görüntüsü için priority hatırlamanız gereken tek düğmedir.