यह लेख एक शुरुआती-अनुकूल मार्गदर्शिका और नेक्स्ट.जेएस पर काम करने के चरणों के रूप में कार्य करता है।

Next.js वेब एप्लिकेशन बनाने के लिए एक लचीला ढांचा है। बल्कि यह Node.js के शीर्ष पर बनाया गया एक रिएक्ट फ्रेमवर्क है।

अपना Next.js प्रोजेक्ट सेट करना
एक नया Next.js प्रोजेक्ट शुरू करने के लिए, आपको अपनी मशीन पर Node.js इंस्टॉल करना होगा।

स्थापना
इंस्टालेशन पर, एक टर्मिनल खोलें और एक नया Next.js प्रोजेक्ट बनाने के लिए निम्नलिखित कमांड चलाएँ: npx create-next-app@latest my-nextjs-app
Next.js पहले से ही लिखित कोड प्रदान करता है जो मौजूदा कोडबेस से परिचित होने के लिए वास्तविक दुनिया के विकास को दर्शाता है।
एक बार इंस्टॉलेशन पूरा हो जाने पर, प्रोजेक्ट डायरेक्टरी पर जाएँ और डेवलपमेंट सर्वर चलाएँ:
सीडी माय-नेक्स्टजेएस-ऐप
एनपीएम रन डेव

फ़ोल्डर संरचना
विशिष्ट Next.js प्रोजेक्ट संरचना में कई प्रमुख फ़ोल्डर होते हैं:

• पेज/: इस फ़ोल्डर में वे फ़ाइलें हैं जो आपके एप्लिकेशन के मार्गों को परिभाषित करती हैं। इस फ़ोल्डर की प्रत्येक फ़ाइल एक रूट से मेल खाती है।
• सार्वजनिक/: यह वह जगह है जहां आप चित्र, फ़ॉन्ट और आइकन जैसी स्थिर संपत्तियां संग्रहीत कर सकते हैं। यहां फ़ाइलें यूआरएल के माध्यम से पहुंच योग्य हैं।
• शैलियाँ/: यह फ़ोल्डर आपकी वैश्विक और घटक-विशिष्ट शैलियाँ रखता है। डिफ़ॉल्ट रूप से, इसमें एक वैश्विक सीएसएस फ़ाइल होती है।
• घटक/: पुन: प्रयोज्य प्रतिक्रिया घटक।
• एपीआई/: एपीआई रूट, सर्वर-साइड फ़ंक्शंस के लिए उपयोग किया जाता है (वैकल्पिक)।

नेक्स्टजेएस एक पसंदीदा ढांचा है क्योंकि यह विभिन्न प्रकार की अंतर्निहित सुविधाएं प्रदान करता है जैसे:

1. तेजी से पेज लोड के लिए स्वचालित कोड विभाजन।- Next.js स्वचालित रूप से कोड विभाजन करता है, इसलिए प्रत्येक पृष्ठ केवल वही लोड करता है जो उस पृष्ठ के लिए आवश्यक है। मतलब यह है कि अन्य पृष्ठों के लिए कोड प्रारंभ में नहीं दिया गया है।

2. अनुकूलित प्रीफ़ेचिंग के साथ क्लाइंट-साइड रूटिंग।

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

3. एक सहज पृष्ठ-आधारित रूटिंग प्रणाली (गतिशील मार्गों के लिए समर्थन के साथ)

4. प्री-रेंडरिंग, स्टैटिक जेनरेशन (एसएसजी) और सर्वर-साइड रेंडरिंग (एसएसआर) दोनों प्रति-पेज के आधार पर समर्थित हैं। - क्लाइंट-साइड जावास्क्रिप्ट द्वारा किए जाने के बजाय, प्रत्येक पेज के लिए पहले से HTML जेनरेट करता है।

5. यदि हमें डेटा को प्री-रेंडर करने की आवश्यकता नहीं है, तो हम क्लाइंट-साइड रेंडरिंग नामक रणनीति का भी उपयोग कर सकते हैं, जो:

   1. पृष्ठ के उन हिस्सों को स्थिर रूप से तैयार (प्री-रेंडर) करता है जिनके लिए बाहरी डेटा की आवश्यकता नहीं होती है।
   2. जब पेज लोड होता है, तो जावास्क्रिप्ट का उपयोग करके क्लाइंट से बाहरी डेटा प्राप्त करता है और शेष हिस्सों को पॉप्युलेट करता है।

6. अंतर्निहित सीएसएस और सैस समर्थन किसी भी सीएसएस-इन-जेएस लाइब्रेरी के लिए उपलब्ध है।

7. तेज़ ताज़ा समर्थन के साथ विकास वातावरण।

8. सर्वर रहित फ़ंक्शंस के साथ एपीआई एंडपॉइंट बनाने के लिए एपीआई मार्ग

9. Next.js में एपीआई रूट्स के लिए समर्थन है, जो हमें Node.js सर्वर रहित फ़ंक्शन के रूप में आसानी से एक एपीआई एंडपॉइंट बनाने की सुविधा देता है। हम पेज/एपीआई निर्देशिका के अंदर एक फ़ंक्शन बनाकर ऐसा कर सकते हैं।

10. पूरी तरह से विस्तार योग्य।

निष्कर्ष
Next.js के साथ शुरुआत करना आसान है, और यह ढांचा लचीलेपन और उपयोग में आसानी के बीच एक उत्कृष्ट संतुलन प्रदान करता है। चाहे आप एक व्यक्तिगत ब्लॉग, एक कॉर्पोरेट वेबसाइट, या एक जटिल वेब एप्लिकेशन बना रहे हों, नेक्स्ट.जेएस आपको स्केलेबल, परफॉर्मेंट ऐप्स को शीघ्रता से बनाने में मदद करने के लिए टूल और सुविधाएँ प्रदान करता है।