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