Next.js 9.3 स्थैतिक साइट पीढ़ी, 404 अनुकूलन और अधिक के लिए समर्थन के साथ आता है

अगला.जेएस 9.3

Next.js सर्वर-साइड रेंडरिंग के लिए एक रिएक्ट फ्रेमवर्क है, जो इसके निर्माता प्रतिक्रिया अनुप्रयोगों के लिए एक शून्य कॉन्फ़िगरेशन सिंगल कमांड टूलचैन के रूप में मौजूद हैं।

यह ढाँचा एक आम संरचना प्रदान करता है जो आपको आसानी से एक रिएक्ट फ्रंट-एंड एप्लिकेशन बनाने की अनुमति देता है और पारदर्शी रूप से सर्वर-साइड रेंडरिंग का प्रबंधन करता है। Next.js संस्करण 9.3 सोमवार को नई सुविधाओं और कुछ सुधारों के साथ लॉन्च किया गया था, जिनमें से हम मुख्य साइटों को मुख्य नवीनता के रूप में स्थैतिक उत्पन्न करने की क्षमता पा सकते हैं।

Next.js 9.3 में नया क्या है?

Next.js 9.0 की रिलीज़ के साथ, ढांचे ने स्थैतिक स्वचालित अनुकूलन की अवधारणा पेश की। जब एक पृष्ठ की कोई अवरुद्ध आवश्यकता नहीं है getInitialProps जैसी डेटा रिकवरी, स्वचालित रूप से HTML में प्रस्तुत करना होगा एक बार यह बनाया गया है।

ऐसे अन्य मामले हैं जहां आप डेटा निष्कर्षण आवश्यकताओं को अवरुद्ध करने के साथ भी संकलन समय पर स्थिर HTML में पेज बनाना चाहते हैं। यह मामला है, उदाहरण के लिए, विपणन पृष्ठों का एक सामग्री प्रबंधन प्रणाली (CMS) द्वारा संचालित।

Next.js 9.3 दो नए डेटा रिकवरी तरीकों का परिचय देता है: getStaticProps और getServerSideProps.

ये नए तरीके GetInitialProps मॉडल पर कई फायदे हैंजैसा कि SSG (स्टेटिक साइड जनरेशन) और SSR (सर्वर साइड रेंडरिंग) के बीच स्पष्ट अंतर होगा। वे एपीआई जोड़ हैं।

सभी नई सुविधाएँ पिछड़े संगत और हैं धीरे-धीरे अपनाया जा सकता है। कोई मूल्यह्रास नहीं है और getInitialProps सामान्य रूप से काम करना जारी रखता है। डायनामिक रूटिंग प्राप्त करने के लिए एक getStaticPaths पैरामीटर जोड़ा गया है।

  • getStaticProps: निर्माण के दौरान डेटा प्राप्त करने की अनुमति देता है;
  • getStaticPaths - डेटा-आधारित डायनामिक रूटिंग निर्दिष्ट करें;
  • getServerSideProps: आपको प्रत्येक अनुरोध के लिए डेटा प्राप्त करने की अनुमति देता है।

एक और परिवर्तन जो इस नए संस्करण से बाहर है, पूर्वावलोकन मोड के लिए समर्थन है। पेश है getStaticProps Next.js में नई संभावनाओं को खोलता है, जैसे कि Next.js का उपयोग कुछ शर्तों के तहत मांग पर क्षमताओं का प्रतिपादन।

उदाहरण के ड्राफ्ट का पूर्वावलोकन करते समय CMS में, आप स्थैतिक रेंडरिंग को छोड़ना चाहेंगे ड्राफ्ट सामग्री के साथ मांग पर पेज प्रस्तुत करना प्रकाशित सामग्री के बजाय। आप Next.js को केवल इस विशिष्ट मामले में स्थैतिक निर्माण को छोड़ना चाहते हैं। Next.js टीम के अनुसार, पूर्वावलोकन मोड आपको ऐसा करने की अनुमति देता है।

की विधा है पूर्वावलोकन उपयोगकर्ताओं को उत्पन्न पृष्ठ को छोड़ने की अनुमति देता है अनुरोध पर (SSR) एक ड्राफ्ट पृष्ठ पर वापस लौटने के लिए, उदाहरण के लिए CMS से। हालांकि, यह कुछ सीएमएस सिस्टम तक सीमित नहीं है। पूर्वावलोकन मोड getStaticProps और getServerSideProps के साथ सीधे एकीकृत करता है इसलिए इसे किसी भी प्रकार के डेटा रिकवरी समाधान के साथ उपयोग किया जा सकता है।

Next.js 9.2 अंतर्निहित सीएसएस के लिए समर्थन जोड़ा गया, लेकिन Next.js 9.3 ने सैस के लिए समर्थन जोड़ा। वैश्विक स्टाइल शीट और सीएसएस मॉड्यूल समर्थित हैं, साथ ही सीएसएस एम्बेडेड भी हैं। Next.js अब Sass फ़ाइलों के साथ CSS मॉड्यूल का समर्थन करता है [नाम] .module.scss का उपयोग करके नामकरण सम्मेलन फ़ाइल। Next -js 5+ में अगले sass के साथ पहले से उपलब्ध समर्थन के विपरीत, वैश्विक Sass और CSS मॉड्यूल अब सह-अस्तित्व में आ सकते हैं।

मॉड्यूल सीएसएस आपको स्वचालित रूप से अद्वितीय वर्ग नाम बनाकर स्थानीय रूप से सैस का प्रबंधन करने की अनुमति देता है।

संस्करण 9.0 के साथ Next.js से, एक पृष्ठ था जो HTML में स्वचालित रूप से प्रदान नहीं किया गया था स्थिर: 404 पृष्ठ।

इसके पीछे मुख्य कारण यह है कि 404 को खिलाने वाले त्रुटि पृष्ठ को 404 से अधिक संभाला गया था। उदाहरण के लिए, यह त्रुटियों को भी नियंत्रित करता है। चूंकि 404 पृष्ठ गैर-मौजूद पथों के लिए प्रदान किए गए हैं, मांग पर पृष्ठ प्रदान करने से अधिक लागत और अधिक भार हो सकता है सर्वर। फ्रेमवर्क संस्करण 9.3 चीजों को बेहतर बनाता है और स्वचालित स्थिर अनुकूलन प्रदान करता है 404 पृष्ठों के लिए।

अब जब आपके अनुरोध में एक त्रुटि शामिल नहीं है। कस्टम पृष्ठ, फ़ाइल Next.js स्वचालित रूप से 404 पृष्ठ सांख्यिकीय रूप से उत्पन्न करता है और इसका उपयोग तब किया जाता है जब 404 परोसना चाहिए। यह स्वचालित रूप से होता है और इसमें कोई बदलाव की आवश्यकता नहीं होती है।

आप इस पेज को कस्टमाइज़ भी कर सकते हैं। डिफ़ॉल्ट 404 पेज को बदलने के लिए, आप 404.js फ़ाइल बना सकते हैं।

यदि आप इसके बारे में अधिक जानना चाहते हैं, तो आप परामर्श कर सकते हैं निम्नलिखित लिंक। 


पहली टिप्पणी करने के लिए

अपनी टिप्पणी दर्ज करें

आपका ईमेल पता प्रकाशित नहीं किया जाएगा। आवश्यक फ़ील्ड के साथ चिह्नित कर रहे हैं *

*

*

  1. डेटा के लिए जिम्मेदार: मिगुएल elngel Gatón
  2. डेटा का उद्देश्य: नियंत्रण स्पैम, टिप्पणी प्रबंधन।
  3. वैधता: आपकी सहमति
  4. डेटा का संचार: डेटा को कानूनी बाध्यता को छोड़कर तीसरे पक्ष को संचार नहीं किया जाएगा।
  5. डेटा संग्रहण: ऑकेंटस नेटवर्क्स (EU) द्वारा होस्ट किया गया डेटाबेस
  6. अधिकार: किसी भी समय आप अपनी जानकारी को सीमित, पुनर्प्राप्त और हटा सकते हैं।