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