Firebase CLI ব্যবহার করে, আপনি আপনার Next.js ওয়েব অ্যাপগুলিকে Firebase-এ স্থাপন করতে পারেন এবং Firebase Hosting মাধ্যমে সেগুলি পরিবেশন করতে পারেন। CLI আপনার Next.js সেটিংসকে সম্মান করে এবং আপনার পক্ষ থেকে শূন্য বা ন্যূনতম অতিরিক্ত কনফিগারেশন সহ সেগুলিকে Firebase সেটিংসে অনুবাদ করে। যদি আপনার অ্যাপে ডায়নামিক সার্ভার-সাইড লজিক থাকে, তাহলে CLI সেই লজিকটিকে Cloud Functions for Firebase এ স্থাপন করে।
শুরু করার আগে
Firebase-এ আপনার অ্যাপ স্থাপন শুরু করার আগে, নিম্নলিখিত প্রয়োজনীয়তা এবং বিকল্পগুলি পর্যালোচনা করুন:
- Firebase CLI ভার্সন ১২.১.০ বা তার পরবর্তী। আপনার পছন্দের পদ্ধতি ব্যবহার করে CLI ইনস্টল করতে ভুলবেন না।
ঐচ্ছিক: আপনার Firebase প্রকল্পে বিলিং সক্ষম করা হয়েছে (যদি আপনি SSR ব্যবহার করার পরিকল্পনা করেন তবে প্রয়োজন)
ঐচ্ছিক: Firebase-বান্ধব বৈশিষ্ট্যগুলি থেকে উপকৃত হতে পরীক্ষামূলক ReactFire লাইব্রেরি ব্যবহার করুন।
ফায়ারবেস আরম্ভ করুন
শুরু করতে, আপনার ফ্রেমওয়ার্ক প্রকল্পের জন্য Firebase আরম্ভ করুন। একটি নতুন প্রকল্পের জন্য Firebase CLI ব্যবহার করুন, অথবা একটি বিদ্যমান প্রকল্পের জন্য firebase.json পরিবর্তন করুন।
একটি নতুন প্রকল্প শুরু করুন
- Firebase CLI-তে, ওয়েব ফ্রেমওয়ার্ক প্রিভিউ সক্ষম করুন:
firebase experiments:enable webframeworks
CLI থেকে initialization কমান্ডটি চালান এবং তারপর প্রম্পটগুলি অনুসরণ করুন:
firebase init hosting
"আপনি কি একটি ওয়েব ফ্রেমওয়ার্ক ব্যবহার করতে চান? (পরীক্ষামূলক)" প্রশ্নের উত্তর হ্যাঁ দিন।
আপনার হোস্টিং সোর্স ডিরেক্টরিটি বেছে নিন। যদি এটি একটি বিদ্যমান Next.js অ্যাপ হয়, তাহলে CLI প্রক্রিয়াটি সম্পন্ন হবে এবং আপনি পরবর্তী বিভাগে যেতে পারবেন।
যদি অনুরোধ করা হয়, তাহলে Next.js নির্বাচন করুন।
স্ট্যাটিক কন্টেন্ট পরিবেশন করুন
Firebase আরম্ভ করার পরে, আপনি স্ট্যান্ডার্ড ডিপ্লয়মেন্ট কমান্ডের সাহায্যে স্ট্যাটিক কন্টেন্ট পরিবেশন করতে পারেন:
firebase deploy
আপনি আপনার স্থাপন করা অ্যাপটি এর লাইভ সাইটে দেখতে পারেন।
প্রি-রেন্ডার ডায়নামিক কন্টেন্ট
Firebase CLI getStaticProps এবং getStaticPaths এর ব্যবহার সনাক্ত করবে।
ঐচ্ছিক: Firebase JS SDK এর সাথে ইন্টিগ্রেট করুন
সার্ভার এবং ক্লায়েন্ট উভয় বান্ডেলে Firebase JS SDK পদ্ধতি অন্তর্ভুক্ত করার সময়, পণ্যটি ব্যবহার করার আগে isSupported() পরীক্ষা করে রানটাইম ত্রুটি থেকে সাবধান থাকুন। সমস্ত পণ্য সমস্ত পরিবেশে সমর্থিত নয়।
ঐচ্ছিক: Firebase অ্যাডমিন SDK এর সাথে ইন্টিগ্রেট করুন
আপনার ব্রাউজার বিল্ডে অন্তর্ভুক্ত করা হলে অ্যাডমিন SDK বান্ডেলগুলি ব্যর্থ হবে; শুধুমাত্র getStaticProps এবং getStaticPaths এর ভিতরেই সেগুলি দেখুন।
সম্পূর্ণ গতিশীল কন্টেন্ট (SSR) পরিবেশন করুন
Firebase CLI getServerSideProps এর ব্যবহার সনাক্ত করবে। এই ধরনের ক্ষেত্রে, CLI Cloud Functions for Firebase ফাংশন স্থাপন করবে যাতে ডাইনামিক সার্ভার কোড চালানো যায়। আপনি Firebase কনসোলে এই ফাংশনগুলি সম্পর্কে তথ্য দেখতে পারেন, যেমন তাদের ডোমেন এবং রানটাইম কনফিগারেশন।
next.config.js দিয়ে Hosting আচরণ কনফিগার করুন
চিত্র অপ্টিমাইজেশন
Next.js ইমেজ অপ্টিমাইজেশন ব্যবহার করা সমর্থিত, তবে এটি একটি ফাংশন তৈরির সূত্রপাত করবে ( Cloud Functions for Firebase এ), এমনকি যদি আপনি SSR ব্যবহার না করেন।
পুনঃনির্দেশ, পুনর্লিখন এবং শিরোনাম
Firebase CLI next.config.js এ রিডাইরেক্ট , রিরাইট এবং হেডারগুলিকে সম্মান করে, স্থাপনের সময় তাদের নিজ নিজ সমতুল্য Firebase Hosting কনফিগারেশনে রূপান্তর করে। যদি একটি Next.js রিরাইট, রিরাইট, বা হেডারকে সমতুল্য Firebase Hosting হেডারে রূপান্তর করা না যায়, তাহলে এটি পিছিয়ে যায় এবং একটি ফাংশন তৈরি করে—এমনকি আপনি যদি ইমেজ অপ্টিমাইজেশন বা SSR ব্যবহার নাও করেন।
ঐচ্ছিক: Firebase প্রমাণীকরণের সাথে একীভূত করুন
ওয়েব ফ্রেমওয়ার্ক-সচেতন ফায়ারবেস ডিপ্লয়মেন্ট টুলিং কুকিজ ব্যবহার করে ক্লায়েন্ট এবং সার্ভারের অবস্থা স্বয়ংক্রিয়ভাবে সিঙ্কে রাখবে। SSR-তে প্রমাণীকরণ প্রসঙ্গ অ্যাক্সেস করার জন্য কিছু পদ্ধতি দেওয়া আছে:
- Express
res.localsঅবজেক্টে ঐচ্ছিকভাবে একটি প্রমাণিত Firebase অ্যাপ ইনস্ট্যান্স (firebaseApp) এবং বর্তমানে সাইন-ইন করা ব্যবহারকারী (currentUser) থাকবে। এটিgetServerSidePropsএ অ্যাক্সেস করা যেতে পারে। - রুট কোয়েরিতে (
__firebaseAppName) প্রমাণিত Firebase অ্যাপের নামটি দেওয়া আছে। এটি প্রসঙ্গে থাকাকালীন ম্যানুয়াল ইন্টিগ্রেশনের অনুমতি দেয়:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);