next/image është zëvendësimi i optimizuar i Next.js për tag-un <img>. Zbatohet automatikisht një grup i praktikave më të mirë të performancës së imazheve që përndryshe do të zbatoni me dorë.
tsx
;
() {
(
);
}
next/image është zëvendësimi i optimizuar i Next.js për tag-un <img>. Zbatohet automatikisht një grup i praktikave më të mirë të performancës së imazheve që përndryshe do të zbatoni me dorë.
;
() {
(
);
}
srcset përgjegjës — gjeneron shumë madhësi në mënyrë që çdo pajisje të shkarkojë atë të duhur.priority).width/height e kërkuar (ose fill) rezervon hapësirë në mënyrë që faqja të mos kërcejë kur imazhi ngarkohet.placeholder="blur" shfaq një parapamje të vogël të nxirë gjatë ngarkesës.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Përdorni fill (në vend të gjerësisë/lartësisë fikse) kur imazhi duhet të mbushë prindërin e tij të pozicionuar — i zakonshëm për imazhe hero/mbulesë.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Imazhet janë zakonisht mjete më të rënda në një faqe dhe një shkak kryesor i vitals të dobë të Web Core (LCP, CLS). next/image automatizuar përmasimin, formate moderne, srcset përgjegjës, ngarkesë të vonuar dhe parandalimin e zhvendosjes së paraqitjes — transformon një detyrë të madhe të performancës në një komponent të vetëm, ku priority për imazhin LCP është butonin e vetëm që duhet të mbani mend.