الأصول

يمكن لـ Next.js تقديم الأصول الثابتة، مثل الصور، تحت دليل public الأساسي. يمكن الإشارة إلى الملفات داخل public من جذر التطبيق بشكل مشابه لـ pages.

كما أن دليل public مفيد أيضًا لملفات مثل robots.txt، وتحقق موقع Google، وأي أصول ثابتة أخرى. يمكنك الاطلاع على وثائق خدمة الملفات الثابتة لمعرفة المزيد.

تنزيل صورة ملفك الشخصي

أولاً، لنسترجع صورة ملفك الشخصي.

• قم بتنزيل صورة ملفك الشخصي بصيغة .jpg (أو استخدم هذا الملف).
• أنشئ دليل images داخل دليل public.
• احفظ الصورة باسم profile.jpg في دليل public/images.
• يمكن أن يكون حجم الصورة حوالي 400 بكسل × 400 بكسل.
• يمكنك إزالة ملف SVG غير المستخدم مباشرة تحت دليل public.

الصورة غير المحسنة

مع HTML العادي، ستضيف صورة ملفك الشخصي كما يلي:

<img src="/images/profile.jpg" alt="Your Name" />

ومع ذلك، هذا يعني أنه يجب عليك التعامل يدويًا مع:

• التأكد من استجابة صورتك لأحجام الشاشات المختلفة
• تحسين صورك باستخدام أدوات أو مكتبات خارجية
• تحميل الصور فقط عند ظهورها في نطاق الرؤية

وأكثر من ذلك. بدلاً من ذلك، يوفر Next.js مكون Image جاهزًا للتعامل مع هذا نيابة عنك.

مكون الصورة وتحسين الصور

next/image هو امتداد لعنصر HTML <img>، تطور ليتناسب مع الويب الحديث.

كما أن Next.js يدعم تحسين الصور افتراضيًا. يتيح ذلك تغيير الحجم، والتحسين، وتقديم الصور بصيغ حديثة مثل WebP عندما يدعم المتصفح ذلك. يتجنب ذلك إرسال صور كبيرة إلى أجهزة بشاشات عرض أصغر. كما يسمح لـ Next.js باعتماد تلقائي لصيغ الصور المستقبلية وتقديمها للمتصفحات التي تدعم تلك الصيغ.

يعمل التحسين التلقائي للصور مع أي مصدر للصور. حتى إذا كانت الصورة مستضافة على مصدر بيانات خارجي، مثل نظام إدارة المحتوى (CMS)، فلا يزال يمكن تحسينها.

استخدام مكون الصورة

بدلاً من تحسين الصور أثناء وقت البناء، يقوم Next.js بتحسين الصور عند الطلب، عندما يطلبها المستخدمون. على عكس مولدات المواقع الثابتة والحلول الثابتة فقط، لا تزيد أوقات البناء لديك، سواء كنت ترسل 10 صور أو 10 ملايين صورة.

يتم تحميل الصور بشكل كسول افتراضيًا. وهذا يعني أن سرعة صفحتك لا تتأثر بالصور خارج نطاق الرؤية. يتم تحميل الصور عند التمرير إليها داخل نطاق الرؤية.

تُعرض الصور دائمًا بطريقة تتجنب انزياح التخطيط التراكمي (CLS)، وهو مقياس أساسي لويب فيتال تستخدمه Google في ترتيب البحث.

إليك مثالاً لاستخدام next/image لعرض صورة ملفنا الشخصي. يجب أن تكون خاصيات height و width هي الحجم المطلوب للعرض، مع نسبة أبعاد مطابقة للصورة الأصلية.

ملاحظة: سنستخدم هذا المكون لاحقًا في قسم "تحسين التخطيط"، لا داعي لنسخه الآن.

import Image from 'next/image';
 
const YourComponent = () => (
  <Image
    src="/images/profile.jpg" // مسار ملف الصورة
    height={144} // الحجم المطلوب مع نسبة الأبعاد الصحيحة
    width={144} // الحجم المطلوب مع نسبة الأبعاد الصحيحة
    alt="Your Name"
  />
);

لمعرفة المزيد عن التحسين التلقائي للصور، راجع الوثائق.

لمعرفة المزيد عن مكون Image، راجع مرجع API لـ next/image.