默认情况下,除非您明确将 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 控制台中安装。按照屏幕上的说明操作。
配置本地图片优化(可选)
如果您的应用使用本地图片,并且您想使用此扩展程序对其进行优化,则需要在扩展程序安装过程中配置“主机名”参数。
在扩展程序配置期间:当您到达“配置扩展程序”这一步时,找到“主机名”参数。
设置主机名:输入 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 发布完成。