Props کامپوننت Image در Next.js: راهنمای کامل (Next.js 16)
بررسی کامل props کامپوننت Image در Next.js شامل fill، sizes، preload، placeholder و quality همراه با مثالهای عملی.
کامپوننت Image یکی از قدرتمندترین ابزارهای Next.js برای بهینهسازی تصاویر است، اما خیلی از توسعهدهندهها فقط با چند prop پایهای آن مثل src و alt آشنا هستند و از قابلیتهای واقعیاش مثل کنترل دقیق روی lazy loading، placeholder، و کیفیت خروجی استفاده نمیکنند. در این مقاله تمام props کاربردی این کامپوننت را با مثالهای عملی بررسی میکنیم تا بتوانید تصاویر پروژهتان را هم از نظر عملکرد و هم از نظر تجربه کاربری بهینه کنید.
نکته مهم: این مقاله بر اساس Next.js 16 نوشته شده. اگر از نسخههای قدیمیتر استفاده میکنید، به بخش مربوط به preload توجه ویژه داشته باشید چون یک تغییر مهم در آن رخ داده است.
Props ضروری: src و alt
هر Image حداقل به دو prop نیاز دارد:
app/page.tsxtsx
import Image from 'next/image'export default function Page() { return ( <Image src="/profile.png" width={
500
}
height={500}
alt="تصویر پروفایل نویسنده"
/>
)
}
src میتواند سه نوع مقدار بگیرد:
مسیر داخلی مثل /profile.png
URL خارجی (که باید در remotePatterns تنظیمات next.config.js مجاز شده باشد)
ایمپورت استاتیک تصویر (import profile from './profile.png')
alt برای دسترسپذیری (accessibility) و سئو الزامی است. متن آن باید توصیفی و معنادار باشد، نه صرفاً تکرار کپشن اطراف تصویر. اگر تصویر کاملاً تزئینی است، مقدار آن را رشته خالی alt="" بگذارید.
width و height: چرا نباید نادیده گرفته شوند
این دو مقدار، ابعاد ذاتی (intrinsic) تصویر را مشخص میکنند تا مرورگر بتواند از همان ابتدا فضای لازم را رزرو کند و از Layout Shift جلوگیری شود. دقت کنید که این دو مقدار، اندازه نمایشی نهایی تصویر را تعیین نمیکنند؛ آن کار بر عهده CSS است.
تنظیم width و height الزامی است مگر در دو حالت:
تصویر از طریق ایمپورت استاتیک وارد شده باشد
از prop fill استفاده کنید
fill: وقتی ابعاد تصویر مشخص نیست
اگر نمیدانید ابعاد دقیق تصویر چقدر است، یا میخواهید تصویر کل فضای والد را پر کند، از fill استفاده کنید:
نکته حیاتی: والد این تصویر باید position: relative (یا fixed/absolute) داشته باشد، وگرنه تصویر به شکل درستی رندر نمیشود. برای کنترل نحوه جایگیری تصویر داخل کانتینر هم از objectFit: 'cover' یا objectFit: 'contain' استفاده کنید.
sizes: کلید تصاویر واکنشگرا
وقتی از fill استفاده میکنید یا تصویر با CSS واکنشگرا شده، باید sizes را هم مشخص کنید. بدون آن، مرورگر فرض میکند تصویر به اندازه کل viewport است و ممکن است فایل بزرگتری از حد نیاز دانلود شود.
وقتی sizes را تعریف میکنید، Next.js یک srcset کاملتر (مثلاً 640w، 750w و ...) تولید میکند که برای layoutهای واکنشگرا مناسبتر است. بدون sizes، فقط srcset محدودی (مثل 1x و 2x) ساخته میشود که برای تصاویر با اندازه ثابت کافی است.
quality: تعادل بین حجم فایل و کیفیت بصری
مقداری بین ۱ تا ۱۰۰ که کیفیت خروجی تصویر بهینهشده را کنترل میکند. مقدار پیشفرض ۷۵ است:
اگر در next.config.js مقدار qualities را محدود کرده باشید، عدد وارد شده باید دقیقاً با یکی از مقادیر مجاز مطابقت داشته باشد؛ در غیر این صورت نزدیکترین مقدار مجاز استفاده میشود.
preload (جایگزین priority در Next.js 16)
این یکی از مهمترین تغییراتی است که خیلی از منابع آموزشی هنوز آن را پوشش ندادهاند. تا قبل از Next.js 16، برای تصاویری که در بخش Largest Contentful Paint (LCP) صفحه قرار داشتند (مثلاً تصویر hero بالای صفحه)، از prop به نام priority استفاده میشد. از نسخه ۱۶ به بعد، این prop منسوخ (deprecated) شده و به جای آن باید از preload استفاده کنید:
tsx
<Image src="/hero.jpg" alt="تصویر اصلی صفحه" width={1200} height={600} preload/>
وقتی preload={true} باشد، یک تگ <link> در <head> صفحه درج میشود تا مرورگر بارگذاری تصویر را زودتر شروع کند. از این prop فقط برای تصویری استفاده کنید که واقعاً عنصر LCP صفحه است؛ استفاده بیرویه از آن روی چند تصویر همزمان، مزیت عملکردیاش را از بین میبرد. اگر صفحهتان چند تصویر دارد که هرکدام بسته به viewport میتوانند LCP باشند، بهجای preload بهتر است از loading="eager" یا fetchPriority="high" استفاده کنید.
placeholder و blurDataURL
برای بهبود حس بارگذاری صفحه، میتوانید یک placeholder موقت نمایش دهید:
blur: نمایش نسخه محو شده تصویر، که باید همراه با blurDataURL استفاده شود
یک Data URL دلخواه
اگر تصویر را با ایمپورت استاتیک (فرمت jpg، png، webp یا avif) وارد کرده باشید، blurDataURL بهصورت خودکار تولید میشود. برای تصاویر ریموت یا داینامیک باید خودتان آن را بسازید، مثلاً با ابزارهایی مثل Plaiceholder.
مقدار پیشفرض lazy است و تصویر تا زمانی که به viewport نزدیک نشود بارگذاری نمیشود. مقدار eager باعث بارگذاری فوری تصویر میشود؛ این را فقط برای تصاویری استفاده کنید که واقعاً باید بلافاصله لود شوند.
onLoad و onError
این دو callback به شما اجازه میدهند به رویدادهای بارگذاری تصویر واکنش نشان دهید:
بدون این تنظیم، درخواست به تصویر خارجی با خطای 400 مواجه میشود. این محدودیت برای جلوگیری از سوءاستفاده در Image Optimization API طراحی شده است.
اشتباهات رایجی که باید از آنها دور بمانید
فراموش کردن sizes روی تصاویر با fill، که باعث دانلود فایلهای بزرگتر از حد نیاز میشود
استفاده از preload روی چند تصویر همزمان، در حالی که فقط یک تصویر LCP واقعی وجود دارد
تغییر عرض تصویر با style بدون تنظیم height: 'auto'
استفاده نکردن از unoptimized برای SVG یا تصاویر خیلی کوچک
جمعبندی
کامپوننت Image در Next.js فراتر از یک <img> ساده است. با ترکیب درست props مثل sizes، preload، placeholder و quality، میتوانید هم Core Web Vitals پروژهتان را بهبود دهید و هم تجربه کاربری بهتری ارائه کنید. اگر روی Next.js 16 یا بالاتر کار میکنید، حتماً priority را با preload جایگزین کنید تا از هشدارهای deprecation در آینده جلوگیری کنید.
