next/image ni mbadala iliyoboresha ya Next.js kwa tag ya <img>. Inatumia kiotomatiki mipango ya mbinu za utendaji bora wa picha ambazo vinginevyo ungejengea kwa mkono.
tsx
;
() {
(
);
}
next/image ni mbadala iliyoboresha ya Next.js kwa tag ya <img>. Inatumia kiotomatiki mipango ya mbinu za utendaji bora wa picha ambazo vinginevyo ungejengea kwa mkono.
;
() {
(
);
}
srcset inayolingana — hutumia ukubwa mwingi ili kila kifaa kiunde kile kinachofaa.priority).width/height inayohitajika (au fill) huhifadhi nafasi ili ukurasa usigogoe picha inapokuja.placeholder="blur" inaonyesha hakikisho ndogo linaloemeza wakati wa kupakia.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Tumia fill (badala ya upana/urefu wa thabiti) picha inapaswa kujaza mzazi wake ulioingizwa — kawaida kwa picha za heroe/jalada.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Picha kwa kawaida ni mali nzito sana kwenye ukurasa na sababu kuu ya Core Web Vitals mbaya (LCP, CLS). next/image inakamatia ukubwa, muundo wa kisasa, srcset inayolingana, kupakia kwa kimalezevu na kuzuia mabadiliko ya usanidi — kubadilisha kazi kubwa ya utendaji kuwa kitengo kimoja, ambapo priority kwa picha ya LCP ndiyo kitufe tu kinachokupasa kukumbuka.
Maktaba ya maswali ya mahojiano ya IT yenye majibu ya kina — kutoka Junior hadi Senior.
Changia