Firebase सीएलआई का इस्तेमाल करके, अपने Next.js वेब ऐप्लिकेशन को Firebase पर डिप्लॉय किया जा सकता है और Firebase होस्टिंग के साथ उन्हें इस्तेमाल किया जा सकता है. सीएलआई आपकी Next.js सेटिंग के हिसाब से काम करता है. साथ ही, यह आपकी ओर से शून्य या बहुत कम कॉन्फ़िगरेशन के साथ Firebase सेटिंग में उनका अनुवाद करता है. अगर आपके ऐप्लिकेशन में डाइनैमिक सर्वर-साइड लॉजिक शामिल है, तो सीएलआई उस लॉजिक को 'Firebase के लिए Cloud Functions' पर डिप्लॉय कर देता है. सबसे नया और Next.js वर्शन, 13.4.7 है.
शुरू करने से पहले
अपने ऐप्लिकेशन को Firebase में डिप्लॉय करने से पहले, इन ज़रूरी शर्तों और विकल्पों को देखें:
- Firebase सीएलआई 12.1.0 या इसके बाद का वर्शन. पक्का करें कि आपने अपने पसंदीदा तरीके से सीएलआई इंस्टॉल किया हो.
ज़रूरी नहीं: आपके Firebase प्रोजेक्ट के लिए बिलिंग की सुविधा चालू है (अगर आपको एसएसआर का इस्तेमाल करना है, तो ज़रूरी है)
ज़रूरी नहीं: Firebase के साथ काम करने वाली सुविधाओं का फ़ायदा पाने के लिए, एक्सपेरिमेंट के तौर पर इस्तेमाल की जा रही ReactFire लाइब्रेरी का इस्तेमाल करें.
Firebase शुरू करें
शुरू करने के लिए, अपने फ़्रेमवर्क प्रोजेक्ट के लिए Firebase शुरू करें.
नए प्रोजेक्ट के लिए Firebase सीएलआई का इस्तेमाल करें या किसी मौजूदा प्रोजेक्ट के लिए firebase.json में बदलाव करें.
नया प्रोजेक्ट शुरू करें
- Firebase सीएलआई में, वेब फ़्रेमवर्क की झलक चालू करें:
firebase experiments:enable webframeworks
सीएलआई से शुरू करने वाला कमांड चलाएं और फिर दिए गए निर्देशों का पालन करें:
firebase init hosting
"क्या आपको वेब फ़्रेमवर्क इस्तेमाल करना है? (एक्सपेरिमेंट के तौर पर उपलब्ध है)"
अपनी होस्टिंग सोर्स डायरेक्ट्री चुनें. अगर यह मौजूदा Next.js ऐप्लिकेशन है, तो सीएलआई प्रोसेस पूरी हो जाती है और अगले सेक्शन पर जाया जा सकता है.
अगर कहा जाए, तो Next.js चुनें.
स्टैटिक कॉन्टेंट दिखाएं
Firebase शुरू करने के बाद, स्टैंडर्ड डिप्लॉयमेंट कमांड के साथ स्टैटिक कॉन्टेंट दिखाया जा सकता है:
firebase deploy
डिप्लॉय किए जा चुके ऐप्लिकेशन की जानकारी उसकी लाइव साइट पर देखी जा सकती है.
डाइनैमिक कॉन्टेंट को पहले से रेंडर करना
Firebase सीएलआई, getStaticProps और getStaticPaths के इस्तेमाल का पता लगाएगा.
ज़रूरी नहीं: Firebase JS SDK टूल के साथ इंटिग्रेट करें
सर्वर और क्लाइंट बंडल, दोनों में Firebase JS SDK टूल शामिल करते समय, प्रॉडक्ट का इस्तेमाल करने से पहले isSupported() की जांच करके, रनटाइम की गड़बड़ियों से बचा जा सकता है.
सभी प्रॉडक्ट
सभी एनवायरमेंट में काम नहीं करते.
ज़रूरी नहीं: Firebase एडमिन SDK के साथ इंटिग्रेट करना
अगर आपके ब्राउज़र के बिल्ड में एडमिन SDK टूल शामिल हैं, तो बंडल काम नहीं करेंगे. इनके बारे में सिर्फ़ getStaticProps और getStaticPaths में देखें.
पूरी तरह से डाइनैमिक कॉन्टेंट (एसएसआर) दिखाएं
Firebase सीएलआई, getServerSideProps के इस्तेमाल का पता लगा लेगा. ऐसे मामलों में, सीएलआई डाइनैमिक सर्वर कोड चलाने के लिए, 'Firebase के लिए Cloud Functions' में फ़ंक्शन डिप्लॉय करेगा. Firebase कंसोल में इन फ़ंक्शन के बारे में जानकारी देखी जा सकती है, जैसे कि इनका डोमेन और रनटाइम का कॉन्फ़िगरेशन.
next.config.js के साथ होस्टिंग व्यवहार को कॉन्फ़िगर करें
इमेज ऑप्टिमाइज़ेशन
Next.js इमेज ऑप्टिमाइज़ेशन का इस्तेमाल किया जा सकता है, लेकिन इससे (Firebase के लिए Cloud Functions में) फ़ंक्शन बनाना ट्रिगर हो जाएगा, भले ही आप एसएसआर का इस्तेमाल न कर रहे हों.
रीडायरेक्ट, फिर से लिखना, और हेडर
Firebase सीएलआई, next.config.js में
रीडायरेक्ट, फिर से लिखने, और हेडर का इस्तेमाल करता है. साथ ही, डिप्लॉयमेंट के समय उन्हें अलग-अलग Firebase होस्टिंग कॉन्फ़िगरेशन में बदल देता है. अगर
Next.js रीडायरेक्ट, रीराइट या हेडर को किसी मिलते-जुलते Firebase होस्टिंग हेडर में नहीं बदला जा सकता, तो यह वापस काम करता है और फ़ंक्शन बनाता है—भले ही आपने इमेज ऑप्टिमाइज़ेशन या SSR का इस्तेमाल न किया हो.
ज़रूरी नहीं: Firebase से पुष्टि करने की सुविधा के साथ इंटिग्रेट करें
वेब फ़्रेमवर्क का ध्यान रखने वाला Firebase डिप्लॉयमेंट टूल, कुकी का इस्तेमाल करके क्लाइंट और सर्वर की स्थिति को अपने-आप सिंक रखेगा. एसएसआर में, पुष्टि करने के कॉन्टेक्स्ट को ऐक्सेस करने के कुछ तरीके यहां दिए गए हैं:
- एक्सप्रेस
res.localsऑब्जेक्ट में, पुष्टि किया गया Firebase ऐप्लिकेशन इंस्टेंस (firebaseApp) और साइन इन किया हुआ मौजूदा उपयोगकर्ता (currentUser) शामिल होगा. इसेgetServerSidePropsमें ऐक्सेस किया जा सकता है. - पुष्टि किया गया Firebase ऐप्लिकेशन का नाम, रूट क्वेरी (
__firebaseAppName) पर दिया गया है. इससे, कॉन्टेक्स्ट के हिसाब से मैन्युअल इंटिग्रेशन की अनुमति मिलती है:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);