ahmad hasanzadeh branding logoahmad hasanzadeh branding logo
    خانهپروژه هامقالاتدرباره منتکنولوژی هاارتباط با من
ahmad hasanzadeh branding logoahmad hasanzadeh branding logo

ممنون که سر زدی ッ

© ۱۴۰۵

احمد حسن زاده. تمامی حقوق محفوظ است.

بهینه‌سازی تصاویر در Next.js: راهنمای کامل next/image

بهینه‌سازی تصاویر در Next.js: راهنمای کامل next/image

آموزش کامل کامپوننت next/image در Next.js شامل تصاویر محلی، ریموت، ایمپورت استاتیک و پیکربندی remotePatterns بر اساس مستندات رسمی.

بهینه‌سازی تصاویر در Next.js چیست؟

کامپوننت <Image> در Next.js، عنصر استاندارد <img> در HTML را گسترش می‌دهد تا بهینه‌سازی تصاویر را به‌صورت خودکار و بدون نیاز به پیکربندی پیچیده در اختیار توسعه‌دهنده قرار دهد. این کامپوننت بخشی جدایی‌ناپذیر از معماری App Router در Next.js است و برای رفع مشکلات رایج کارایی مرتبط با تصاویر در وب طراحی شده است.

چرا بهینه‌سازی تصاویر اهمیت دارد؟

کامپوننت <Image> چهار مزیت اصلی نسبت به تگ ساده <img> ارائه می‌دهد:

  • بهینه‌سازی اندازه: ارائه خودکار تصویر با اندازه مناسب برای هر دستگاه، با استفاده از فرمت‌های مدرن مانند WebP.
  • پایداری بصری: جلوگیری خودکار از Layout Shift هنگام بارگذاری تصاویر.
  • بارگذاری سریع‌تر صفحه: بارگذاری تصاویر تنها زمانی که وارد viewport می‌شوند (Lazy Loading بومی مرورگر)، همراه با گزینه اختیاری Placeholder محو (blur-up).
  • انعطاف‌پذیری دارایی‌ها: تغییر اندازه تصاویر به‌صورت درخواستی (on-demand)، حتی برای تصاویری که روی سرورهای Remote ذخیره شده‌اند.

برای شروع استفاده از این کامپوننت، کافی است آن را از next/image ایمپورت کرده و در کامپوننت خود رندر کنید:

app/page.tsxtsx
import Image from 'next/image'
 
export default function Page() {
  return <Image src="" alt="" />
}

مقدار src می‌تواند یک تصویر Local یا Remote باشد.

تصاویر Local

فایل‌های استاتیک مانند تصاویر و فونت‌ها را می‌توان در پوشه‌ای به نام public در ریشه پروژه ذخیره کرد. فایل‌های داخل این پوشه از طریق URL پایه (/) در کد قابل ارجاع هستند.

app/page.tsxtsx
import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

ایمپورت استاتیک تصاویر

اگر تصویر به‌صورت استاتیک ایمپورت شود، Next.js به‌طور خودکار width و height ذاتی تصویر را تشخیص می‌دهد. این مقادیر برای تعیین نسبت تصویر و جلوگیری از Cumulative Layout Shift هنگام بارگذاری استفاده می‌شوند.

app/page.tsxtsx
import Image from 'next/image'
import ProfileImage from './profile.png'
 
export default function Page() {
  return (
    <Image
      src={ProfileImage}
      alt="Picture of the author"
      // width={500} به‌صورت خودکار فراهم می‌شود
      // height={500} به‌صورت خودکار فراهم می‌شود
      // blurDataURL="data:..." به‌صورت خودکار فراهم می‌شود
      // placeholder="blur" // اختیاری، برای نمایش محو هنگام بارگذاری
    />
  )
}

تصاویر بدون ایمپورت استاتیک

اگر امکان استفاده از import استاتیک برای تصاویر وجود نداشته باشد، می‌توان از import() داینامیک درون یک Server Component استفاده کرد تا همچنان width، height و blurDataURL به‌صورت خودکار به دست بیایند:

app/blog/[slug]/page.tsxtsx
import Image from 'next/image'
 
async function PostImage({
  imageFilename,
  alt,
}: {
  imageFilename: string
  alt: string
}) {
  const { default: image } = await import(
    `../content/blog/images/${imageFilename}`
  )
  // image شامل width، height و blurDataURL است
  return <Image src={image} alt={alt} />
}

اگر یک path alias (مانند @/) پیکربندی شده باشد، می‌توان به‌جای مسیر نسبی از آن استفاده کرد:

app/example.tsxtsx
const { default: image } = await import(
  `@/content/blog/images/${imageFilename}`
)

نکته مهم این است که مسیر باید شامل یک پیشوند استاتیک (مانند ../content/blog/images/) باشد. بهتر است این مسیر تا حد امکان دقیق و مشخص باشد، چون تمام فایل‌های منطبق با آن پیشوند در باندل قرار می‌گیرند. تنها فایل‌های داخل دایرکتوری مشخص‌شده شامل می‌شوند و ورودی خارجی نمی‌تواند خارج از آن دایرکتوری دسترسی پیدا کند.

تصاویر Remote

برای استفاده از یک تصویر ریموت، می‌توانید یک رشته URL را به‌عنوان مقدار src بدهید.

app/page.tsxtsx
import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

از آنجا که Next.js در زمان build به فایل‌های Remote دسترسی ندارد، لازم است مقادیر width، height و به‌صورت اختیاری blurDataURL را به‌صورت دستی مشخص کنید. مقادیر width و height برای تعیین نسبت تصویر صحیح و جلوگیری از Layout Shift هنگام بارگذاری استفاده می‌شوند. به‌عنوان جایگزین، می‌توانید از پراپرتی fill استفاده کنید تا تصویر اندازه المان والد را پر کند.

پیکربندی امن دامنه‌های Remote

برای اجازه دادن ایمن به تصاویر از سرورهای ریموت، باید فهرستی از الگوهای URL مجاز را در فایل next.config.js تعریف کنید. برای جلوگیری از سوءاستفاده احتمالی، بهتر است این الگوها تا حد امکان دقیق باشند. برای مثال، پیکربندی زیر فقط اجازه دسترسی به تصاویر یک باکت مشخص در AWS S3 را می‌دهد:

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

جمع‌بندی

کامپوننت <Image> در Next.js با ارائه تغییر اندازه خودکار، فرمت‌های مدرن، Lazy Loading بومی و جلوگیری از Layout Shift، یکی از مؤثرترین ابزارها برای بهبود کارایی و تجربه کاربری در پروژه‌های Next.js است. چه از تصاویر Local استفاده کنید و چه از منابع ریموت، رعایت نکات ذکرشده در این مقاله — به‌ویژه تعیین صحیح width، height و پیکربندی امن remotePatterns — تضمین می‌کند که تصاویر پروژه شما هم سریع بارگذاری شوند و هم از نظر امنیتی قابل‌اطمینان باشند.

برای بررسی مجموعه کامل قابلیت‌های این کامپوننت، به مستندات رسمی Image Component مراجعه کنید.

ادمین

نویسنده:

ادمین
دقیقه:6
انتشار :۱۴۰۵/۴/۲۳
آپدیت :۱۴۰۵/۴/۲۳

دسته بندی ها

فرانت‌اند

تگ ها

#Next.js#next/image#بهینه‌سازی تصویر#کارایی وب#App Router