next/image is de geoptimaliseerde vervanging van Next.js voor de <img> tag. Het past automatisch een reeks best practices voor imageprestaties toe die je anders handmatig zou implementeren.
tsx
;
() {
(
);
}
next/image is de geoptimaliseerde vervanging van Next.js voor de <img> tag. Het past automatisch een reeks best practices voor imageprestaties toe die je anders handmatig zou implementeren.
;
() {
(
);
}
srcset — genereert meerdere groottes zodat elk apparaat de juiste downloadt.priority).width/height (of fill) reserveert ruimte zodat de pagina niet springt wanneer de afbeelding laadt.placeholder="blur" toont een piepklein wazig voorbeeld terwijl het laadt.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Gebruik fill (in plaats van vaste breedte/hoogte) wanneer de afbeelding zijn gepositioneerde parent moet vullen — gebruikelijk voor hero/cover images.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Afbeeldingen zijn meestal de zwaarste assets op een pagina en een topveroorzaker van slechte Core Web Vitals (LCP, CLS). next/image automatiseert resizing, moderne formaten, responsive srcset, lazy loading en preventie van layoutverschuiving — een grote performanceklus omzetten in een enkel component, waarbij priority voor de LCP-afbeelding de ene knop is die je moet onthouden.
Een bibliotheek met IT-sollicitatievragen met gedetailleerde antwoorden — van Junior tot Senior.
Doneren