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

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

您可以透過 Image Processing Firebase 擴充功能設定 Next.js 全域圖片載入器，在 App Hosting 上啟用 Next.js 應用程式中的圖片隨選最佳化和傳送功能。

事前準備

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

安裝擴充功能

前往 Firebase Extensions Hub 中的「Image Processing Extension」，然後選取「Install in Firebase Console」。按照畫面上的指示操作。

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

如果應用程式使用您想透過這個擴充功能最佳化的本機圖片，您需要在擴充功能安裝程序中設定「主機名稱」參數。

1. 擴充功能設定期間：進入「設定擴充功能」步驟時，請找出「主機名稱」參數。

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

安裝完成後，圖片處理 API 應會部署為 Cloud Functions 中的函式。前往 Firebase 控制台的「Functions dashboard」(函式資訊主頁)，然後複製 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 發布完成。