优化 Next.js 上的图片加载

默认情况下，除非您明确将 images.unoptimized 设置为 false 或使用自定义 Image Loader，否则内置 Next.js 图片优化会在 App Hosting 上停用。

您可以配置 Next.js 全局图片加载器，并使用图片处理 Firebase 扩展程序在 App Hosting 上按需优化和交付 Next.js 应用中的图片。

前提条件

• 您拥有 Firebase 项目和 App Hosting 后端。
• 您的项目中已启用 Cloud Storage。
• 您的项目中已启用 Cloud Functions for Firebase。

安装扩展程序

前往 Firebase Extensions Hub 中的图片处理扩展程序，然后选择 在 Firebase 控制台中安装。按照屏幕上的说明操作。

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

如果您的应用使用本地图片，并且您想使用此扩展程序对其进行优化，则需要在扩展程序安装过程中配置“主机名”参数。

1. 在扩展程序配置期间：当您到达“配置扩展程序”这一步时，找到“主机名”参数。

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

安装完成后，图片处理 API 应部署为 Cloud Functions 中的函数。在 Firebase 控制台中前往函数信息中心，然后复制图片处理 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 发布完成。