نحوه استفاده کامپوننت Image در Next

Next.js یک فریمورک محبوب برای React است که به توسعه‌دهندگان امکان می‌دهد وب‌اپلیکیشن‌های سریع و کاربرپسند ایجاد کنند. این فریمورک قابلیت‌های متعددی مانند مسیریابی، رندرینگ سمت سرور (SSR)، و بهینه‌سازی سئو را فراهم می‌کند.

Next.js به شما این امکان را می‌دهد که به راحتی صفحات استاتیک و داینامیک ایجاد کنید و از قابلیت‌های پیشرفته‌ای مانند API Routes برای ساختن APIهای خود استفاده کنید

همچنین، این فریمورک با Tailwind CSS به خوبی سازگار است و می‌توانید از آن برای طراحی رابط کاربری زیبا و واکنش‌گرا بهره ببرید.

کامپوننت Image

و اما میریم سر اصل مطلب یعنی آموزش کامپوننت Image در Next عزیز 😎

کامپوننت Image در Next.js برای بهینه‌سازی و مدیریت تصاویر در وب‌اپلیکیشن‌ها طراحی شده است. این کامپوننت ویژگی‌های متعددی دارد که به بهبود عملکرد و تجربه کاربری کمک می‌کند.

در اینجا به برخی از ویژگی‌های کلیدی آن اشاره می‌کنم:

بهینه‌سازی خودکار

کامپوننت Image به طور خودکار تصاویر را بهینه‌سازی می‌کند تا زمان بارگذاری کاهش یابد و عملکرد بهتری داشته باشد.

پشتیبانی از تصاویر ریموت و لوکال 

شما می‌توانید تصاویر را از منابع محلی یا ریموت بارگذاری کنید. برای تصاویر ریموت، باید عرض و ارتفاع تصویر را مشخص کنید.

ویژگی‌های مختلف 

این کامپوننت دارای ویژگی‌های متعددی مانند src (مسیر تصویر)، alt (متن جایگزین)، width و height (عرض و ارتفاع)، priority (اولویت بارگذاری)، و placeholder (جایگزین) است.

پشتیبانی از ریسپانسیو بودن

با استفاده از ویژگی sizes، می‌توانید تصاویر را برای دستگاه‌های مختلف بهینه‌سازی کنید.

گیف آموزش

و بله بالاخره میرسیم به بخش جذاب و دوست داشتنی این مقاله!! بزن بریم 👇

خوب اول از همه برای استفاده از کامپوننت Image باید "use client" رو قرار بدیم تا از کامپوننت هایی که به دام مربوط میشن بتونیم استفاده کنیم

و بعد خیلی شیک و مجلسی باید باید کامپوننت Image رو import کنیم

و حالا میایم کامپوننت Image رو مینویسیم و مقادیر و پراپ های ضروریش هم در ورودی هاش قرار میدیم

width: تعین عرض عکس / height: تعین ارتفاع عکس / src: مسیر عکس دلخواه / alt: درصورت لود نشدن تصویر، متن alt نشون داده میشه به کاربر

آموزش پراپ های بیشتر از این کامپوننت

پراپ priority:

ما با نوشتن این پراپ داریم عملا میگیم next عزیز این تصویر من در اولویت بالاتری نسبت به دیگر تصویر هاست پس هواست باشه اول این رو لود کنی ها (به این سادگی 😉)

شاید براتون سوال پیش اومده که کاش یه قابلیتی داشت تا زمانی که تصویر به صورت کامل لود نشده

اول به صورت محو به کاربر نشون داده بشه و پس از لود کامل ، تصویر به کاربر نشون داده بشه مثل گیف زیر که با هر بار رفرش صفحه ، اول تصویر blur نشون داده میشه

و بعد تصویر به صورت کامل به کاربر نشون داده میشه

خبر خوب اینه که این کامپوننت بهمون همچین قابلیتی رو میده 😊

پراپ placeholder: برای نمایش یک تصویر محو شده تا زمان بارگذاری کامل تصویر استفاده کنید

پراپ blurDataURL: این پراپ مسیر همین عکس اما نسخه بی کیفیت تر و کوچک ترشده اش رو مشخص میکنه.

به صورت کلی ما میایم و با استفاده از پراپ placeholder میگیم میخوایم عکس رو محو نشون بده در وحله اول و پراپ blurDataURL مسیر عکس رو مشخص میکنه. فقط حواستون باشه یک نسخه بی کیفیت و کم حجم اتخاب کنید

پراپ loading: 

می‌تواند به صورت lazy یا eager تنظیم شود. به طور پیش‌فرض، lazy است که باعث می‌شود تصاویر تنها زمانی بارگذاری شوند که در نمای کاربر قرار گیرند.

پراپ fill و objectFit:

fill: تصویر به طور کامل فضای والد خود را پر کند. این ویژگی به خصوص برای تصاویر پس‌زمینه یا تصاویر واکنش‌گرا مفید است.

objectFit: نحوه نمایش تصویر را تنظیم کنید. cover باعث می‌شود تصویر به طور کامل فضای والد را پر کند و contain باعث می‌شود تصویر درون فضای والد قرار گیرد بدون اینکه برش بخورد.

پراپ quality

کیفیت تصاویر را با استفاده از ویژگی quality در کامپوننت Image تنظیم کنید. این ویژگی عددی بین 1 تا 100 می‌پذیرد که کیفیت تصویر بهینه‌شده را تعیین می‌کند؛

1 پایین‌ترین کیفیت و 100 بالاترین کیفیت است. به طور پیش‌فرض، کیفیت تصاویر 75 تنظیم شده است که تعادلی بین کیفیت و حجم فایل ایجاد می‌کند

امیدوارم براتون مفید بوده باشه و بهره لازمه رو برده باشید 🤗