优化 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。为了进行优化，请重写该网址，以便在与 Next.js 应用相同的 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 发布完成。