next/image er Next.js's optimerede erstatning for <img>-tagget. Den anvender automatisk en stabel af bedste praksis for billedydeevne, som du ellers ville implementere manuelt.
tsx
;
() {
(
);
}
next/image er Next.js's optimerede erstatning for <img>-tagget. Den anvender automatisk en stabel af bedste praksis for billedydeevne, som du ellers ville implementere manuelt.
;
() {
(
);
}
srcset — genererer flere størrelser, så hver enhed downloader den rigtige.priority).width/height (eller fill) reserverer plads, så siden ikke hopper når billedet indlæses.placeholder="blur" viser en lille uskarpt preview under indlæsning.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Brug fill (i stedet for fast bredde/højde) når billedet skal fylde dets positionerede parent — almindeligt for hero/cover-billeder.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Billeder er typisk de tungeste aktiver på en side og en topårsag til dårlige Core Web Vitals (LCP, CLS). next/image automatiserer ændring af størrelse, moderne formater, responsiv srcset, lazy loading og forhindring af layout-skift — omdanner en vigtig ydelsesjob til en enkelt komponent, med priority for LCP-billedet som det eneste knap du skal huske.