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

مكون <Image> في Next.js يمتد لعنصر HTML <img> لتوفير:

تحسين الحجم: تقديم الصور بالحجم الصحيح تلقائيًا لكل جهاز، باستخدام صيغ الصور الحديثة مثل WebP.
الاستقرار المرئي: منع انزياح التخطيط (layout shift) تلقائيًا عند تحميل الصور.
تحميل أسرع للصفحات: تحميل الصور فقط عند دخولها نطاق الرؤية باستخدام التحميل المتكاسل (lazy loading) للمتصفح، مع وجود عناصر نائبة ضبابية اختيارية.
مرونة الأصول: تغيير حجم الصور عند الطلب، حتى الصور المخزنة على خوادم بعيدة.

للبدء باستخدام <Image>، قم باستيرادها من next/image وعرضها داخل مكونك.

import Image from 'next/image'

export default function Page() {
  return <Image src="" alt="" />
}

import Image from 'next/image'

export default function Page() {
  return <Image src="" alt="" />
}

خاصية src يمكن أن تكون صورة محلية أو بعيدة.

🎥 شاهد: تعلم المزيد عن كيفية استخدام next/image → YouTube (9 دقائق).

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

يمكنك تخزين الملفات الثابتة، مثل الصور والخطوط، داخل مجلد يسمى public في الدليل الجذري. يمكن بعد ذلك الإشارة إلى الملفات داخل public بواسطة الكود الخاص بك بدءًا من عنوان URL الأساسي (/).

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/profile.png"
      alt="صورة المؤلف"
      width={500}
      height={500}
    />
  )
}

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/profile.png"
      alt="صورة المؤلف"
      width={500}
      height={500}
    />
  )
}

يمكنك أيضًا استيراد واستخدام ملفات الصور المحلية. سيقوم Next.js تلقائيًا بتحديد العرض والارتفاع الجوهريين لصورتك بناءً على الملف المستورد. تُستخدم هذه القيم لتحديد نسبة الصورة ومنع انزياح التخطيط التراكمي (Cumulative Layout Shift) أثناء تحميل صورتك.

import Image from 'next/image'
import ProfileImage from './profile.png'

export default function Page() {
  return (
    <Image
      src={ProfileImage}
      alt="صورة المؤلف"
      // width={500} يتم توفيره تلقائيًا
      // height={500} يتم توفيره تلقائيًا
      // blurDataURL="data:..." يتم توفيره تلقائيًا
      // placeholder="blur" // اختياري: تأثير ضبابي أثناء التحميل
    />
  )
}

import Image from 'next/image'
import ProfileImage from './profile.png'

export default function Page() {
  return (
    <Image
      src={ProfileImage}
      alt="صورة المؤلف"
      // width={500} يتم توفيره تلقائيًا
      // height={500} يتم توفيره تلقائيًا
      // blurDataURL="data:..." يتم توفيره تلقائيًا
      // placeholder="blur" // اختياري: تأثير ضبابي أثناء التحميل
    />
  )
}

في هذه الحالة، يتوقع Next.js أن يكون ملف app/profile.png متاحًا.

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

لاستخدام صورة بعيدة، يمكنك توفير سلسلة عنوان URL لخاصية src.

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="صورة المؤلف"
      width={500}
      height={500}
    />
  )
}

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="صورة المؤلف"
      width={500}
      height={500}
    />
  )
}

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

للسماح بأمان للصور من الخوادم البعيدة، تحتاج إلى تحديد قائمة بأنماط عناوين URL المدعومة في next.config.js. كن محددًا قدر الإمكان لمنع الاستخدام الضار. على سبيل المثال، التكوين التالي سيسمح فقط بالصور من دلو AWS S3 معين:

import type { NextConfig } from 'next'

const config: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
        search: '',
      },
    ],
  },
}

export default config

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
        search: '',
      },
    ],
  },
}

الصورة

تحسين الصور في تطبيق Next.js الخاص بك باستخدام مكون `next/image` المدمج.

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

الصور المستوردة بشكل ثابت

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

الصورة

On this page