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 (بدلاً من 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 كونها الميزة الوحيدة التي يجب أن تتذكرها.