ডিফল্ট হিসেবে, App Hosting-এ বিল্ট-ইন Next.js ইমেজ
অপ্টিমাইজেশন
বন্ধ করা থাকে, যদি না আপনি স্পষ্টভাবে
images.unoptimized
মিথ্যা হিসেবে সেট করেন অথবা কাস্টম ইমেজ
লোডার ব্যবহার করেন।
আপনি App Hosting-এ Next.js অ্যাপে অন-ডিমান্ড অপ্টিমাইজেশন এবং ছবি ডেলিভারি চালু করতে ইমেজ প্রসেসিং Firebase এক্সটেনশনের মাধ্যমে Next.js গ্লোবাল ইমেজ লোডার কনফিগার করতে পারেন।
পূর্বশর্ত
- আপনার একটি Firebase প্রোজেক্ট এবং একটি App Hosting ব্যাকএন্ড আছে।
- আপনার প্রোজেক্টে Cloud Storage চালু করা আছে।
- আপনার প্রোজেক্টে Cloud Functions for Firebase চালু করা আছে।
এক্সটেনশন ইনস্টল করুন
Firebase এক্সটেনশন হাবের ইমেজ প্রসেসিং এক্সটেনশন বিকল্পে গিয়ে Firebase কনসোলে ইনস্টল করুন বিকল্প বেছে নিন। স্ক্রিনে দেখানো নির্দেশাবলী অনুসরণ করুন।
স্থানীয় ছবি অপ্টিমাইজেশন কনফিগার করা (ঐচ্ছিক)
আপনার অ্যাপ্লিকেশন যদি লোকাল ছবি ব্যবহার করে যা আপনি এই এক্সটেনশন ব্যবহার করে অপ্টিমাইজ করতে চান, তাহলে এক্সটেনশন ইনস্টলেশন প্রসেসের সময় আপনাকে "হোস্টনেম" প্যারামিটার কনফিগার করতে হবে।
এক্সটেনশন কনফিগার করার সময়: "এক্সটেনশন কনফিগার করুন" ধাপে পৌঁছে "হোস্টনেম" প্যারামিটারটি খুঁজে নিন।
হোস্টনেম সেট করুন: আপনার Firebase App Hosting ব্যাকএন্ডের জন্য ডিফল্ট ডোমেন লিখুন। এই ডোমেন সাধারণত
.hosted.appদিয়ে শেষ হয়।
ইনস্টলেশন সম্পূর্ণ হয়ে গেলে, Image Processing API-কে Cloud Functions-এ ফাংশন হিসেবে ডেপ্লয় করতে হবে। Firebase কনসোলে ফাংশন ড্যাশবোর্ড-এ নেভিগেট করুন এবং ইমেজ প্রসেসিং API ট্রিগার URL কপি করুন।
কাস্টম ইমেজ লোডার সেট-আপ করা
প্রতিটি অপ্টিমাইজ করা ইমেজ কম্পোনেন্ট-এর জন্য ডিপ্লয় করা ইমেজ প্রসেসিং 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 রোল-আউট সম্পূর্ণ হওয়া পর্যন্ত অপেক্ষা করুন।