next/image er Next.js sin optimaliserte erstatning for <img>-taggen. Den bruker automatisk en rekke beste praksis for bildeytelses som du ellers ville implementert manuelt.
tsx
;
() {
(
);
}
next/image er Next.js sin optimaliserte erstatning for <img>-taggen. Den bruker automatisk en rekke beste praksis for bildeytelses som du ellers ville implementert manuelt.
;
() {
(
);
}
srcset — genererer flere størrelser slik at hver enhet laster ned den rette.priority).width/height (eller fill) reserverer plass slik at siden ikke hopper når bildet lastes.placeholder="blur" viser en bitteliten uskarpt forhåndsvisning mens den lastes.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Bruk fill (i stedet for fast bredde/høyde) når bildet skal fylle den posisjoneerte forelderen — vanlig for hero/cover-bilder.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Bilder er vanligvis de tyngste eiendelene på en side og en toppårsak til dårlige Core Web Vitals (LCP, CLS). next/image automatiserer endring av størrelse, moderne formater, responsiv srcset, lat lasting og forhindring av layoutforskyvning — det gjør en stor ytelsesjobb til en enkelt komponent, der priority for LCP-bildet er den ene knappen du må huske.
Et bibliotek av IT-intervjuspørsmål med detaljerte svar — fra Junior til Senior.
Doner