优化 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 扩展程序中心内的 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。作为 优化措施， 请将其重写为 在 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 推出完成。