नेक्स्ट.जेएस ऐप राउटर की रिलीज के साथ, कई डेवलपर्स अपने मौजूदा प्रोजेक्ट्स को स्थानांतरित करने के लिए उत्सुक हैं। इस पोस्ट में, मैं एक प्रोजेक्ट को नेक्स्ट.जेएस ऐप राउटर पर माइग्रेट करने का अपना अनुभव साझा करूंगा, जिसमें प्रमुख चुनौतियां, बदलाव और आप प्रक्रिया को कैसे आसान बना सकते हैं।

यह एक वृद्धिशील दृष्टिकोण है, आप पेज राउटर और ऐप राउटर का एक साथ उपयोग कर सकते हैं।

Next.js ऐप राउटर पर माइग्रेट क्यों करें?

ऐप राउटर कई फायदे पेश करता है:

• बेहतर रूटिंग: क्लीनर फ़ाइल-सिस्टम-आधारित रूटिंग।
• सर्वर-साइड रेंडरिंग (एसएसआर) संवर्द्धन: सर्वर-साइड डेटा का अधिक कुशल प्रबंधन।
• मेटा हैंडलिंग: सरलीकृत एसईओ प्रबंधन।
• बेहतर प्रदर्शन: विभिन्न घटकों के लिए अंतर्निहित अनुकूलन।

माइग्रेट करके, आप नवीनतम नेक्स्ट.जेएस सुविधाओं का लाभ उठाने के लिए अपने एप्लिकेशन को भविष्य में सुरक्षित कर सकते हैं।

ऐप राउटर पर माइग्रेट करने के चरण

• अद्यतन निर्भरताएं

पहला कदम यह सुनिश्चित करना है कि आपके नेक्स्ट.जेएस और संबंधित निर्भरताएं अद्यतित हैं। Next.js और React के नवीनतम संस्करण स्थापित करने के लिए निम्नलिखित कमांड चलाएँ:

npm install next@latest react@latest react-dom@latest
npm install -D eslint-config-next@latest

• ऐप फ़ोल्डर की संरचना करें

ऐप राउटर रूट, मेटाडेटा और लेआउट के प्रबंधन के लिए नई ऐप निर्देशिका पर निर्भर करता है। इसकी संरचना इस प्रकार करें:

ऐप फ़ोल्डर: अपने पृष्ठों को ऐप फ़ोल्डर में ले जाएं। प्रत्येक रूट का अब अपना स्वयं का समर्पित फ़ोल्डर है जिसमें एक पेज.tsx फ़ाइल है।

लेआउट: अपने ऐप के विशिष्ट अनुभागों के लिए लेआउट परिभाषित करने के लिए एक लेआउट.tsx फ़ाइल जोड़ें। यह नेविगेशन बार या फ़ुटर जैसे साझा घटकों को संभालने के लिए विशेष रूप से उपयोगी है।

• राउटर परिवर्तन

सबसे महत्वपूर्ण परिवर्तनों में से एक रूटिंग और नेविगेशन कार्यक्षमता के लिए नेक्स्ट/राउटर को नेक्स्ट/नेविगेशन से बदलना है।

सभी अगले/राउटर आयातों को अगले/नेविगेशन से बदलें।
जहां उपयुक्त हो, यूज़राउटर जैसे फ़ंक्शंस को नए समकक्षों, जैसे यूज़पाथनाम, यूज़सर्चपैम्स और यूज़राउटर() के साथ अपडेट करें।

• रिफैक्टर सर्वर-साइड कोड

getServerSideProps और getStaticProps ऐप राउटर में अप्रचलित हैं।
सर्वर-साइड पृष्ठों में डेटा लाने के लिए एसिंक सर्वर घटकों या सर्वर क्रियाओं का उपयोग करें।

export async function getData() {
  const res = await fetch('https://getData.com/data');
  return res.json();
}

• क्लाइंट-साइड घटकों को संभालना

ग्राहक घटक:
कोई भी घटक जो रिएक्ट हुक, ब्राउज़र एपीआई या उपयोगकर्ता इंटरैक्शन का उपयोग करता है उसे 'क्लाइंट का उपयोग करें' के साथ चिह्नित किया जाना चाहिए। यह Next.js को उन्हें क्लाइंट साइड पर प्रस्तुत करने के लिए कहता है।

सर्वर घटक:
कोई भी घटक जिसे ब्राउज़र के साथ इंटरेक्शन की आवश्यकता नहीं है, वह सर्वर घटक के रूप में बना रह सकता है। ये अधिक कुशल हैं क्योंकि ये क्लाइंट को अनावश्यक जावास्क्रिप्ट शिपिंग से बचाते हैं।

• बाहरी पुस्तकालयों को संभालना

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

प्रवास के दौरान सामान्य चुनौतियाँ

• राउटर इवेंट हैंडलिंग:

अगले/राउटर से अगले/नेविगेशन में परिवर्तन के साथ, राउटर घटनाओं को संभालने के लिए एक अलग दृष्टिकोण की आवश्यकता हो सकती है।
सुनिश्चित करें कि आप किसी भी राउटर इवेंट श्रोता या हुक को तदनुसार अपडेट करें।

• लेआउट शिफ्ट मुद्दे:

जटिल लेआउट (विशेषकर एनिमेशन वाले) वाले पेजों को माइग्रेट करते समय, आप लेआउट में बदलाव देख सकते हैं। लेआउट परिवर्तन को रोकने के लिए प्लेसहोल्डर जोड़ें या सर्वर-साइड पर उचित संरेखण रखें।

• छवि और लिंक घटक अपडेट:

ऐप राउटर छवि और लिंक घटकों में परिवर्तन पेश करता है।
घटकों को स्वचालित रूप से अपडेट करने के लिए कोडमोड का उपयोग करें।
छवि घटक के लिए, प्रतिक्रियाशील जैसी अप्रचलित विशेषताओं को हटा दें।

• एनिमेशन

एनीमेशन से संबंधित घटकों जैसे फ़्रेमर, स्वाइपर और लूटी फ़ाइलों को क्लाइंट साइड पर रखा जाना चाहिए।

निष्कर्ष

नेक्स्ट.जेएस ऐप राउटर पर माइग्रेट करना अपनी चुनौतियों के साथ आता है लेकिन प्रदर्शन, स्केलेबिलिटी और लचीलेपन में महत्वपूर्ण सुधार भी लाता है। माइग्रेशन को प्रबंधनीय अनुभागों (ऐप-स्तर, पेज-स्तर और फीचर अपडेट) में विभाजित करके, मैं प्रत्येक परिवर्तन को व्यवस्थित रूप से निपटने में सक्षम था।

यदि आपके पास अपने स्वयं के प्रवासन से संबंधित कोई प्रश्न या सुझाव हैं तो मुझे बताएं!