next/image je optimizirana zamenjava Next.js za <img> tag. Samodejno uporabi sklad najboljših praks zmogljivosti slik, ki bi jih sicer implementirali ročno.
tsx
;
() {
(
);
}
next/image je optimizirana zamenjava Next.js za <img> tag. Samodejno uporabi sklad najboljših praks zmogljivosti slik, ki bi jih sicer implementirali ročno.
;
() {
(
);
}
srcset — ustvari več velikosti, tako da vsaka naprava prenese pravo.priority).width/height (ali fill) rezervirajo prostor, tako da se stran ne skoči, ko se slika naloži.placeholder="blur" prikazuje majhnen nejasno predogled med nalaganjem.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Uporabite fill (namesto fiksne širine/višine), kadar bi morala slika zapolniti svoj pozicionirani starš — pogosto za herojske/pokrivne slike.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Slike so običajno najtežja sredstva na strani in glavni vzrok slabih Core Web Vitals (LCP, CLS). next/image avtomatizira spreminjanje velikosti, sodobne formate, responzivni srcset, lenobna nalaganja in preprečevanje premika postavitve — spreminja večjo nalogo zmogljivosti v eno samo komponento, kjer je priority za LCP sliko edini gumb, ki se ga morate spomniti.