next/image είναι η βελτιστοποιημένη αντικατάστασή του Next.js για την ετικέτα <img>. Εφαρμόζει αυτόματα μια σειρά από καλές πρακτικές απόδοσης εικόνας που θα έπρεπε διαφορετικά να υλοποιήσετε με το χέρι.
tsx
;
() {
(
);
}
next/image είναι η βελτιστοποιημένη αντικατάστασή του Next.js για την ετικέτα <img>. Εφαρμόζει αυτόματα μια σειρά από καλές πρακτικές απόδοσης εικόνας που θα έπρεπε διαφορετικά να υλοποιήσετε με το χέρι.
;
() {
(
);
}
srcset — δημιουργεί πολλαπλά μεγέθη ώστε κάθε συσκευή να κατεβάσει το σωστό.priority).width/height (ή fill) διατηρούν χώρο ώστε η σελίδα να μην πηδά όταν φορτώνεται η εικόνα.placeholder="blur" εμφανίζει μια μικρή θολή προεπισκόπηση κατά τη φόρτωση.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Χρησιμοποιήστε fill (αντί για σταθερό πλάτος/ύψος) όταν η εικόνα θα πρέπει να γεμίσει το τοποθετημένο γονέα της — συνηθισμένο για εικόνες ήρωα/εξωφύλλου.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Oι εικόνες είναι συνήθως τα βαρύτερα περιουσιακά στοιχεία σε μια σελίδα και μια κύρια αιτία για χαμηλά Core Web Vitals (LCP, CLS). Το next/image αυτοματοποιεί την αλλαγή μεγέθους, τις σύγχρονες μορφές, το αντιδραστικό srcset, τη χαμηλής προτεραιότητας φόρτωση και την πρόληψη του κυλίσματος διάταξης — μετατρέποντας ένα σημαντικό έργο απόδοσης σε ένα μόνο στοιχείο, με priority για την εικόνα LCP που είναι ο μόνος διακόπτης που πρέπει να θυμάστε.