Next.js को इंटिग्रेट करना

Firebase CLI का इस्तेमाल करके, अपने Next.js वेब ऐप्लिकेशन को Firebase पर डिप्लॉय किया जा सकता है. साथ ही, उन्हें Firebase Hosting की मदद से उपलब्ध कराया जा सकता है. CLI, आपकी Next.js सेटिंग का पालन करता है और उन्हें Firebase सेटिंग में बदलता है. इसके लिए, आपको कोई अतिरिक्त कॉन्फ़िगरेशन करने की ज़रूरत नहीं होती या बहुत कम कॉन्फ़िगरेशन करना पड़ता है. अगर आपके ऐप्लिकेशन में डाइनैमिक सर्वर-साइड लॉजिक शामिल है, तो सीएलआई उस लॉजिक को Cloud Functions for Firebase पर डिप्लॉय करता है.

ध्यान दें: फ़्रेमवर्क के बारे में जानकारी रखने वाला Hosting, सार्वजनिक तौर पर उपलब्ध होने से पहले वाला वर्शन है. इसका मतलब है कि यह सुविधा, आने वाले समय में ऐसे तरीके से बदल सकती है जो मौजूदा वर्शन के साथ काम नहीं करेगी. प्रीव्यू रिलीज़ पर, किसी भी एसएलए या बंद होने से जुड़ी नीति लागू नहीं होती. साथ ही, इस पर सीमित या कोई सहायता नहीं मिल सकती.

चेतावनी: हम फ़ुल-स्टैक Next.js ऐप्लिकेशन बनाने वाले डेवलपर को, Firebase ऐप्लिकेशन होस्टिंग का इस्तेमाल करने का सुझाव देते हैं. अगर Firebase CLI में फ़्रेमवर्क एक्सपेरिमेंट का इस्तेमाल पहले से किया जा रहा है, तो हम आपको App Hosting पर "अपग्रेड" करने का सुझाव देते हैं. App Hosting की मदद से, आपको सीडीएन से लेकर सर्वर-साइड रेंडरिंग तक, हर चीज़ को मैनेज करने के लिए एक ही समाधान मिलेगा. साथ ही, GitHub इंटिग्रेशन को बेहतर बनाया गया है.

शुरू करने से पहले

अपने ऐप्लिकेशन को Firebase पर डिप्लॉय करने से पहले, यहां दी गई ज़रूरी शर्तें और विकल्प देखें:

• Firebase CLI का वर्शन 12.1.0 या इसके बाद का वर्शन. पक्का करें कि आपने अपने पसंदीदा तरीके का इस्तेमाल करके, सीएलआई इंस्टॉल किया हो.

• ज़रूरी नहीं: आपके Firebase प्रोजेक्ट पर बिलिंग की सुविधा चालू हो (अगर आपको एसएसआर का इस्तेमाल करना है, तो यह ज़रूरी है)

• ज़रूरी नहीं: ReactFire लाइब्रेरी का इस्तेमाल करें. यह एक्सपेरिमेंट के तौर पर उपलब्ध है. इससे आपको Firebase के साथ काम करने वाली सुविधाओं का फ़ायदा मिलेगा

Firebase को चालू करना

शुरू करने के लिए, अपने फ़्रेमवर्क प्रोजेक्ट के लिए Firebase को चालू करें. नए प्रोजेक्ट के लिए, Firebase सीएलआई का इस्तेमाल करें या किसी मौजूदा प्रोजेक्ट के लिए firebase.json में बदलाव करें.

नया प्रोजेक्ट शुरू करना

1. Firebase CLI में, वेब फ़्रेमवर्क की झलक दिखाने की सुविधा चालू करें:

   firebase experiments:enable webframeworks

2. सीएलआई से, शुरू करने का निर्देश चलाएं. इसके बाद, दिए गए निर्देशों का पालन करें:

   firebase init hosting

3. "क्या आपको वेब फ़्रेमवर्क का इस्तेमाल करना है? (एक्सपेरिमेंट के तौर पर उपलब्ध)"

4. होस्टिंग सोर्स डायरेक्ट्री चुनें. अगर यह पहले से मौजूद Next.js ऐप्लिकेशन है, तो सीएलआई प्रोसेस पूरी हो जाती है. इसके बाद, अगले सेक्शन पर जाएं.

5. अगर कहा जाए, तो Next.js चुनें.

स्टैटिक कॉन्टेंट दिखाना

Firebase को शुरू करने के बाद, स्टैंडर्ड डिप्लॉयमेंट कमांड का इस्तेमाल करके स्टैटिक कॉन्टेंट दिखाया जा सकता है:

firebase deploy

लाइव साइट पर जाकर, डिप्लॉय किए गए ऐप्लिकेशन को देखा जा सकता है.

डाइनैमिक कॉन्टेंट को पहले से रेंडर करना

Firebase CLI, getStaticProps और getStaticPaths के इस्तेमाल का पता लगाएगा.

ज़रूरी नहीं है: Firebase JS SDK टूल के साथ इंटिग्रेट करना

सर्वर और क्लाइंट, दोनों बंडलों में Firebase JS SDK के तरीकों को शामिल करते समय, रनटाइम की गड़बड़ियों से बचने के लिए, प्रॉडक्ट का इस्तेमाल करने से पहले isSupported() की जांच करें. सभी प्रॉडक्ट, सभी एनवायरमेंट में काम नहीं करते.

अहम जानकारी: ReactFire का इस्तेमाल करें. यह आपके लिए इस काम को अपने-आप पूरा करता है.

ज़रूरी नहीं: 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 में) बन जाएगा. भले ही, आपने SSR का इस्तेमाल न किया हो.

ध्यान दें: इस वजह से, इमेज ऑप्टिमाइज़ेशन और Hosting प्रीव्यू चैनल एक साथ ठीक से काम नहीं करते.

रीडायरेक्ट, फिर से लिखना, और हेडर

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);