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