विषय - सूची[छिपाना][प्रदर्शन]
सॉफ़्टवेयर लाइब्रेरी या फ्रेमवर्क चुनते समय, आमतौर पर डेवलपर के अनुभव को ध्यान में रखा जाता है।
जब मैं "डेवलपर अनुभव" का उल्लेख करता हूं, तो मैं इसका जिक्र कर रहा हूं कि डेवलपर्स वास्तव में कैसे काम करते हैं। डेवलपर्स पुस्तकालय या ढांचे का चयन करते हैं जो उपयोग करने में सुखद होते हैं।
यह प्राथमिक कारणों में से एक है कि अब हमारे पास सबसे लोकप्रिय पुस्तकालय और ढांचे क्यों हैं। डेवलपर्स के रूप में, जब हमारे कार्यों में हमारी सहायता करने के लिए मौजूदा उपकरण बनाए जाते हैं, तो हमें नए सिरे से शुरू करने की आवश्यकता नहीं होती है।
फ्रेमवर्क सॉफ्टवेयर के टुकड़े हैं जो डेवलपर्स द्वारा अनुप्रयोगों के निर्माण के लिए बनाए और उपयोग किए जाते हैं, और नेक्स्टजेएस उनमें से एक है।
इस पोस्ट में, हम नेक्स्टज, इसकी प्रमुख विशेषताओं और एप्लिकेशन बनाने के लिए इसका उपयोग कैसे कर सकते हैं, इसके बारे में जानेंगे। चलो ठीक अंदर कूदो।
Next.js क्या है?
Next.js स्थिर वेबपेजों और प्रतिक्रिया-आधारित ऑनलाइन अनुप्रयोगों के त्वरित और आसानी से निर्माण के लिए एक जावास्क्रिप्ट ढांचा है। यह आपको विंडोज, लिनक्स और मैक सहित विभिन्न प्लेटफार्मों के लिए शानदार वेब ऐप डिजाइन करने की अनुमति देता है।
यदि आप प्रतिक्रिया के साथ कम से कम परिचित हैं और प्रतिक्रिया पारिस्थितिकी तंत्र के बारे में अधिक जानना चाहते हैं, तो आपको नेक्स्ट.जेएस ढांचे से परिचित होना चाहिए।
भले ही Next.js आपको आरंभ करने के लिए आवश्यक सभी चीज़ों के साथ आता है, आप NPM और यार्न, जावास्क्रिप्ट और टाइपस्क्रिप्ट, CSS और SCSS, स्थिर निर्यात और सर्वर रहित परिनियोजन के बीच चयन कर सकते हैं।
विशेषताएं
- रूटिंग स्वचालित रूप से की जाती है - आपको कुछ भी कॉन्फ़िगर करने की आवश्यकता नहीं है क्योंकि किसी भी यूआरएल को फाइल सिस्टम में मैप किया गया है, पेज फ़ोल्डर में फाइलों के लिए (आपके पास अनुकूलन विकल्प हैं, निश्चित रूप से)।
- एकल फ़ाइल के घटक - स्टाइल-जेएसएक्स का उपयोग करके घटक में स्कोप की गई शैलियों को जोड़ना आसान है, जो एक ही टीम द्वारा पूरी तरह से एकीकृत और निर्मित है।
- हॉट कोड को पुनः लोड करना - जब Next.js डिस्क में सहेजे गए संशोधन का पता लगाता है, तो यह पृष्ठ को पुनः लोड करता है।
- गतिशील घटक - आप जावास्क्रिप्ट मॉड्यूल और प्रतिक्रिया घटकों को गतिशील रूप से लोड कर सकते हैं।
- स्थिर निर्यात - Next.js आपको अगले निर्यात आदेश के साथ अपने ऐप से पूरी तरह से स्थिर साइट निर्यात करने की अनुमति देता है।
- पर्यावरण के साथ संगतता - Next.js जावास्क्रिप्ट, नोड और रिएक्ट इकोसिस्टम के साथ मूल रूप से एकीकृत करता है।
- कोड को स्वचालित रूप से विभाजित करना - केवल आवश्यक पुस्तकालयों और जावास्क्रिप्ट का उपयोग पृष्ठों को प्रस्तुत करने के लिए किया जाता है। ऐप के सभी कोड वाली एक एकल जावास्क्रिप्ट फ़ाइल बनाने के बजाय, Next.js समझदारी से ऐप को कई संसाधनों में विभाजित करता है।
next.js एप्लिकेशन कैसे बनाएं?
स्थापना
आप एक Next.js प्रोजेक्ट को स्थापित करने और बनाने के लिए नोड npx कमांड का उपयोग कर सकते हैं।
यह एक नेक्स्ट.जेएस प्रोजेक्ट को चलाने के लिए एक फ़ोल्डर और सभी फाइलें, कॉन्फ़िगरेशन और अन्य आइटम उत्पन्न करेगा।
ऐप जनरेट होने के बाद आप उसे लॉन्च कर सकते हैं।
पेज और रूटिंग
Next.js के साथ मार्गों को संभालने के लिए, हमें रूटिंग ढांचे को नियोजित करने की आवश्यकता नहीं है। Next.js के साथ रूटिंग सेट करना आसान है। जब आप एक नया Next.js ऐप बनाने के लिए क्रिएट-नेक्स्ट-ऐप कमांड का उपयोग करते हैं, तो ऐप डिफ़ॉल्ट रूप से 'पेज' नामक एक फोल्डर बनाता है।
यह 'पृष्ठ' फ़ोल्डर वह जगह है जहाँ आप अपने मार्ग बनाए रखते हैं। नतीजतन, उपनिर्देशिका में प्रत्येक प्रतिक्रिया घटक फ़ाइल को एक अलग मार्ग के रूप में संभाला जाएगा।
उदाहरण के लिए, यदि फ़ोल्डर में वे फ़ाइलें हैं:
- index.js
- के बारे में.जेएस
- aricles.js
यह फ़ाइल स्वचालित रूप से तीन तरीकों से रूपांतरित हो जाएगी:
- इंडेक्स पेज लोकलहोस्ट/इंडेक्स
- पेज के बारे में लोकलहोस्ट/के बारे में
- ब्लॉग पेज लोकलहोस्ट/लेख
एक about.js पृष्ठ का एक उदाहरण नीचे दिखाया गया है। पृष्ठ के बारे में कुछ भी प्रदान नहीं किया गया है, जैसा कि आप देख सकते हैं। यह केवल एक मानक प्रतिक्रिया कार्यात्मक घटक है।
मार्गों
नेस्टेड मार्ग बनाने के लिए, आपको पहले एक सबफ़ोल्डर स्थापित करना होगा। उदाहरण के लिए: पृष्ठ/लेख। उस फ़ोल्डर के भीतर अपना 'contact.js' प्रतिक्रिया घटक बनाएं, और यह पेज लोकलहोस्ट/लेख/संपर्क उत्पन्न करेगा।
यदि आप एक फ़ाइल को pages/articles.js में और दूसरी को pages/articles/index.js में डालते हैं। दोनों एक ही पथ लोकलहोस्ट/ब्लॉग को दर्शाते हैं। इस स्थिति में, Next.js केवल article.js फ़ाइल प्रस्तुत करेगा। गतिशील मार्गों के बारे में क्या है, जिसमें प्रत्येक ब्लॉग पोस्ट का अपना पथ होता है:
- लोकलहोस्ट/ब्लॉग/प्रथम-लेख
- लोकलहोस्ट/ब्लॉग/-सेकंड-आर्टिकल
कोष्ठक संकेतन का उपयोग करके, आप Next.js में एक गतिशील मार्ग निर्धारित कर सकते हैं। उदाहरण के लिए: पेज/लेख/[स्लग].जेएस
लिंक मार्ग
अब आपने अपना पहला मार्ग पूरा कर लिया है। मुझे लगता है कि आप पूछ रहे हैं कि उन मार्गों से पृष्ठों को कैसे जोड़ा जाए। ऐसा करने के लिए आपको 'अगला/लिंक' की आवश्यकता होगी।
यहां एक होम पेज का उदाहरण दिया गया है जिसमें संक्षिप्त विवरण पेज का लिंक शामिल है:
यदि आप लिंक को स्टाइल करना चाहते हैं, तो निम्न सिंटैक्स का उपयोग करें:
पुनर्निर्देशित मार्ग
क्या होगा यदि आपको किसी निश्चित पृष्ठ पर रीडायरेक्ट को बाध्य करने की आवश्यकता है? उदाहरण के लिए, जब कोई बटन दबाया जाता है? आप इसे 'राउटर.पुश' का उपयोग करके पूरा कर सकते हैं:
एसईओ
वेब अनुप्रयोगों में पृष्ठों को HTML बॉडी के भीतर डेटा के अलावा मेटा (हेड) तत्वों की आवश्यकता होती है। इसके लिए रिएक्ट एप्लिकेशन में रिएक्ट हेलमेट नामक एक अतिरिक्त आवश्यकता की स्थापना की आवश्यकता होगी।
हम अपने वेबपेजों में आसानी से मेटाडेटा जोड़ने के लिए नेक्स्ट/हेड इन नेक्स्ट से हेड कंपोनेंट का उपयोग कर सकते हैं जो खोज परिणामों और एम्बेड में प्रदर्शित होंगे:
अवयव
आपको अक्सर घटकों या लेआउट फ़ाइल को विकसित करने की आवश्यकता होगी। उदाहरण के लिए, एक घटक जो नेवबार को प्रस्तुत करता है। हमने अभी तक पेज फोल्डर का उपयोग किया है। क्या होगा यदि आपका घटक मार्ग पृष्ठ होने के लिए नहीं है?
आप नहीं चाहते कि उपयोगकर्ता लोकलहोस्ट/नेवबार जैसे पेज पर नेविगेट करे। अगर आप Navbar.js कंपोनेंट को पेज फोल्डर में रखते हैं, तो ऐसा ही होगा। स्थिति में आपको क्या करना चाहिए?
बस अपने सभी 'पृष्ठ नहीं' घटकों को एक अलग फ़ोल्डर में संग्रहीत करें। अधिकांश Next.js प्रोजेक्ट मॉनीकर 'घटकों' का उपयोग करते हैं, और यह फ़ोल्डर आपके प्रोजेक्ट के रूट फ़ोल्डर में उत्पन्न होता है।
प्रमुख घटक
सर्वर-साइड पर नेक्स्ट.जेएस द्वारा प्रारंभिक पृष्ठ लोड प्रदान किया जाता है। यह आपके पृष्ठ के HTML को संशोधित करके करता है। शीर्षलेख अनुभाग शामिल है।
नेक्स्ट.जेएस हेड कंपोनेंट का इस्तेमाल हेडर सेक्शन टैग जैसे टाइटल और मेटा देने के लिए किया जाता है। हेड कंपोनेंट का उपयोग लेआउट कंपोनेंट के इस उदाहरण में किया जाता है।
404 पेज बनाएं नहीं मिला
अपना स्वयं का 404 त्रुटि पृष्ठ बनाना संभव है। हो सकता है कि आप संदेश को अनुकूलित करना चाहें या अपना स्वयं का पृष्ठ डिज़ाइन जोड़ना चाहें। पेज फोल्डर में 404.js फाइल बनाएं।
जब 404 त्रुटि होती है, तो Next.js स्वतः ही इस पृष्ठ पर पुनर्निर्देशित हो जाएगा। यहां वैयक्तिकृत 404 पृष्ठ का एक उदाहरण दिया गया है:
सर्वर-साइड से डेटा फ़ेचिंग
क्लाइंट-साइड पर डेटा डाउनलोड करने के बजाय, Next.js आपको प्रारंभिक डेटा आबादी का संचालन करने की अनुमति देता है, जिसका अर्थ है कि सर्वर से पहले से पॉप्युलेट किए गए डेटा के साथ पृष्ठ भेजना।
सर्वर-साइड डेटा फ़ेचिंग को लागू करने के लिए आपके पास दो विकल्प हैं:
- प्रत्येक अनुरोध पर डेटा प्राप्त किया जाना चाहिए।
- निर्माण प्रक्रिया के दौरान केवल एक बार डेटा प्राप्त करें (स्थिर साइट)
प्रत्येक अनुरोध पर डेटा प्राप्त करें
सर्वर-साइड प्रत्येक अनुरोध को प्रस्तुत करने के लिए getServerSideProps विधि का उपयोग किया जाता है। यह फ़ंक्शन आपकी घटक फ़ाइल के अंत में शामिल किया जा सकता है। Next.js स्वचालित रूप से आपके घटक प्रॉप्स को getServerSideProps ऑब्जेक्ट के साथ पॉप्युलेट करेगा यदि वह फ़ंक्शन आपकी घटक फ़ाइल में मौजूद है।
निर्माण समय पर डेटा प्राप्त करें
getStaticProps विधि का उपयोग बिल्ड समय पर सर्वर-साइड रेंडर करने के लिए किया जाता है। यह फ़ंक्शन आपकी घटक फ़ाइल के अंत में शामिल किया जा सकता है। यह विधि सर्वर कोड चलाती है और सर्वर को एक GET अनुरोध भेजती है, लेकिन केवल एक बार जब हमारी परियोजना समाप्त हो जाती है।
आपको Next.js क्यों सीखना चाहिए?
इसका एक कारण यह है कि Next.js रिएक्ट के शीर्ष पर बनाया गया है, जो कि एक फ्रंट-एंड डेवलपमेंट टूलकिट है यूजर इंटरफेस बनाना वेब ऐप्स डिजाइन करने के लिए यह मेरी पसंदीदा पसंद है।
लेकिन यह काफी नहीं होगा अगर Next.js अपने काम में अच्छा नहीं था... है ना?
तो, वास्तव में यह क्या करता है?
इसे समझने के लिए हमें पहले कुछ अवधारणाओं को परिभाषित करना होगा। Next.js ने लोकप्रियता हासिल की क्योंकि इसने एक समस्या का समाधान किया जो कई वेब डेवलपर्स के पास क्लाइंट-साइड वेब ऐप्स (ब्राउज़र में) के साथ थी। इन सिंगल-पेज एप्लिकेशन (एसपीए) के पास बेहतर अनुभव था क्योंकि उन्हें उपयोगकर्ता को पृष्ठ को फिर से लोड करने की आवश्यकता नहीं थी और अधिक अंतःक्रियाशीलता की अनुमति थी।
हालाँकि, क्योंकि इस तरह के ऐप में अधिकांश सामग्री केवल तभी दिखाई देती है जब इसे ब्राउज़र में निष्पादित किया जाता है, वेब क्रॉलर को ऐसे ऐप की टेक्स्ट सामग्री को समझने में मुश्किल होती है।
नतीजतन, उनकी लोकप्रियता के बावजूद, कई एसपीए बड़े पैमाने पर Google जैसे बड़े खोज इंजनों के लिए गुमनाम रहे। Next.js में अब रिएक्ट घटकों के सर्वर-साइड रेंडरिंग (SSR) के लिए एक अधिक मजबूत अंतर्निहित तंत्र शामिल है।
Next.js डेवलपर्स को निर्माण प्रक्रिया के दौरान सर्वर पर जावास्क्रिप्ट कोड बनाने और उपयोगकर्ता को बुनियादी, इंडेक्स करने योग्य HTML प्रदान करने की अनुमति देता है।
फ़ायदे
- उपयोगकर्ता-अनुभव के लिए बढ़िया
- एसईओ के लिए बढ़िया
- एक गतिशील की तरह व्यवहार करने वाली एक सुपर-फास्ट स्थिर वेबसाइट बनाएं
- UI और UX के निर्माण में लचीलापन।
- कई विकास लाभ
- महान समुदाय का समर्थन
नुकसान
- वेबसाइटों या एप्लिकेशन के निर्माण या विकास के लिए एक निश्चित समय होता है।
- कुछ कार्यों के लिए, Next.js अपर्याप्त है। डेवलपर्स को Node.js टूल का उपयोग करके डायनेमिक रूट बनाने में सक्षम होना चाहिए।
निष्कर्ष
जैसा कि आप देख सकते हैं, Next.js रिएक्ट ऐप डेवलपमेंट को सरल करता है और आपको सबसे महत्वपूर्ण चीज़ों पर ध्यान केंद्रित करने की अनुमति देता है - आपका ऐप लॉजिक और UI। इसमें समसामयिक, फ्रंटएंड-रिच और एपीआई-संचालित ऐप्स बनाने के लिए आवश्यक सभी चीजें शामिल हैं।
स्थिर HTML पृष्ठ बनाने की इसकी क्षमता के कारण, यह केवल सामग्री वाली परियोजनाओं, जैसे ब्लॉग और व्यावसायिक वेबसाइटों के लिए भी उपयुक्त है।
वर्तमान संस्करणों के साथ, Next.js न केवल उच्च स्तर के डेवलपर अनुभव को बनाए रखता है, बल्कि दृश्य प्रदर्शन और उपयोगकर्ता अनुभव को बढ़ाने के लिए उपकरण भी देता है, जिससे इस ढांचे के लिए एक उज्ज्वल भविष्य सुनिश्चित होता है।
एक जवाब लिखें