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

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

您可以使用圖像處理 Firebase 擴充功能設定 Next.js 全域圖片載入器，在 App Hosting 的 Next.js 應用程式中啟用圖片的按需最佳化和提交功能。

事前準備

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

安裝擴充功能

前往 Firebase 擴充功能中心中的「圖像處理擴充功能」，然後選取「在 Firebase 主控台中安裝」。按照畫面上的指示操作。

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

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

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

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

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

設定自訂圖片載入器

請建立圖片載入器，為每個最佳化圖片元件使用已部署的圖像處理 API。做為最佳化，請重寫至該網域，以便在相同的 Firebase App Hosting 網域下提供服務，並在與 Next.js 應用程式相同的全域 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 發布完成。