אופטימיזציה של טעינת תמונות ב-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 ובוחרים באפשרות Install in Firebase Console. פועלים לפי ההוראות במסך.

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

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

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

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

בסיום ההתקנה, ה-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}`;
}

יוצרים קובץ commit שכולל את השינויים האלה ודוחפים אותו להסתעפות הפעילה. לאחר מכן, צריך להמתין עד שההשקה של App Hosting תסתיים.