Next.js आपके React ऐप्लिकेशन में कई ऑप्टिमाइज़ेशन का ध्यान रखता है, ताकि आपको
Next.js एक राय देने वाला प्रतिक्रिया फ़्रेमवर्क है, जिसमें कई परफ़ॉर्मेंस ऑप्टिमाइज़ेशन शामिल हैं. इस फ़्रेमवर्क का मुख्य मकसद यह पक्का करना है कि ऐप्लिकेशन डिफ़ॉल्ट रूप से इन सुविधाओं को शामिल करके, सबसे सही परफ़ॉर्मेंस दे पाएं.
इस शुरुआती जानकारी में, फ़्रेमवर्क से मिलने वाली कई सुविधाओं के बारे में कम शब्दों में जानकारी दी गई है. इस कलेक्शन में मौजूद दूसरी गाइड, इन सुविधाओं के बारे में ज़्यादा जानकारी देगी.
आप क्या सीखेंगे?
हालांकि Next.js डिफ़ॉल्ट रूप से कई परफ़ॉर्मेंस ऑप्टिमाइज़ेशन उपलब्ध कराता है, लेकिन इन गाइड में उनके बारे में ज़्यादा जानकारी दी गई है. साथ ही, यह भी बताया गया है कि इनका इस्तेमाल करके तेज़ और बेहतरीन अनुभव कैसे पाया जा सकता है.
React साइटों में आम तौर पर, ऐसे कई ऑप्टिमाइज़ेशन जोड़े जा सकते हैं जो Next.js के साथ बनाए गए ऐप्लिकेशन के लिए भी काम करेंगे. इन्हें शामिल नहीं किया जाएगा, क्योंकि Next.js में खास तौर पर दी जाने वाली चीज़ों पर ही फ़ोकस है. प्रतिक्रिया को ऑप्टिमाइज़ करने के सामान्य तरीकों के बारे में ज़्यादा जानने के लिए, प्रतिक्रियाओं का संग्रह देखें.
Next.js, React से किस तरह अलग है?
React एक लाइब्रेरी है, जो कॉम्पोनेंट पर आधारित तरीके का इस्तेमाल करके, यूज़र इंटरफ़ेस को आसान बनाती है. React खास तौर पर यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी है, लेकिन यह काफ़ी कारगर है. कई डेवलपर, बिल्ड टूलचेन के लिए अतिरिक्त टूल शामिल करते हैं. जैसे, मॉड्यूल बंडलर (उदाहरण के लिए webpack) और एक ट्रांसपिलर (उदाहरण के लिए, Babel).
प्रतिक्रिया वाले कलेक्शन में, हमने Create React ऐप्लिकेशन (सीआरए) का इस्तेमाल किया, ताकि 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 ऐप्लिकेशन की तरह भी बनाए और इस्तेमाल किए जा सकते हैं. nav.js नाम के एक कॉम्पोनेंट की मदद से, components/ डायरेक्ट्री पहले ही बनाई जा चुकी है. इस कॉम्पोनेंट को index.js में पहले ही इंपोर्ट किया जा चुका है. डिफ़ॉल्ट रूप से, Next.js में इस्तेमाल किया गया हर इंपोर्ट सिर्फ़ तब फ़ेच किया जाता है, जब वह पेज
लोड हो. इससे, अपने-आप कोड अलग करने के फ़ायदे मिलते हैं.
इसके अलावा, Next.js में हर शुरुआती पेज लोड सर्वर-साइड रेंडर होता है. DevTools में नेटवर्क पैनल खोलने पर, आपको दस्तावेज़ के लिए शुरुआती अनुरोध दिखेगा. इसके आधार पर, सर्वर से रेंडर किया गया पेज दिखता है.
Next.js के ज़रिए अपने-आप मिलने वाली कई सुविधाओं में ये कुछ ही सुविधाएं हैं. कई को पसंद के मुताबिक बनाया जा सकता है और अलग-अलग इस्तेमाल के हिसाब से इनमें बदलाव किया जा सकता है.
आगे क्या करना है?
पंक का मतलब है जवाब
इस कलेक्शन की हर दूसरी गाइड, Next.js की खास सुविधा के बारे में ज़्यादा जानकारी देगी:
- पेज नेविगेशन को तेज़ करने के लिए रूट प्रीफ़ेच करना
- सर्च इंजन से तेज़ी से लोड होने के लिए, हाइब्रिड और सिर्फ़ एएमपी वाले पेजों को दिखाना
- JavaScript फ़ुटप्रिंट को कम करने के लिए डाइनैमिक इंपोर्ट के साथ कोड-स्प्लिटिंग कॉम्पोनेंट