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

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

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

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

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

התקנת התוסף

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

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

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

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

2. מגדירים את שם המארח: מזינים את הדומיין שמוגדר כברירת מחדל עבור קצה העורפי של 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 ההשקה תסתיים.