यदि आपने Next.js का उपयोग करके एक वेब एप्लिकेशन बनाया है, लेकिन अब इसे शुद्ध React.js एप्लिकेशन में बदलने की आवश्यकता है, तो आप अकेले नहीं हैं। चाहे यह सरलता के लिए हो, विशिष्ट परियोजना आवश्यकताओं के लिए, या क्लाइंट-साइड रेंडरिंग के लिए प्राथमिकता के लिए, नेक्स्ट.जेएस से रिएक्ट में कनवर्ट करना सही मार्गदर्शन के साथ सीधा हो सकता है। इस लेख में, मैं आपको नेक्स्ट.जेएस ऐप को रिएक्ट.जेएस में बदलने के लिए के चरणों के बारे में बताऊंगा, ताकि आपके एप्लिकेशन की मुख्य कार्यक्षमता को बनाए रखते हुए एक सहज बदलाव सुनिश्चित किया जा सके।

नोट: यदि आप इसके बजाय React.js एप्लिकेशन को Next.js में कनवर्ट करना चाहते हैं, तो React.js को Next.js में कैसे कनवर्ट करें, इस पर मेरा दूसरा लेख देखें।

Next.js को React.js में क्यों बदलें?

नेक्स्ट.जेएस एक शानदार ढांचा है जो सर्वर-साइड रेंडरिंग (एसएसआर), स्टैटिक साइट जेनरेशन (एसएसजी), और कई अन्य सुविधाएं प्रदान करता है। हालाँकि, यदि आप React.js के साथ क्लाइंट-साइड रेंडरिंग (CSR) को प्राथमिकता देते हैं, तो ये सुविधाएँ छोटी परियोजनाओं के लिए अत्यधिक या अनावश्यक हो सकती हैं। React.js में कनवर्ट करने से आपकी निर्माण प्रक्रिया सरल हो सकती है, सर्वर निर्भरता कम हो सकती है, और आपको अपने एप्लिकेशन के आर्किटेक्चर पर अधिक नियंत्रण मिल सकता है।

मतभेदों को समझना

रूपांतरण प्रक्रिया में उतरने से पहले, Next.js और React.js के बीच मुख्य अंतर को समझना आवश्यक है:

• सर्वर-साइड रेंडरिंग बनाम क्लाइंट-साइड रेंडरिंग: Next.js SSR और SSG को सपोर्ट करता है, जबकि React.js मुख्य रूप से CSR के लिए है।
• रूटिंग: Next.js में एक अंतर्निहित फ़ाइल-आधारित रूटिंग प्रणाली है। React.js में, आपको रिएक्ट राउटर जैसी लाइब्रेरी का उपयोग करना होगा।
• एपीआई रूट: Next.js आपको एक ही प्रोजेक्ट के भीतर एपीआई रूट बनाने की अनुमति देता है। React.js में, आप आमतौर पर फ्रंटएंड और बैकएंड को अलग करेंगे।

Next.js को React.js में बदलने के चरण

आइए नेक्स्ट.जेएस एप्लिकेशन को रिएक्ट.जेएस में बदलने के तरीके के बारे में चरण-दर-चरण मार्गदर्शिका के साथ शुरुआत करें।

1. एक नया React.js एप्लिकेशन सेट करें

सबसे पहले, Create React App (CRA) या Vite जैसे टूल का उपयोग करके एक नया React.js प्रोजेक्ट बनाएं।

क्रिएट रिएक्ट ऐप का उपयोग करना:

npx create-react-app my-react-app सीडी माय-रिएक्शन-ऐप

npx create-react-app my-react-app
cd my-react-app

विटे का उपयोग करना:

npm init vite@latest my-react-app --template प्रतिक्रिया सीडी माय-रिएक्शन-ऐप एनपीएम इंस्टाल

npx create-react-app my-react-app
cd my-react-app

2. स्थानांतरण निर्भरताएँ

अपने Next.js प्रोजेक्ट के package.json से निर्भरता और निर्भरता को नए React.js प्रोजेक्ट के package.json में कॉपी करें। उन्हें स्थापित करने के लिए npm install या यार्न इंस्टॉल चलाएँ।

3. घटकों और पृष्ठों को माइग्रेट करें

अपने Next.js घटकों और पेज निर्देशिकाओं की सामग्री को अपने React.js प्रोजेक्ट की src निर्देशिका में कॉपी करें। चूँकि Next.js रूटिंग के लिए पेज निर्देशिका का उपयोग करता है, इसलिए आपको इस संरचना को समायोजित करने की आवश्यकता होगी।

4. रिएक्ट राउटर के साथ रूटिंग लागू करें

Next.js पेज डायरेक्टरी के आधार पर स्वचालित रूप से रूटिंग को संभालता है। React.js में, आपको मैन्युअल रूप से रूटिंग सेट करने की आवश्यकता होगी।

रिएक्ट राउटर स्थापित करें:

एनपीएम इंस्टाल रिएक्ट-राउटर-डोम

npx create-react-app my-react-app
cd my-react-app

src/App.js में रूट सेट करें:

'रिएक्ट-राउटर-डोम' से { ब्राउज़र राउटर को राउटर, रूट, रूट } के रूप में आयात करें './होम' से होम आयात करें './अबाउट' से 'के बारे में' आयात करें // आवश्यकतानुसार अन्य घटकों को आयात करें फ़ंक्शन ऐप() { वापस करना ( } /> } /> {/* अन्य मार्ग जोड़ें */} मार्ग> राउटर> ) } डिफ़ॉल्ट ऐप निर्यात करें

npx create-react-app my-react-app
cd my-react-app

5. डेटा प्राप्त करने के तरीकों को समायोजित करें

नेक्स्ट.जेएस में, डेटा फ़ेचिंग getServerSideProps, getStaticProps, या getInitialProps का उपयोग करके की जाती है। React.js में, आपको अपने घटकों के भीतर डेटा लाने की प्रक्रिया को संभालना होगा, आमतौर पर यूज़इफ़ेक्ट और यूज़स्टेट का उपयोग करके।

उदाहरण:

'प्रतिक्रिया' से आयात करें {useState,useEffect } फ़ंक्शन होम() { स्थिरांक [डेटा, सेटडेटा] = उपयोगस्टेट([]) उपयोगप्रभाव(() => { फ़ेच('/एपीआई/डेटा') // आवश्यकतानुसार एपीआई एंडपॉइंट को अपडेट करें .तब((प्रतिक्रिया) => प्रतिक्रिया.json()) .तब((डेटा) => सेटडेटा(डेटा)) }, []) वापसी