رفتار کامپوننت <Image> در Next.js در Import کردن

https://nextjs.org/docs/app/getting-started/images#remote-images

۱. روش Import (ایستاتیک یا داینامیک):

• نحوه کار: از طریق import pic from '@/public/pic.jpg' یا await import(...).

• پردازش فایل: Next.js (توسط Webpack/Turbopack) فایل فیزیکی را از روی هارد می‌خواند.

• مزایا (خودکار):

• ابعاد (width و height) را خودش تشخیص می‌دهد.

• نسخه تار تصویر (Base64) را برای لودینگ (placeholder="blur") می‌سازد.

• فضای تصویر را در صفحه رزرو می‌کند تا از پرش صفحه (CLS) جلوگیری شود.

۲. روش String URL (آدرس متنی):

• نحوه کار: ارسال مستقیم آدرس به صورت رشته متنی مثل src="/images/pic.jpg".

• پردازش فایل: فایلی پردازش نمی‌شود؛ این فقط یک آدرس است که به مرورگر کاربر داده می‌شود تا بعداً دانلودش کند.

• محدودیت‌ها:

• Next.js ابعاد فایل را نمی‌داند.

• الزام: توسعه‌دهنده باید حتماً width و height را دستی وارد کند (یا از پروپ fill استفاده کند).

• امکان استفاده از placeholder="blur" به صورت خودکار وجود ندارد.

💡 علت فنی این تفاوت:

Next.js برای جلوگیری از به هم ریختگی چیدمان سایت (Layout Shift) باید از قبل سایز عکس را بداند. در روش Import چون فایل خوانده می‌شود سیستم سایز را می‌فهمد، اما در روش String چون فقط یک آدرس اینترنتی پاس داده شده، سیستم غیب‌گو نیست و از شما می‌خواهد سایز را صراحتاً اعلام کنید.