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

Firebase CLI का इस्तेमाल करके, अपने Next.js वेब ऐप्लिकेशन को Firebase पर डिप्लॉय किया जा सकता है और उन्हें Firebase Hosting के साथ दिखाया जा सकता है. सीएलआई, आपकी 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 में बदलाव करें.

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

  1. Firebase सीएलआई में, वेब फ़्रेमवर्क की झलक देखने की सुविधा चालू करें: 
    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() की जांच करके, रनटाइम गड़बड़ियों से बचें. सभी प्रॉडक्ट सभी एनवायरमेंट में काम नहीं करते.