在 Next.js 上最佳化圖片載入

根據預設，除非您明確將 images.unoptimized 設為 false，或使用自訂圖片載入器，否則 App Hosting 會停用內建的 Next.js 圖片最佳化功能。

您可以使用 Image Processing Firebase Extensions，設定 Next.js 全域圖片載入器，在 App Hosting 上的 Next.js 應用程式中，隨選最佳化及提供圖片。

必要條件

  • 您有 Firebase 專案和 App Hosting 後端。
  • 專案已啟用 Cloud Storage。
  • 專案已啟用 Cloud Functions for Firebase。

安裝擴充功能

前往 Firebase Extensions Hub 的圖片處理擴充功能，然後選取「Install in Firebase Console」(在 Firebase 控制台中安裝)。按照畫面上的指示操作。

設定本機圖片最佳化 (選用)

如果應用程式使用本機圖片，且您想透過這項擴充功能最佳化圖片，則必須在擴充功能安裝程序中設定「Hostname」參數。

  1. 設定擴充功能時：在「設定擴充功能」步驟中，找出「Hostname」參數。

  2. 設定主機名稱：輸入 Firebase App Hosting 後端的預設網域。這個網域的結尾通常是 .hosted.app。

安裝完成後，Image Processing API 應會部署為 Cloud Functions 中的函式。前往 Firebase 控制台的「Functions」(函式) 資訊主頁，複製 Image Processing API 觸發條件網址。

設定自訂圖片載入器

建立圖片載入器，為每個最佳化的圖片元件使用已部署的 Image Processing API。為進行最佳化，請重寫至該網址，以便在與 Next.js 應用程式相同的 Firebase App Hosting 網域下提供，並在相同的全域 CDN 後方快取。

首先，請在 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 推出作業完成。