App Hosting पर, पहले से मौजूद Next.js इमेज ऑप्टिमाइज़ेशन की सुविधा डिफ़ॉल्ट रूप से बंद रहती है. हालांकि, अगर images.unoptimized को साफ़ तौर पर false पर सेट किया जाता है या कस्टम इमेज लोडर का इस्तेमाल किया जाता है, तो यह सुविधा चालू हो जाती है.
Next.js के ग्लोबल इमेज लोडर को Image Processing Firebase एक्सटेंशन के साथ कॉन्फ़िगर किया जा सकता है. इससे App Hosting पर आपके Next.js ऐप्लिकेशन में, मांग पर इमेज को ऑप्टिमाइज़ और डिलीवर किया जा सकता है.
ज़रूरी शर्तें
- आपके पास एक Firebase प्रोजेक्ट और एक App Hosting बैकएंड है.
- आपके प्रोजेक्ट में Cloud Storage चालू है.
- आपके प्रोजेक्ट में Cloud Functions for Firebase चालू है.
एक्सटेंशन इंस्टॉल करना
Firebase एक्सटेंशन हब में Image Processing Extension पर जाएं और Firebase कंसोल में इंस्टॉल करें को चुनें. स्क्रीन पर दिए गए निर्देशों का पालन करें.
लोकल इमेज ऑप्टिमाइज़ेशन को कॉन्फ़िगर करना (ज़रूरी नहीं)
अगर आपका ऐप्लिकेशन ऐसी स्थानीय इमेज का इस्तेमाल करता है जिन्हें आपको इस एक्सटेंशन का इस्तेमाल करके ऑप्टिमाइज़ करना है, तो आपको एक्सटेंशन इंस्टॉल करने की प्रोसेस के दौरान, "होस्टनेम" पैरामीटर को कॉन्फ़िगर करना होगा.
एक्सटेंशन कॉन्फ़िगरेशन के दौरान: "एक्सटेंशन कॉन्फ़िगर करें" चरण पर पहुंचने के बाद, "होस्टनेम" पैरामीटर ढूंढें.
होस्टनेम सेट करें: अपने बैकएंड के लिए डिफ़ॉल्ट डोमेन डालें. Firebase App Hosting आम तौर पर, इस डोमेन के आखिर में
.hosted.appहोता है.
इंस्टॉल होने के बाद, इमेज प्रोसेसिंग एपीआई को Cloud Functions में फ़ंक्शन के तौर पर डिप्लॉय किया जाना चाहिए. Firebase कंसोल में फ़ंक्शन डैशबोर्ड पर जाएं और इमेज प्रोसेसिंग एपीआई ट्रिगर का यूआरएल कॉपी करें.
कस्टम इमेज लोडर सेट अप करना
इमेज लोडर बनाएं, जो ऑप्टिमाइज़ किए गए हर इमेज कॉम्पोनेंट के लिए, डिप्लॉय किए गए इमेज प्रोसेसिंग एपीआई का इस्तेमाल करता हो. ऑप्टिमाइज़ेशन के तौर पर, इसे रीराइट करें, ताकि इसे उसी Firebase App Hosting डोमेन के तहत दिखाया जा सके और आपके Next.js ऐप्लिकेशन की तरह ही ग्लोबल सीडीएन में कैश मेमोरी में सेव किया जा सके.
सबसे पहले, अपनी 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 के रोल आउट होने का इंतज़ार करें.