next/image este înlocuirea optimizată a Next.js pentru eticheta <img>. Aplică automat un set de bune practici de performanță a imaginilor pe care altfel le-ai implementa manual.
tsx
;
() {
(
);
}
next/image este înlocuirea optimizată a Next.js pentru eticheta <img>. Aplică automat un set de bune practici de performanță a imaginilor pe care altfel le-ai implementa manual.
;
() {
(
);
}
srcset receptiv — generează mai multe dimensiuni, astfel încât fiecare dispozitiv să descarce cea corectă.priority).width/height necesar (sau fill) rezervă spațiu, astfel încât pagina să nu sară atunci când se încarcă imaginea.placeholder="blur" afișează o mică previzualizare estompată în timp ce se încarcă.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Folosește fill (în loc de lățime/înălțime fixă) atunci când imaginea ar trebui să umple părintele poziționat — obișnuit pentru imagini hero/copertă.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Imagini sunt de obicei cele mai grele active pe o pagină și o cauză principală a Core Web Vitals slab (LCP, CLS). next/image automatizează redimensionarea, formatele moderne, srcset receptiv, încărcarea leneșă și prevenirea deplasării aspectului — transformând o sarcină majoră de performanță într-o singură componentă, cu priority pentru imaginea LCP fiind singurul buton pe care trebuie să-l reții.