بهینه‌سازی تصاویر در Next.js – استفاده از تصاویر محلی و ریموت با کامپوننت <Image>

چرا از `<Image>` استفاده کنیم؟

کامپوننت next/image نسخه‌ای بهینه‌شده از تگ <img> است که امکانات زیر را فراهم می‌کند:

بهینه‌سازی اندازه: ارائهٔ خودکار تصویر با اندازه و فرمت مناسب (مانند WebP) برای هر دستگاه
ثبات بصری: جلوگیری از جابه‌جایی چیدمان هنگام بارگذاری تصویر
بارگذاری تنبل: بارگذاری تصویر فقط زمانی که وارد دید کاربر می‌شود
پیش‌نمایش محو: نمایش نسخهٔ کم‌کیفیت تا بارگذاری کامل تصویر
پشتیبانی از منابع خارجی: بهینه‌سازی تصاویر حتی از سرورهای ریموت

شروع استفاده

ابتدا کامپوننت را وارد کرده و در JSX استفاده کنید:

import Image from 'next/image'

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

استفاده از تصاویر محلی

تصاویر را در پوشهٔ /public قرار دهید و با مسیر نسبی از ریشه به آن‌ها ارجاع دهید:

<Image
  src="/profile.png"
  alt="تصویر نویسنده"
  width={500}
  height={500}
/>

وارد کردن ایستا

اگر تصویر را به‌صورت ایستا import کنید، Next.js به‌طور خودکار عرض، ارتفاع و placeholder محو را تشخیص می‌دهد:

import ProfileImage from './profile.png'

<Image
  src={ProfileImage}
  alt="تصویر نویسنده"
  placeholder="blur"
/>

استفاده از تصاویر ریموت

برای استفاده از تصاویر خارجی، کافی است URL تصویر را در src قرار دهید:

<Image
  src="https://s3.amazonaws.com/my-bucket/profile.png"
  alt="تصویر نویسنده"
  width={500}
  height={500}
/>

چون Next.js در زمان build به تصاویر ریموت دسترسی ندارد، باید width و height را به‌صورت دستی مشخص کنید تا نسبت تصویر حفظ شود و از جابه‌جایی چیدمان جلوگیری شود. همچنین می‌توانید از ویژگی fill برای پر کردن فضای والد استفاده کنید.

اجازه دادن به دامنه‌های ریموت

برای استفاده ایمن از تصاویر خارجی، دامنه‌های مجاز را در next.config.ts تعریف کنید:

// next.config.ts
import type { NextConfig } from 'next'

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

export default config

نکته: دامنه‌ها را به‌صورت دقیق مشخص کنید تا از سوءاستفاده جلوگیری شود.

جمع‌بندی

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