אופטימיזציה של טעינת תמונות ב-Next.js

כברירת מחדל, אופטימיזציה מובנית של תמונות ב-Next.js מושבתת ב-App Hosting, אלא אם מגדירים במפורש את images.unoptimized כ-false או משתמשים ב-Image Loader בהתאמה אישית.

אפשר להגדיר טוען תמונות גלובלי של Next.js באמצעות התוסף Image Processing Firebase כדי להפעיל אופטימיזציה של תמונות לפי דרישה והצגה של תמונות באפליקציית Next.js בכתובת App Hosting.

דרישות מוקדמות

  • יש לכם פרויקט Firebase וקצה עורפי (backend) של App Hosting.
  • ‫Cloud Storage מופעל בפרויקט.
  • ‫Cloud Functions for Firebase מופעל בפרויקט.

התקנת התוסף

עוברים אל Image Processing Extension (תוסף לעיבוד תמונות) ב-Firebase Extensions Hub (מרכז התוספים של Firebase) ובוחרים באפשרות Install in Firebase Console (התקנה במסוף Firebase). פועלים לפי ההוראות במסך.

הגדרה של אופטימיזציה של תמונות מקומיות (אופציונלי)

אם האפליקציה שלכם משתמשת בתמונות מקומיות שאתם רוצים לבצע אופטימיזציה שלהן באמצעות התוסף הזה, אתם צריכים להגדיר את הפרמטר Hostname (שם מארח) במהלך תהליך ההתקנה של התוסף.

  1. במהלך הגדרת התוסף: כשמגיעים לשלב 'הגדרת התוסף', מאתרים את הפרמטר 'שם המארח'.

  2. מגדירים את שם המארח: מזינים את דומיין ברירת המחדל של ה-Backend של Firebase App Hosting שלכם. בדרך כלל הדומיין הזה מסתיים ב-.hosted.app.

אחרי שההתקנה מסתיימת, צריך לפרוס את Image Processing API כפונקציה ב-Cloud Functions. עוברים אל לוח הבקרה של Functions במסוף Firebase ומעתיקים את כתובת ה-URL של הטריגר של Image Processing API.

הגדרת טעינת תמונות בהתאמה אישית

יוצרים image loader שמשתמש ב-Image Processing API שהופעל לכל image component שעבר אופטימיזציה. כדי לבצע אופטימיזציה, תשכתב את הכתובת כך שהיא תפעל תחת אותו דומיין של 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.