Next.js के साथ डिफ़ॉल्ट रूप से परफ़ॉर्मेंस

Next.js आपके React ऐप्लिकेशन में कई ऑप्टिमाइज़ेशन का काम करता है. इससे आपको अलग-अलग तरह की

हुसैन ज़िरदेह

Next.js एक राय तैयार किया गया प्रतिक्रिया वाला फ़्रेमवर्क है, जिसमें कई परफ़ॉर्मेंस ऑप्टिमाइज़ेशन को शामिल किया गया है. इस फ़्रेमवर्क के पीछे का मुख्य मकसद यह पक्का करना है कि ऐप्लिकेशन शुरू हों और उनकी परफ़ॉर्मेंस बनी रहे. इसके लिए, इन क्षमताओं को डिफ़ॉल्ट रूप से शामिल किया जाता है.

इस परिचय में, फ़्रेमवर्क के ज़रिए बड़े लेवल पर दी जाने वाली कई सुविधाओं के बारे में कम शब्दों में बताया गया है. इस कलेक्शन में मौजूद दूसरे गाइड, इन सुविधाओं के बारे में ज़्यादा जानकारी देंगे.

आपको क्या सीखने को मिलेगा?

हालांकि, Next.js डिफ़ॉल्ट रूप से कई परफ़ॉर्मेंस ऑप्टिमाइज़ेशन उपलब्ध कराता है, लेकिन इन गाइड का मकसद इनके बारे में ज़्यादा जानकारी देना और आपको यह बताना है कि तेज़ और बेहतर अनुभव देने के लिए इनका इस्तेमाल कैसे किया जा सकता है.

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

Next.js, प्रतिक्रिया से किस तरह अलग है?

React एक लाइब्रेरी है जो कॉम्पोनेंट पर आधारित नज़रिए का इस्तेमाल करके, यूज़र इंटरफ़ेस बनाना आसान बनाती है. यह सुविधा भले ही असरदार हो, लेकिन यह खास तौर पर एक यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी है. कई डेवलपर में कुछ और टूल शामिल होते हैं, जैसे कि मॉड्यूल बंडलर (उदाहरण के लिए, वेबपैक) और एक ट्रांसपाइलर (उदाहरण के लिए Babel) जैसे टूल की पूरी जानकारी देने के लिए.

रिऐक्ट कलेक्शन में, हमने Create React ऐप्लिकेशन (सीआरए) (सीआरए) का इस्तेमाल करके, प्रतिक्रिया वाले ऐप्लिकेशन को तेज़ी से बेहतर बनाने का तरीका अपनाया. CRA एक निर्देश में पूरा बिल्ड टूलचेन उपलब्ध कराता है, जिससे React ऐप्लिकेशन सेट अप करने में होने वाली परेशानी से बचा जा सकता है.

हालांकि, CRA में कुछ डिफ़ॉल्ट ऑप्टिमाइज़ेशन बेक किए गए हैं, लेकिन इस टूल का मकसद आसान और आसान सेटअप उपलब्ध कराना है. कॉन्फ़िगरेशन को हटाने और इसमें खुद बदलाव करने हैं, यह फ़ैसला डेवलपर को चुनने का विकल्प दिया जाता है.

Next.js, जिसका इस्तेमाल नया React ऐप्लिकेशन बनाने के लिए भी किया जा सकता है. इसके लिए अलग तरीका अपनाना है. इससे तुरंत ही ऐसे कई सामान्य ऑप्टिमाइज़ेशन मिल जाते हैं जो कई डेवलपर करना चाहते हैं, लेकिन उन्हें सेट अप करना मुश्किल होता है, जैसे:

  • सर्वर साइड रेंडरिंग
  • कोड को अपने-आप अलग-अलग करने की सुविधा
  • रूट प्रीफ़ेच करना
  • फ़ाइल-सिस्टम रूटिंग
  • CSS-in-JS स्टाइल (styled-jsx)

सेट अप किया जा रहा है

नया Next.js ऐप्लिकेशन बनाने के लिए, नीचे दिए गए कमांड को चलाएं:

npx create-next-app new-app

इसके बाद, डायरेक्ट्री पर जाएं और डेवलपमेंट सर्वर शुरू करें:

cd new-app
npm run dev

नीचे दिया गया एम्बेड, नए Next.js ऐप्लिकेशन की डायरेक्ट्री का स्ट्रक्चर दिखाता है.

  • प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
  • साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन फ़ुलस्क्रीन दबाएं.

ध्यान दें कि pages/ डायरेक्ट्री को एक ही फ़ाइल से बनाया जाता है: index.jsx. Next.js एक फ़ाइल-सिस्टम रूटिंग तरीका का पालन करता है, जहां इस डायरेक्ट्री में मौजूद हर पेज को एक अलग रूट के तौर पर दिखाया जाता है. इस डायरेक्ट्री में नई फ़ाइल, जैसे कि about.js बनाने से, अपने-आप एक नया रूट (/about) बन जाएगा.

किसी दूसरे React ऐप्लिकेशन की तरह भी कॉम्पोनेंट बनाए और इस्तेमाल किए जा सकते हैं. nav.js नाम के एक कॉम्पोनेंट के साथ पहले ही components/ डायरेक्ट्री बनाई जा चुकी है, जिसे index.js में पहले से ही इंपोर्ट किया जा चुका है. डिफ़ॉल्ट रूप से, Next.js में इस्तेमाल किया जाने वाला हर इंपोर्ट सिर्फ़ तब फ़ेच किया जाता है, जब वह पेज लोड होता है. इससे अपने-आप कोड को अलग-अलग करने के फ़ायदे मिलते हैं.

इसके अलावा, Next.js में हर शुरुआती पेज लोड सर्वर साइड रेंडर होता है. DevTools में नेटवर्क पैनल खोलने पर, आपको यह दिखेगा कि दस्तावेज़ के लिए शुरुआती अनुरोध से पूरी तरह सर्वर का रेंडर किया गया पेज दिखता है.

नेटवर्क पैनल के 'झलक देखें' टैब से पता चलता है कि जब किसी पेज का अनुरोध किया जाता है, तो Next.js विज़ुअल तौर पर पूरा एचटीएमएल दिखाता है.
नेटवर्क पैनल के 'झलक देखें' टैब से यह पता चलता है कि जब किसी पेज का अनुरोध किया जाता है, तो Next.js विज़ुअल तौर पर पूरा एचटीएमएल दिखाता है.

ये, Next.js से अपने-आप मिलने वाली कई सुविधाओं में से कुछ ही हैं. इनमें से कई प्रॉपर्टी को पसंद के मुताबिक बनाया जा सकता है. साथ ही, इनमें अलग-अलग कामों के लिए बदलाव किए जा सकते हैं.

आगे क्या करना है?

पंच के मकसद से ○

इस कलेक्शन की हर गाइड में Next.js की खास सुविधा के बारे में पूरी जानकारी मिलेगी: