优化 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 发布完成。