विषयसूची[लुकाउनुहोस्][देखाउनु]
सफ्टवेयर लाइब्रेरी वा फ्रेमवर्क छनोट गर्दा, विकासकर्ता अनुभव सामान्यतया खातामा लिइन्छ।
जब म "विकासकर्ता अनुभव" उल्लेख गर्छु, म विकासकर्ताहरूले वास्तवमा कसरी काम गर्छन् भन्ने कुरालाई जनाउँछ। विकासकर्ताहरूले पुस्तकालयहरू वा फ्रेमवर्कहरू छनौट गर्छन् जुन प्रयोग गर्न रमाइलो हुन्छन्।
हामीसँग अहिले सबैभन्दा लोकप्रिय पुस्तकालयहरू र फ्रेमवर्कहरू हुनुको यो एउटा प्राथमिक कारण हो। विकासकर्ताहरूको रूपमा, हामीले हाम्रा कार्यहरूमा मद्दत गर्नका लागि विद्यमान उपकरणहरू सिर्जना गर्दा स्क्र्याचबाट सुरु गर्नुपर्दैन।
फ्रेमवर्कहरू सफ्टवेयरका टुक्राहरू हुन् जुन अनुप्रयोगहरू निर्माण गर्न विकासकर्ताहरूद्वारा सिर्जना र प्रयोग गरिन्छ, र NextJS ती मध्ये एक हो।
यस पोष्टमा, हामी Nextjs, यसको मुख्य विशेषताहरू, र हामी कसरी अनुप्रयोग निर्माण गर्न यसलाई प्रयोग गर्न सक्छौं भन्ने बारे जान्छौं। सिधै भित्र हाम फालौं।
Next.js के हो?
Next.js स्थिर वेबपेजहरू र प्रतिक्रिया-आधारित अनलाइन अनुप्रयोगहरू छिटो र सजिलै निर्माण गर्नको लागि जाभास्क्रिप्ट फ्रेमवर्क हो। यसले तपाईंलाई Windows, Linux, र Mac सहित विभिन्न प्लेटफर्महरूको लागि उत्कृष्ट वेब एपहरू डिजाइन गर्न अनुमति दिन्छ।
यदि तपाइँसँग प्रतिक्रियासँग न्यूनतम परिचितता छ र प्रतिक्रिया इकोसिस्टमको बारेमा थप जान्न चाहनुहुन्छ भने तपाइँ Next.js फ्रेमवर्कसँग परिचित हुनुपर्दछ।
यद्यपि Next.js तपाइँलाई सुरु गर्न आवश्यक सबै कुराको साथ आउँछ, तपाइँ NPM र यार्न, JavaScript र TypeScript, CSS र SCSS, स्थिर निर्यात, र सर्भरलेस डिप्लोइमेन्ट बीच चयन गर्न सक्नुहुन्छ।
विशेषताहरु
- राउटिङ स्वचालित रूपमा गरिन्छ - तपाईंले कुनै पनि कुरा कन्फिगर गर्न आवश्यक छैन किनभने कुनै पनि URL फाइल प्रणालीमा म्याप गरिएको छ, पृष्ठहरू फोल्डरमा फाइलहरूमा (तपाईंसँग अनुकूलन विकल्पहरू छन्, अवश्य)।
- एकल फाइलका कम्पोनेन्टहरू - स्टाइल-jsx प्रयोग गरेर कम्पोनेन्टमा स्कोप गरिएका शैलीहरू थप्न सरल छ, जुन पूर्ण रूपमा एकीकृत र एउटै टोलीद्वारा उत्पादन गरिएको छ।
- हट कोड पुन: लोड गर्दै - जब Next.js ले डिस्कमा बचत गरिएको परिमार्जन पत्ता लगाउँदछ, यसले पृष्ठ पुन: लोड गर्दछ।
- डायनामिक कम्पोनेन्टहरू - तपाइँ गतिशील रूपमा जाभास्क्रिप्ट मोड्युलहरू लोड गर्न सक्नुहुन्छ र कम्पोनेन्टहरू प्रतिक्रिया गर्न सक्नुहुन्छ।
- स्थिर निर्यात - Next.js ले तपाइँलाई अर्को निर्यात आदेशको साथ तपाइँको एपबाट पूर्ण रूपमा स्थिर साइट निर्यात गर्न अनुमति दिन्छ।
- वातावरणसँग अनुकूलता - Next.js जाभास्क्रिप्ट, नोड, र प्रतिक्रिया इकोसिस्टमहरूसँग निर्बाध रूपमा एकीकृत हुन्छ।
- स्प्लिटिंग कोडहरू स्वचालित रूपमा - केवल पुस्तकालयहरू र जाभास्क्रिप्टहरू जुन पृष्ठहरू रेन्डर गर्न प्रयोग गरिन्छ। अनुप्रयोगको सबै कोड समावेश भएको एकल JavaScript फाइल सिर्जना गर्नुको सट्टा, Next.js ले बुद्धिमानीपूर्वक एपलाई धेरै स्रोतहरूमा विभाजन गर्दछ।
Next.js एप्लिकेसन कसरी बनाउने?
स्थापना
Next.js परियोजना स्थापना र निर्माण गर्न तपाईंले node npx आदेश प्रयोग गर्न सक्नुहुन्छ।
यसले फोल्डर र Next.js प्रोजेक्ट चलाउन आवश्यक पर्ने सबै फाइलहरू, कन्फिगरेसनहरू र अन्य वस्तुहरू उत्पन्न गर्नेछ।
एक पटक यो उत्पन्न भएपछि तपाइँ एप सुरु गर्न सक्नुहुन्छ।
पृष्ठहरू र रूटिङ
Next.js को साथ मार्गहरू ह्यान्डल गर्न, हामीले रूटिङ फ्रेमवर्क प्रयोग गर्न आवश्यक छैन। Next.js को साथ राउटिङ सेटअप गर्न एक हावा हो। जब तपाइँ नयाँ Next.js एप निर्माण गर्न Create-next-app कमाण्ड प्रयोग गर्नुहुन्छ, एपले पूर्वनिर्धारित रूपमा 'पृष्ठहरू' नामक फोल्डर सिर्जना गर्छ।
यो 'पृष्ठहरू' फोल्डर हो जहाँ तपाईं आफ्नो मार्गहरू कायम राख्नुहुन्छ। नतिजाको रूपमा, उपनिर्देशिकामा प्रत्येक प्रतिक्रिया कम्पोनेन्ट फाइललाई छुट्टै मार्गको रूपमा ह्यान्डल गरिनेछ।
उदाहरणका लागि, यदि फोल्डरमा ती फाइलहरू छन्:
- index.js
- js बारे
- aricles.js
यो फाइल तीन तरिकामा स्वतः रूपान्तरण हुनेछ:
- अनुक्रमणिका पृष्ठ localhost/index
- को बारे मा पृष्ठ लोकलहोस्ट/को बारेमा
- ब्लग पृष्ठ स्थानीय होस्ट/लेखहरू
about.js पृष्ठको उदाहरण तल देखाइएको छ। पृष्ठको बारेमा केहि प्रदान गरिएको छैन, तपाईले देख्न सक्नुहुन्छ। यो केवल एक मानक प्रतिक्रिया कार्यात्मक घटक हो।
मार्गहरू
नेस्टेड मार्गहरू बनाउनको लागि, तपाईंले पहिले सबफोल्डर स्थापना गर्नुपर्छ। उदाहरणका लागि: पृष्ठहरू/लेखहरू। त्यो फोल्डर भित्र आफ्नो 'contact.js' प्रतिक्रिया कम्पोनेन्ट सिर्जना गर्नुहोस्, र यसले पृष्ठ localhost/articles/contact उत्पन्न गर्नेछ।
यदि तपाईंले एउटा फाइल pages/articles.js मा र अर्को pages/articles/index.js मा राख्नुभयो भने। दुबैले एउटै बाटो लोकलहोस्ट/ब्लगलाई प्रतिबिम्बित गर्दछ। यस अवस्थामा, Next.js ले article.js फाइललाई मात्र रेन्डर गर्नेछ। गतिशील मार्गहरूको बारेमा के हो, जसमा प्रत्येक ब्लग पोष्टको आफ्नै मार्ग हुन्छ:
- लोकलहोस्ट/ब्लग/पहिलो लेख
- localhost/blog/-सेकेन्ड-लेख
कोष्ठक नोटेशन प्रयोग गरेर, तपाइँ Next.js मा गतिशील मार्ग परिभाषित गर्न सक्नुहुन्छ। उदाहरणका लागि: pages/article/[slug].js
लिंक मार्गहरू
तपाईंले अब आफ्नो पहिलो मार्ग पूरा गर्नुभयो। म अनुमान गर्दैछु कि तपाइँ ती मार्गहरूमा पृष्ठहरू कसरी जडान गर्ने भनेर सोध्दै हुनुहुन्छ। त्यसो गर्नको लागि तपाईलाई 'अर्को/लिंक' चाहिन्छ।
यहाँ एउटा गृह पृष्ठको उदाहरण छ जसमा बारेमा पृष्ठको लिङ्क समावेश छ:
यदि तपाइँ लिङ्क शैली गर्न चाहनुहुन्छ भने, निम्न वाक्य रचना प्रयोग गर्नुहोस्:
मार्गहरू रिडिरेक्ट गर्नुहोस्
के हुन्छ यदि तपाइँलाई एक निश्चित पृष्ठमा रिडिरेक्ट गर्न आवश्यक छ? उदाहरणका लागि, जब बटन थिचिन्छ? तपाईंले 'router.push' प्रयोग गरेर यो पूरा गर्न सक्नुहुन्छ:
एसईओ
वेब अनुप्रयोगहरूमा पृष्ठहरूलाई HTML शरीर भित्रको डेटाको अतिरिक्त मेटा (हेड) तत्वहरू आवश्यक पर्दछ। यसले प्रतिक्रिया एप्लिकेसनमा प्रतिक्रिया हेल्मेट नामको अतिरिक्त आवश्यकता स्थापना गर्न आवश्यक हुनेछ।
हामीले हाम्रो वेबपेजहरूमा सजिलैसँग मेटाडेटा थप्नको लागि नेक्स्ट/हेडबाट अर्कोमा हेड कम्पोनेन्ट प्रयोग गर्न सक्छौं जुन खोज परिणाम र इम्बेडहरूमा प्रदर्शित हुनेछ:
अवयव
तपाईले प्राय: कम्पोनेन्ट वा लेआउट फाइल विकास गर्न आवश्यक छ। उदाहरणका लागि, navbar रेन्डर गर्ने कम्पोनेन्ट। हामीले हालसम्म पृष्ठहरूको फोल्डर प्रयोग गरेका छौं। यदि तपाइँको कम्पोनेन्ट रुट पृष्ठको रूपमा होइन भने के हुन्छ?
तपाइँ प्रयोगकर्ताले स्थानीय होस्ट/नेभबार जस्ता पृष्ठमा नेभिगेट गर्न चाहनुहुन्न। यदि तपाईंले पृष्ठहरूको फोल्डरमा Navbar.js कम्पोनेन्ट राख्नुभयो भने, त्यसो हुनेछ। यस्तो अवस्थामा के गर्नुपर्छ?
केवल आफ्नो सबै 'पृष्ठ होइन' कम्पोनेन्टहरू छुट्टै फोल्डरमा भण्डार गर्नुहोस्। धेरै जसो Next.js परियोजनाहरूले मोनिकर 'कम्पोनेन्टहरू' प्रयोग गर्छन्, र यो फोल्डर तपाईंको परियोजनाको मूल फोल्डरमा उत्पन्न हुन्छ।
हेड कम्पोनेन्ट
प्रारम्भिक पृष्ठ लोड सर्भर-साइडमा Next.js द्वारा रेन्डर गरिएको छ। यसले तपाईंको पृष्ठको HTML परिमार्जन गरेर यो गर्छ। हेडर खण्ड समावेश छ।
Next.js हेड कम्पोनेन्ट शीर्षक र मेटा जस्ता हेडर सेक्सन ट्यागहरू दिन प्रयोग गरिन्छ। लेआउट कम्पोनेन्टको यस उदाहरणमा हेड कम्पोनेन्ट प्रयोग गरिएको छ।
404 पृष्ठ सिर्जना गर्नुहोस् फेला परेन
यो तपाईंको आफ्नै 404 त्रुटि पृष्ठ बनाउन सम्भव छ। तपाइँ सन्देशलाई अनुकूलन गर्न वा तपाइँको आफ्नै पृष्ठ डिजाइन थप्न चाहानुहुन्छ। पृष्ठहरू फोल्डरमा, 404.js फाइल सिर्जना गर्नुहोस्।
जब 404 त्रुटि हुन्छ, Next.js स्वचालित रूपमा यो पृष्ठमा रिडिरेक्ट हुनेछ। यहाँ एक व्यक्तिगत 404 पृष्ठ को एक उदाहरण छ:
सर्भर-साइडबाट डाटा ल्याउँदै
क्लाइन्ट-साइडमा डाटा डाउनलोड गर्नुको सट्टा, Next.js ले तपाईंलाई प्रारम्भिक डाटा जनसंख्या सञ्चालन गर्न अनुमति दिन्छ, जसले सर्भरबाट पहिले नै भरिएको डाटाको साथ पृष्ठ पठाउने संकेत गर्दछ।
तपाइँसँग सर्भर-साइड डेटा ल्याउने कार्यान्वयनको लागि दुई विकल्पहरू छन्:
- प्रत्येक अनुरोधमा डाटा ल्याउनु पर्छ।
- निर्माण प्रक्रिया भरि एक पटक मात्र डाटा प्राप्त गर्नुहोस् (स्थिर साइट)
प्रत्येक अनुरोधमा डाटा प्राप्त गर्नुहोस्
प्रत्येक अनुरोधलाई सर्भर-साइड रेन्डर गर्न getServerSideProps विधि प्रयोग गरिन्छ। यो प्रकार्य तपाईंको कम्पोनेन्ट फाइलको अन्त्यमा समावेश गर्न सकिन्छ। Next.js ले तपाईंको कम्पोनेन्ट प्रोपहरू getServerSideProps वस्तुसँग भर्नेछ यदि त्यो प्रकार्य तपाईंको कम्पोनेन्ट फाइलमा अवस्थित छ भने।
निर्माण समयमा डाटा प्राप्त गर्नुहोस्
getStaticProps विधि निर्माण समयमा सर्भर-साइड रेन्डर गर्न प्रयोग गरिन्छ। यो प्रकार्य तपाईंको कम्पोनेन्ट फाइलको अन्त्यमा समावेश गर्न सकिन्छ। यो विधिले सर्भर कोड चलाउँछ र सर्भरमा GET अनुरोध पठाउँछ, तर हाम्रो परियोजना समाप्त भएपछि मात्र एक पटक।
तपाईंले Next.js किन सिक्नुपर्छ?
यसको एउटा कारण यो हो कि Next.js प्रतिक्रियाको शीर्षमा बनाइएको छ, यसको लागि फ्रन्ट-एन्ड विकास टूलकिट प्रयोगकर्ता इन्टरफेसहरू सिर्जना गर्दै वेब एप डिजाइन गर्नका लागि त्यो मेरो मनपर्ने विकल्प हो।
तर यो पर्याप्त हुनेछैन यदि Next.js ले के गर्यो त्यसमा राम्रो थिएन... हैन?
त्यसोभए, यसले वास्तवमा के गर्छ?
यसलाई बुझ्नको लागि हामीले पहिले केही अवधारणाहरू परिभाषित गर्नुपर्छ। Next.js ले लोकप्रियता प्राप्त गर्यो किनभने यसले धेरै वेब विकासकर्ताहरूलाई क्लाइन्ट-साइड वेब एपहरू (ब्राउजरमा) भएको समस्या समाधान गर्यो। यी एकल-पृष्ठ अनुप्रयोगहरू (SPAs) सँग राम्रो अनुभव थियो किनभने तिनीहरूले प्रयोगकर्तालाई पृष्ठ पुन: लोड गर्न आवश्यक पर्दैन र थप अन्तरक्रियात्मकताको लागि अनुमति दिनुभयो।
यद्यपि, यस प्रकारको एपमा रहेको सामग्रीको ठूलो हिस्सा ब्राउजरमा प्रदर्शन गर्दा मात्र देखिने हुनाले, वेब क्रलरहरूलाई त्यस्तो एपको पाठ सामग्री बुझ्न गाह्रो हुन्छ।
नतिजाको रूपमा, तिनीहरूको लोकप्रियताको बावजुद, धेरै SPA हरू गुगल जस्ता ठूला खोज इन्जिनहरूमा धेरै हदसम्म अज्ञात रहे। Next.js ले अब प्रतिक्रिया कम्पोनेन्टहरूको सर्भर-साइड रेन्डरिङ (SSR) को लागि थप बलियो बिल्ट-इन संयन्त्र समावेश गर्दछ।
Next.js ले विकासकर्ताहरूलाई निर्माण प्रक्रियाको क्रममा सर्भरमा JavaScript कोड निर्माण गर्न र प्रयोगकर्तालाई आधारभूत, अनुक्रमणिका HTML प्रदान गर्न अनुमति दिन्छ।
विशेषज्ञहरूले
- प्रयोगकर्ता अनुभव को लागी महान
- SEO को लागी महान
- एक सुपर-फास्ट स्थिर वेबसाइट बनाउनुहोस् जुन गतिशील जस्तै व्यवहार गर्दछ
- UI र UX निर्माणमा लचिलोपन।
- धेरै विकास लाभहरू
- महान समुदाय समर्थन
विपक्ष
- वेबसाइटहरू वा एप्लिकेसनहरूसँग निर्माण वा विकास गर्न निश्चित समय हुन्छ।
- निश्चित कार्यहरूको लागि, Next.js अपर्याप्त छ। विकासकर्ताहरूले Node.js उपकरणहरू प्रयोग गरेर गतिशील मार्गहरू निर्माण गर्न सक्षम हुनुपर्दछ।
निष्कर्ष
तपाईंले देख्न सक्नुहुने रूपमा, Next.js ले प्रतिक्रिया एप विकासलाई सरल बनाउँछ र तपाईंलाई सबैभन्दा महत्त्वपूर्ण कुराहरूमा फोकस गर्न अनुमति दिन्छ - तपाईंको एप तर्क र UI। यसले समकालीन, फ्रन्टएन्ड-रिच र एपीआई-संचालित अनुप्रयोगहरू सिर्जना गर्न आवश्यक सबै समावेश गर्दछ।
यो स्थिर HTML पृष्ठहरू निर्माण गर्ने क्षमताको कारणले गर्दा, ब्लगहरू र व्यापारिक वेबसाइटहरू जस्ता सामग्री-मात्र परियोजनाहरूका लागि पनि उपयुक्त छ।
हालको संस्करणहरूसँग, Next.js ले विकासकर्ता अनुभवको उच्च स्तर मात्र कायम राख्दैन तर यस फ्रेमवर्कको लागि उज्ज्वल भविष्य सुनिश्चित गर्दै दृश्य प्रदर्शन र प्रयोगकर्ता अनुभव बढाउनका लागि उपकरणहरू पनि दिन्छ।
जवाफ छाड्नुस्