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

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

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

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

  • יש לכם פרויקט Firebase וצד לקוח של App Hosting.
  • Cloud Storage מופעל בפרויקט.
  • Cloud Functions for Firebase מופעל בפרויקט.

התקנת התוסף

עוברים אל Image Processing Extension במרכז התוספים של Firebase ובוחרים באפשרות Install in Firebase Console. פועלים לפי ההוראות במסך.

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

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

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

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

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

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

יוצרים מטען תמונות שמשתמש ב-Image Processing API לפריסה לכל רכיב תמונה שעובר אופטימיזציה. כאופטימיזציה, כותבים מחדש את הקוד כך שיוצג באותו דומיין App Hosting של Firebase ויאוחסן במטמון מאחורי אותו 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.