<Image>

مكوّن الصور المُحسَّنة next/image <Image>

يوسّع <img> بتحسين تلقائي: أحجام متجاوبة، صيغ حديثة (WebP/AVIF)، وتحميل كسول، لتفادي قفزة التخطيط (layout shift).

يستورد من next/image. src تقبل مسار محلي، رابط خارجي (يحتاج إعداد remotePatterns بـ next.config.ts)، أو استيراد ثابت لملف صورة. width وheight إلزاميان إلا مع الاستيراد الثابت أو خاصية fill.

من Next.js 16، خاصية priority القديمة صارت مهجورة لصالح preload — استخدم preload={true} فقط للصورة الأهم بأعلى الصفحة (LCP).

الصياغة

import Image from 'next/image';
<Image src="/path.png" width={500} height={500} alt="..." />

📄 مثال

import Image from 'next/image';

export default function Avatar() {
  return (
    <Image
      src="/profile.png"
      width={200}
      height={200}
      alt="صورة المستخدم"
      preload
    />
  );
}

أهم النقاط

العنصر	الوظيفة
src	مسار محلي، رابط خارجي (يحتاج remotePatterns)، أو استيراد ثابت
width / height	الحجم الجوهري بالبكسل لضبط نسبة العرض للارتفاع — إلزامي إلا مع fill أو استيراد ثابت
fill	يملأ العنصر الأب بالكامل — الأب لازم يكون position: relative أو absolute

💡 نصائح عملية

استخدم preload={true} فقط لصورة LCP الظاهرة فوق الطية مباشرة، لا لعدّة صور بنفس الصفحة
حدّد خاصية sizes مع fill أو التخطيط المتجاوب عشان srcset الصحيح يُولَّد بحجم مناسب لكل شاشة

⚠️ أخطاء شائعة

نسيان width وheight مع صورة خارجية ديناميكية — يسبب قفزة تخطيط (layout shift) أثناء التحميل
استخدام priority القديمة بدل preload — انتقلت التسمية من Next.js 16

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار NEXTJS الكامل بالعربي.