next/image Next.js को <img> tag को लागि अप्टिमाइज गरिएको प्रतिस्थापन हो। यसले स्वचालित रूपमा इमेज परफर्मेन्स सर्वश्रेष्ठ अभ्यासहरूको एक स्ट्याक लागु गर्छ जुन अन्यथा तपाईंले हातले लागु गर्नु पर्छ।
tsx
;
() {
(
);
}
next/image Next.js को <img> tag को लागि अप्टिमाइज गरिएको प्रतिस्थापन हो। यसले स्वचालित रूपमा इमेज परफर्मेन्स सर्वश्रेष्ठ अभ्यासहरूको एक स्ट्याक लागु गर्छ जुन अन्यथा तपाईंले हातले लागु गर्नु पर्छ।
;
() {
(
);
}
srcset — एकाधिक आकारहरू उत्पन्न गर्छ ताकि प्रत्येक डिभाइस सही आकार डाउनलोड गर्छ।priority बाट अनुमति दिनुहोस्)।width/height (वा fill) स्पेस सुरक्षित गर्छ ताकि पृष्ठ इमेज लोड हुँदा उछाल्दैन।placeholder="blur" लोडिङ गरिँदै गर्दा एक सानो धमिलो पूर्वावलोकन देखाउँछ।<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
जब इमेज यसको स्थितीमा राखिएको प्यारेन्टलाई भर्छ तब fill (निर्धारित width/height को बजाय) प्रयोग गर्नुहोस् — हीरो/कभर इमेजहरूको लागि सामान्य।
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
इमेजहरू सामान्यतः पृष्ठमा सबैभन्दा भारी सम्पत्ति हुन्छ र कमजोर Core Web Vitals (LCP, CLS) को शीर्ष कारण हुन्छ। next/image ले resizing, आधुनिक ढाँचाहरू, responsive srcset, lazy loading, र layout-shift prevention स्वचालित गर्छ — एक प्रमुख परफर्मेन्स काम गर्छको कार्यलाई एकल कम्पोनेन्टमा परिणत गर्छ, LCP इमेजको लागि priority यो एक नयब हो जुन तपाईंले मनन गर्नु पर्छ।
विस्तृत उत्तरसहित IT अन्तर्वार्ता प्रश्नहरूको पुस्तकालय — जुनियरदेखि सिनियरसम्म।
दान गर्नुहोस्