Firebase CLI का इस्तेमाल करके, अपने Next.js वेब ऐप्लिकेशन को Firebase पर डिप्लॉय किया जा सकता है. साथ ही, उन्हें Firebase Hosting की मदद से दिखाया जा सकता है.
स्टैटिक कॉन्टेंट दिखाना
Firebase को शुरू करने के बाद, स्टैटिक कॉन्टेंट को स्टैंडर्ड डिप्लॉयमेंट कमांड की मदद से दिखाया जा सकता है:
firebase deploy
अगर आपके ऐप्लिकेशन में डाइनैमिक सर्वर-साइड लॉजिक शामिल है, तो सीएलआई उस लॉजिक को Cloud Functions for Firebase पर डिप्लॉय करता है. लाइव साइट पर जाकर, डिप्लॉय किया गया ऐप्लिकेशन देखा जा सकता है.
डाइनैमिक कॉन्टेंट को पहले से रेंडर करना
Firebase CLI, getStaticProps और getStaticPaths के इस्तेमाल का पता लगाएगा.
ज़रूरी नहीं है: Firebase JS SDK टूल के साथ इंटिग्रेट करना
सर्वर और क्लाइंट, दोनों बंडलों में Firebase JS SDK के तरीकों को शामिल करते समय, रनटाइम की गड़बड़ियों से बचने के लिए, प्रॉडक्ट का इस्तेमाल करने से पहले isSupported() की जांच करें.
सभी प्रॉडक्ट, सभी एनवायरमेंट में काम नहीं करते.
ज़रूरी नहीं: Firebase Admin SDK के साथ इंटिग्रेट करना
अगर Admin SDK बंडल को ब्राउज़र बिल्ड में शामिल किया जाता है, तो वे काम नहीं करेंगे. इसलिए, इन्हें सिर्फ़ getStaticProps और getStaticPaths में इस्तेमाल करें.
पूरी तरह से डाइनैमिक कॉन्टेंट (एसएसआर) दिखाना
Firebase सीएलआई, getServerSideProps के इस्तेमाल का पता लगाएगा. ऐसे मामलों में, CLI, फ़ंक्शन को Cloud Functions for Firebase पर डिप्लॉय करेगा, ताकि डाइनैमिक सर्वर कोड को चलाया जा सके. इन फ़ंक्शन के बारे में जानकारी देखी जा सकती है. जैसे, उनका डोमेन और रनटाइम कॉन्फ़िगरेशन. इसके लिए, Firebase कंसोल पर जाएं.
next.config.js की मदद से Hosting के व्यवहार को कॉन्फ़िगर करना
इमेज ऑप्टिमाइज़ेशन
Next.js Image Optimization का इस्तेमाल किया जा सकता है. हालांकि, इससे Cloud Functions for Firebase में एक फ़ंक्शन बन जाएगा. ऐसा तब भी होगा, जब एसएसआर का इस्तेमाल नहीं किया जा रहा हो.
रीडायरेक्ट, फिर से लिखना, और हेडर
Firebase CLI, next.config.js में मौजूद रीडायरेक्ट, फिर से लिखने, और हेडर का पालन करता है. साथ ही, डिप्लॉय करने के समय उन्हें उनके संबंधित Firebase Hosting कॉन्फ़िगरेशन में बदल देता है. अगर Next.js रीडायरेक्ट, फिर से लिखना या हेडर को Firebase Hosting हेडर में नहीं बदला जा सकता, तो यह फ़ंक्शन पर वापस आ जाता है और उसे बनाता है. भले ही, आपने इमेज ऑप्टिमाइज़ेशन या एसएसआर का इस्तेमाल न किया हो.
ज़रूरी नहीं: Firebase Authentication के साथ इंटिग्रेट करना
वेब फ़्रेमवर्क के बारे में जानकारी रखने वाला Firebase डिप्लॉयमेंट टूल, कुकी का इस्तेमाल करके क्लाइंट और सर्वर की स्थिति को अपने-आप सिंक करता रहेगा. एसएसआर में पुष्टि करने के कॉन्टेक्स्ट को ऐक्सेस करने के लिए, यहां कुछ तरीके दिए गए हैं:
- Express
res.localsऑब्जेक्ट में, पुष्टि किया गया Firebase ऐप्लिकेशन इंस्टेंस (firebaseApp) और फ़िलहाल साइन इन किए हुए उपयोगकर्ता (currentUser) की जानकारी शामिल हो सकती है. इसेgetServerSidePropsमें ऐक्सेस किया जा सकता है. - रूट क्वेरी (
__firebaseAppName) पर, पुष्टि किया गया Firebase ऐप्लिकेशन का नाम दिया जाता है. इससे, कॉन्टेक्स्ट में रहते हुए मैन्युअल तरीके से इंटिग्रेट किया जा सकता है:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);