By default, built-inNext.js imageoptimizationis disabled onApp Hosting unless you explicitly setimages.unoptimizedto false or use a customImageLoader.

You can configure a Next.js global image loader with the Image ProcessingFirebase Extension to enable on-demand optimization and delivery of images inyour Next.js app onApp Hosting.

Prerequisites

• You have a Firebase project and anApp Hosting backend.
• Cloud Storage is enabled in your project.
• Cloud Functions for Firebase is enabled in your project.

Install the extension

Navigate to theImage ProcessingExtension inthe Firebase Extensions Hub and selectInstall in Firebase Console. Followthe on-screen instructions.

Configurelocal image optimization (optional)

If your application uses local images that you want to optimize using thisextension, you need to configure the "Hostname" parameter during the extensioninstallation process.

1. During Extension Configuration: When you reach the "Configure extension"step, locate the "Hostname" parameter.

2. Set the Hostname: Enter the default domain for your FirebaseApp Hostingbackend. This domain typically ends with.hosted.app.

Once installation is complete, the Image Processing API should be deployed as afunction inCloud Functions. Navigate to theFunctionsdashboard in theFirebase console and copy the Image Processing API trigger URL.

Set up a custom image loader

Create animageloaderthat uses the deployed Image Processing API for every optimizedimagecomponent. As anoptimization,rewriteto it so that it's served under the same FirebaseApp Hosting domain and cachedbehind the same global CDN as your Next.js application.

First, add the following fields to yournext.config.jsfile:

// @ts-check/** @type {import('next').NextConfig} */constnextConfig={images:{loader:"custom",loaderFile:"./loader.js",},asyncrewrites(){return[{source:"/_fah/image/:path*",destination:"<CLOUD_FUNCTIONS_URL>/:path*",},];},}module.exports=nextConfig;

Then create aloader.js file in your root directory with the followingcontents:

"use client"exportdefaultfunctionmyImageLoader({src,width,quality}){if(process.env.NODE_ENV==="development"){returnsrc;}constoperations=[{operation:"input",type:"url",url:src,},{operation:"resize",width:width},{operation:"output",format:"webp",quality:quality||75},];constencodedOperations=encodeURIComponent(JSON.stringify(operations));return`/_fah/image/process?operations=${encodedOperations}`;}

Create a commit that includes these changes and push it to your live branch.Then, wait for theApp Hosting rollout to complete.