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

به‌طور پیش‌فرض، بهینه‌سازی تصویر Next.js داخلی در App Hosting غیرفعال است، مگراینکه صریحاً images.unoptimized را روی false تنظیم کنید یا از بارکننده تصویر سفارشی استفاده کنید.

می‌توانید بارکننده تصویر سراسری Next.js را با «افزونه Firebase پردازش تصویر» پیکربندی کنید تا بهینه‌سازی و تحویل تصاویر درخواستی را در برنامه Next.js در App Hosting فعال کنید.

پیش‌نیازها

  • پروژه Firebase و پس‌بخش App Hosting دارید.
  • Cloud Storage در پروژه شما فعال است.
  • Cloud Functions for Firebase در پروژه شما فعال است.

نصب افزونه

به افزونه پردازش تصویر در «مرکز افزونه‌های Firebase» بروید و نصب در کنسول Firebase را انتخاب کنید. دستورالعمل‌های روی صفحه را دنبال کنید.

پیکربندی بهینه‌سازی تصویر محلی (اختیاری)

اگر برنامه‌تان از تصاویر محلی استفاده می‌کند که می‌خواهید بااستفاده از این افزونه بهینه‌سازی کنید، باید پارامتر «نام میزبان» را درطول فرایند نصب افزونه پیکربندی کنید.

  1. درطول پیکربندی افزونه: وقتی به مرحله «پیکربندی افزونه» رسیدید، پارامتر «نام میزبان» را پیدا کنید.

  2. تنظیم نام میزبان: دامنه پیش‌فرض را برای Firebase App Hosting باطن وارد کنید. این دامنه معمولاً به .hosted.app ختم می‌شود.

پس‌از تکمیل نصب، Image Processing API باید به‌عنوان تابعی در Cloud Functions مستقر شود. به داشبورد توابع در کنسول Firebase بروید و نشانی وب راه‌انداز Image Processing API را کپی کنید.

راه‌اندازی بارکننده تصویر سفارشی

بارکننده تصویری ایجاد کنید که از Image Processing API مستقرشده برای هر مؤلفه تصویر بهینه‌شده استفاده کند. به‌عنوان یک بهینه‌سازی، بازنویسی به آن تا تحت همان دامنه Firebase App Hosting ارائه شود و در پشت همان CDN جهانی به‌عنوان برنامه Next.js شما ذخیره شود.

ابتدا فیلدهای زیر را به فایل next.config.js خود اضافه کنید:

// @ts-check

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    loader: "custom",
    loaderFile: "./loader.js",
  },
  async rewrites() {
    return [
      {
        source: "/_fah/image/:path*",
        destination:
          "<CLOUD_FUNCTIONS_URL>/:path*",
      },
    ];
  },
}

module.exports = nextConfig;

سپس یک فایل loader.js در دایرکتوری ریشه خود با محتوای زیر ایجاد کنید:

"use client"

export default function myImageLoader({ src, width, quality }) {
  if (process.env.NODE_ENV === "development") {
    return src;
  }

  const operations = [
    {
      operation: "input",
      type: "url",
      url: src,
    },
    { operation: "resize", width: width },
    { operation: "output", format: "webp", quality: quality || 75 },
  ];

  const encodedOperations = encodeURIComponent(JSON.stringify(operations));

  return `/_fah/image/process?operations=${encodedOperations}`;
}

ثبتی ایجاد کنید که شامل این تغییرات باشد و آن را به شاخه فعال خود روانه‌سازی کنید. سپس، منتظر بمانید تا عرضه App Hosting تکمیل شود.