next/image એ <img> ટ્যાગ માટે Next.js નું શ્રેષ્ઠ બદલ છે. તે આપોઆપ ઇમેજ પ્રવર્તન શ્રેષ્ઠ અભ્યાસની શ્રેણી લાગુ કરે છે જે તમે અન્યથા હાથથી લાગુ કરી શકો છો.
tsx
;
() {
(
);
}
next/image એ <img> ટ્যાગ માટે Next.js નું શ્રેષ્ઠ બદલ છે. તે આપોઆપ ઇમેજ પ્રવર્તન શ્રેષ્ઠ અભ્યાસની શ્રેણી લાગુ કરે છે જે તમે અન્યથા હાથથી લાગુ કરી શકો છો.
;
() {
(
);
}
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 આકાર બદલવું, આધુનિક ફોર્મેટ્સ, પ્રતિક્રિયાશીલ srcset, આલસી લોડિંગ અને લેઆઉટ-શિફ્ટ પ્રતિરોધ આપોઆપ કરે છે — મુખ્ય પ્રવર્તન કાર્યને એક ઘટકમાં ફેરવે છે, priority LCP ઇમેજ સાથે એકમાત્ર નોબ છે જે તમે યાદ રાખવું જોઈએ.
વિગતવાર જવાબો સાથે IT ઇન્ટરવ્યૂ પ્રશ્નોની લાઇબ્રેરી — જુનિયરથી સિનિયર સુધી.
દાન કરો