🎯 چطور با MinIO و Thumbor تصاویر رو توی Next.js راحت و بهینه مدیریت کنیم؟

یکی از دردسرای همیشگی توی پروژه‌های فرانت‌اند، همین تصاویر هستن.
یا حجمشون زیاده، یا باید چند تا سایز مختلفشون رو ذخیره کنیم، یا وقتی می‌خوایم توی صفحه‌های مختلف استفاده کنیم کلی داستان پیش میاد.

من چند وقت پیش توی یه دوره‌ی جالب (آموزش پیشرفته NEXT JS) از وبسایت کلاسبان استاد عباس سپهوند با دوتا ابزار خیلی خفن آشنا شدم: MinIO و Thumbor.
گفتم تجربه‌م رو اینجا به اشتراک بذارم شاید به دردتون بخوره 👌
حتما دوره رو تهیه کنید که خیلی بیشتر از این توضیح داده
(راستشو بخواید هنوز توی پروژه‌های واقعی استفاده نکردم، ولی دارم آماده میشم تستشون کنم.)

🔹 MinIO چیه؟

اگر بخوام خیلی ساده بگم:
MinIO یه چیزی شبیه Amazon S3 ـه، فقط سبک‌تر، سریع‌تر و self-hosted.

یعنی می‌تونی روی سرور خودت راه‌اندازیش کنی و همه‌ی فایل‌ها (عکس، ویدئو، PDF و ...) رو توی اون نگه داری.
خودش بهت آدرس میده، مثل:

https://minio.example.com/bucket-name/image.jpg

🔹 Thumbor چیه؟

اینو عاشق میشی 😍
Thumbor یه سرویسه که به صورت on-the-fly عکس رو پردازش می‌کنه.

یعنی چی؟ یعنی فقط یه نسخه‌ی اصلی از عکسو نگه می‌داری. هر وقت کاربر سایز خاصی خواست، Thumbor همون موقع اون سایزو تولید می‌کنه.

مثلا:

https://thumbor.example.com/unsafe/400x300/smart/minio.example.com/bucket/image.jpg

این آدرس میگه: "بیا از عکس اصلی یه نسخه 400 در 300 بساز و بهم بده."

پس دیگه لازم نیست برای هر عکس ۳-۴ تا نسخه با سایز مختلف ذخیره کنی.

🔗 ترکیب MinIO و Thumbor

• عکس رو توی MinIO آپلود می‌کنی.

• وقتی درخواست میدی، Thumbor میره از MinIO برش می‌داره، تغییر اندازه میده و به کاربر نشون میده.

اینطوری هم مدیریت ساده‌تر میشه، هم حجم و سرعت بهینه‌تر.


🛠 حالا نوبت Next.js

حالت ۱: استفاده مستقیم از MinIO

اگه نخوای Thumbor رو وارد ماجرا کنی، مستقیم به Next.js میگی عکس‌هارو از MinIO لود کنه:

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'minio.example.com',
        pathname: '/bucket-name/**',
      },
    ],
  },
};

و بعد:

import Image from "next/image";

<Image 
  src="https://minio.example.com/bucket-name/image.jpg"
  alt="example"
  width={400}
  height={300}
/>

حالت ۲: استفاده از Thumbor به‌عنوان Loader

این حالت جذاب‌تره 😎 چون Thumbor خودش برات تصویر رو بهینه می‌کنه.

import Image, { ImageLoader } from "next/image";

const thumborLoader: ImageLoader = ({ src, width, quality }) => {
  return `https://thumbor.example.com/unsafe/${width}x0/${src}?quality=${quality || 80}`;
};

export default function MyImage() {
  return (
    <Image
      loader={thumborLoader}
      src="https://minio.example.com/bucket-name/image.jpg"
      alt="example"
      width={400}
      height={300}
    />
  );
}

✅ جمع‌بندی

• MinIO → برای ذخیره‌سازی امن و self-hosted

• Thumbor → برای بهینه‌سازی و ساخت سایزهای مختلف در لحظه

• Next.js → برای کنترل و مدیریت Image Loader

این سه‌تا کنار هم می‌تونن کلی به بهینه‌سازی پروژه کمک کنن.

💬 نظر شما چیه؟

من تازه با این ابزارها آشنا شدم و هنوز توی پروژه‌هام استفاده نکردم.
ولی اگه شما تجربه‌ی عملی با MinIO یا Thumbor دارید، خیلی خوشحال میشم توی کامنت‌ها بگید.
اینکه کجا استفاده کردید، چه چالشایی داشتید و چه نتیجه‌ای گرفتید 🙌