next/image shine mabawa na Next.js da aka haɓaka ga tag na <img>. Yana amfani da otomatikun jeri na abubuwan gogaggen aikin hoto waɗanda ba za ka bugi su kai tsaye ba.
tsx
;
() {
(
);
}
next/image shine mabawa na Next.js da aka haɓaka ga tag na <img>. Yana amfani da otomatikun jeri na abubuwan gogaggen aikin hoto waɗanda ba za ka bugi su kai tsaye ba.
;
() {
(
);
}
srcset da amsowa — yana aiki girma da yawa domin kowane trokin amfani ya kura daidai.priority).width/height (ko fill) yana ajiye wuri domin shafi bai raɗi ba yayin da hoto ke yin aiki.placeholder="blur" yana nuna kaɗan blurred preview yayin da ake aiki.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Yi amfani da fill (maimakon girma/tsaye na ajijiya) lokacin da hoto ya kamata ta cika wuri na iyaye — gama gama ga hotuwan hero/hoto.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Hotuwan kusan lallai abubuwan da aka nadi ne akan shafi da abun dadi na marasa kyau Core Web Vitals (LCP, CLS). next/image yana daidaita resizing, yaren zamani, srcset tare da amsowa, alo ɗagaggen aiki, da kai away juyewar layout — yana juyawa manyan aiki na gogaggen aikin zuwa sashi daya, tare da priority na LCP hoto ke zama batu daya da kake buƙatar tunani.
Ɗakin karatu na tambayoyin hira na IT tare da amsoshi cikakke — daga Junior zuwa Senior.
Ba da Gudummawa