优化 Next.js 中的图片加载

默认情况下，除非您明确将 images.unoptimized 设置为 false 或使用自定义图片 加载器，否则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。按照屏幕上的说明操作。

配置本地图片优化（可选）

如果您的应用使用本地图片，并且您希望使用此扩展程序优化这些图片，则需要在扩展程序安装过程中配置“Hostname”（主机名）参数。

  1. 在扩展程序配置期间： 当您进入“配置扩展程序”步骤时，找到“Hostname”（主机名）参数。

  2. 设置主机名： 输入您的 Firebase App Hosting后端的默认网域。此网域通常以 .hosted.app 结尾。

安装完成后，Image Processing API 应作为 函数部署在 Cloud Functions 中。前往 函数 信息中心，然后复制 Image Processing API 触发器网址。Firebase

设置自定义图片加载器

创建一个使用已部署 Image Processing 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 推出完成。