next/image je optimizirani zamjena Next.js-a za <img> tag. Automatski primjenjuje niz najboljih praksi za učinkovitost slike koju biste inače morali primjenjati ručno.
tsx
;
() {
(
);
}
next/image je optimizirani zamjena Next.js-a za <img> tag. Automatski primjenjuje niz najboljih praksi za učinkovitost slike koju biste inače morali primjenjati ručno.
;
() {
(
);
}
srcset — generiše više veličina kako bi svaki uređaj preuzeo pravi.priority).width/height (ili fill) rezerviše prostor tako da se stranica ne skače kada se slika učitava.placeholder="blur" prikazuje mali zamućen pretpregled tijekom učitavanja.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Koristite fill (umjesto fiksne širine/visine) kada slika treba popuniti svoga pozicioniranog roditelja — često za hero/naslovne slike.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Slike su obično najtežia sredstva na stranici i glavni uzrok loših Core Web Vitals (LCP, CLS). next/image automatizira promjenu veličine, moderne formate, odgovoran srcset, lijenoj učitavanje i sprječavanje pomjeranja rasporeda — pretvarajući veliku zadaću učinkovitosti u jednu komponentu, pri čem je priority za LCP sliku jedina kontrola koju trebate zapamtiti.
Knjižnica IT pitanja za razgovore za posao s detaljnim odgovorima — od Juniora do Seniora.
Doniraj