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

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

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

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

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

התקנת התוסף

עוברים אל התוסף Image Processing (עיבוד תמונות) במרכז התוספים של 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 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.