Next.js/image optimization

مكوّن الصورة وتحسين الصور في Next.js

يُعدّ مكون الصورة في Next.js امتدادًا لعنصر الصورة <img> في HTML وقد طُوِّر ليماشي تقنيات ويب الحديثة. يتضمن العنصر العديد من محسنات الأداء المدمجة معه ليساعدك في تحقيق نتيجة جيدة لمؤشرات ويب الحيوية Core Web Vitals التي طوّرتها غوغل. تمثل هذه النتائج مقياسًا مهمًا لتجربة المستخدم خلال زيارته لموقعك، كما تؤثر على ترتيب نتائج البحث في غوغل.

إليك بعض محسنات الأداء المدمجة في مكوِّن الصورة:

• أداء محسّن Improved Performance: يقدّم دومًا صورًا بالقياس الملائم لكل جهاز باستخدام التنسيقات الحديثة للصور.
• ثباتية بصرية Visual Stability: يمنع تلقائيًا مشكلة التغيير التراكمي للتخطيط Cumulative Layout Shift.
• تحميل أسرع للصفحة Faster Page Loads: تُحمّل الصور عندما تدخل نافذة العرض viewport فقط، مع خيار تغشية blur-up موضع الصورة.
• مرونة الموجودات Asset Flexibility: وذلك لإعادة تحجيم الصورة حتى لو كانت مخزّنة على خوادم بعيدة.

استخدام مكوِّن الصورة في Next.js

لإضافة صورة إلى تطبيقك، أدرج المكوِّن next/image:

import Image from 'next/image'

بإمكانك الآن تعريف السمة لصورتك (سواء عنوان محلي أو بعيد)

الصور المحلية

أدرج ملفات الصور المحلية التي تمتلك أحد الامتدادات التالية jpg. أو png. أو webp.:

import profilePic from '../public/me.png'

لا تدعم Next.js الدوال الديناميكية التالية: ()await import أو ()require، ولا بد أن يكون الإدراج import ساكنًا لكي يُحلل أثناء بناء التطبيق. تحدد Next.js تلقائيًا ارتفاع height واتساع width الصورة وفقًا للملف المُدرج. وتستخدم هاتين القيميتن في منع التغيير التراكمي للتخطيط أثناء تحميل الصورة.

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src={profilePic}
        alt="Picture of the author"
        // width={500} يُحدد تلقائيًا
        // height={500} يُحدد تلقائيًا
        // blurDataURL="data:..." يُحدد تلقائيًا
        // placeholder="blur" // سيُحمل خيارا التغشية
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

الصور البعيدة

لاستخدام صور موجودة على خادم بعيد لابد من استخدام عنوان URL كقيمة للخاصية src وقد يكون هذا العنوان نسبي أو مطلق. لا بد من تحديد قيم ارتفاع واتساع الصورة والخاصية الاختيارية blurDataURL يدويًا، إذ لن تتمكن Next.js من الوصول إلى الملفات البعيدة أثناء عملية بناء التطبيق:

import Image from 'next/image'

export default function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

النطاقات

قد تريد أحيانًا الوصول إلى صورة على خادم بعيد باستخدام الواجهة البرمجية المدمجة مع Next.js والخاصة بتحسين الصورة. لهذا، ابق على الإعدادت الافتراضية للمُحمِّل loader وضع عنوان URL المطلق للصورة كقيمة للخاصية src. ولتحمي تطبيقك من المستخدمين المشبوهين، لا بد من إعداد قائمة بأسماء النطاقات البعيدة التي تنوي الوصول إليها وفق هذا الأسلوب. هيّئ الأمر ضمن الملف next.config.js كما يلي:

module.exports = {
  images: {
    domains: ['example.com', 'example2.com'],
  },
}

المُحمِّلات

لاحظ كيف استخدمنا عنوان URL نسبي ("/me.png") في المثال السابق، وهذا ممكن نظرًا لمعمارية المُحمّلات loader في Next.js.

المُحمِّل هو دالة تولّد عناوين URL للصور، وتلحق نطاقًا جذريًا بالعنوان الموجود في الخاصية src، ومن ثم يوّلد مجموعة عناوين URL لطلب الصورة بقياسات مختلفة.تُستخدم تلك العناوين في توليد مجموعة الموارد srcset لكي يقدم التطبيق أو الموقع الصورة المناسبة لواجهة عرض جهاز الزائر.

يستخدم المحمِّل الافتراضي في الواجهة البرمجية لتحسين الصورة المدمجة معها والتي تحرص على تحسين الصورة التي أيًا كان موقعها ومن ثم يقدمها إلى التطبيق مباشرة من خادم. وإن أردت أن تحمّل الصورة مباشرة من منظومة إدارة محتوى أو من خادم للصور، يمكنك استخدام احد المحمًلات المدمجة أو أن تكتب شيفرة محمِّل خاص بك باستخدام عدة أسطر بسيطة من شيفرة JavaScript.

يمكن أن تُعرِّف المحمِّلات لتكون خاصة بصورة محددة أو على مستوى التطبيق ككل.

الأولوية

ينبغي أن تضيف الخاصية إلى الصورة التي ستمثل أضخم عنصر أثناء رسم الصفحة ضمن نافذة العرض Largest Contentful Paint (LCP) (يُعد زمن تصييرها مؤشرًا من مؤشرات ويب الحيوية) ولكل صورة محتملة. يتيح ذلك لخادم أن يحدد اولوية خاصة للصورة عند تحميلها (من خلال وسوم ماقبل التحميل أو تلميحات الأولوية) مما يعزز قيمة مؤشر LCP.

إن عنصر LCP هو نمطيًا الصورة الأضخم أو الكتلة النصية المرئية من الصفحة ضمن نافذة العرض. وعندما تنفذ الأمر next dev سترى تحذيرًا من قبل الطرفية إن كان هذا العنصر صورة <Image> لا تمتلك الخاصية priority.

حالما تُعرّف الصورة LCP، بإمكانك إضافة الخاصية كالتالي: