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

Next.js, आपके React ऐप्लिकेशन में कई ऑप्टिमाइज़ेशन का ध्यान रखता है, ताकि आपको ऐसा न करना पड़े

Houssein Djirdeh

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

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

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

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

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

Next.js, React से किस तरह अलग है?

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

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

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

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

  • सर्वर-साइड रेंडरिंग
  • कोड-स्प्लिटिंग की सुविधा अपने-आप चालू होना
  • रास्ते की जानकारी पहले से फ़ेच करना
  • फ़ाइल-सिस्टम रूटिंग
  • सीएसएस-इन-जेएस स्टाइलिंग (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 ऐप्लिकेशन की तरह बनाया और इस्तेमाल किया जा सकता है. components/ डायरेक्ट्री को पहले ही एक कॉम्पोनेंट, nav.js के साथ बनाया जा चुका है. इसे पहले ही index.js में इंपोर्ट किया जा चुका है. डिफ़ॉल्ट रूप से, Next.js में इस्तेमाल किए जाने वाले हर इंपोर्ट को सिर्फ़ तब फ़ेच किया जाता है, जब वह पेज लोड होता है. इससे अपने-आप कोड-स्प्लिटिंग के फ़ायदे मिलते हैं.

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

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

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

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

मज़ाक कर रहे हैं 😛

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