next/image är Next.js optimerade ersättning för <img>-taggen. Den tillämpar automatiskt en stapel av bästa metoder för bildprestanda som du annars skulle implementera för hand.
tsx
;
() {
(
);
}
next/image är Next.js optimerade ersättning för <img>-taggen. Den tillämpar automatiskt en stapel av bästa metoder för bildprestanda som du annars skulle implementera för hand.
;
() {
(
);
}
srcset — genererar flera storlekar så varje enhet hämtar rätt.priority).width/height (eller fill) reserverar utrymme så sidan inte hoppar när bilden läses in.placeholder="blur" visar en liten suddig förhandsvisning under inläsningen.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Använd fill (istället för fast bredd/höjd) när bilden ska fylla sin placerade överordnade — vanligt för hjälte-/omslagsbilder.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Bilder är vanligtvis de tyngsta tillgångarna på en sida och en toporsak till dåliga Core Web Vitals (LCP, CLS). next/image automatiserar storleksändring, moderna format, responsiv srcset, lat inläsning och layoutförskjutningsförebyggande — omvandlar en stor prestandauppgift till en enda komponent, där priority för LCP-bilden är den enda knapp du måste komma ihåg.