अनुक्रमणिका[लपवा][दाखवा]
सॉफ्टवेअर लायब्ररी किंवा फ्रेमवर्क निवडताना, विकासकाचा अनुभव सहसा विचारात घेतला जातो.
जेव्हा मी "डेव्हलपर अनुभव" चा उल्लेख करतो, तेव्हा मी विकासक प्रत्यक्षात काम कसे करतात याचा संदर्भ देत असतो. विकसक लायब्ररी किंवा फ्रेमवर्क निवडतात जे वापरण्यास आनंददायक असतात.
आमच्याकडे आता सर्वात लोकप्रिय लायब्ररी आणि फ्रेमवर्क असण्याचे हे एक प्राथमिक कारण आहे. विकासक म्हणून, आम्हाला आमच्या कार्यांमध्ये मदत करण्यासाठी अस्तित्वात असलेली साधने तयार केली जातात तेव्हा आम्हाला सुरवातीपासून सुरुवात करण्याची गरज नाही.
फ्रेमवर्क हे सॉफ्टवेअरचे तुकडे आहेत जे विकसकांद्वारे अॅप्लिकेशन तयार करण्यासाठी तयार केले जातात आणि वापरले जातात आणि नेक्स्टजेएस त्यापैकी एक आहे.
या पोस्टमध्ये, आम्ही नेक्स्टजेस, त्याची मुख्य वैशिष्ट्ये आणि अनुप्रयोग तयार करण्यासाठी आम्ही त्याचा कसा वापर करू शकतो याबद्दल पाहू. चला आत उडी मारू.
Next.js म्हणजे काय?
पुढील.जे.एस स्थिर वेबपृष्ठे आणि प्रतिक्रिया-आधारित ऑनलाइन अनुप्रयोग जलद आणि सहजपणे तयार करण्यासाठी JavaScript फ्रेमवर्क आहे. हे तुम्हाला Windows, Linux आणि Mac सह विविध प्लॅटफॉर्मसाठी उत्तम वेब अॅप्स डिझाइन करण्याची अनुमती देते.
तुम्हाला रिअॅक्टशी कमीत कमी माहिती असल्यास आणि रिएक्ट इकोसिस्टमबद्दल अधिक जाणून घ्यायचे असेल तर तुम्ही Next.js फ्रेमवर्कशी परिचित असले पाहिजे.
जरी नेक्स्ट.जेएस तुम्हाला प्रारंभ करण्यासाठी आवश्यक असलेल्या सर्व गोष्टींसह येत असले तरी, तुम्ही NPM आणि यार्न, JavaScript आणि TypeScript, CSS आणि SCSS, स्थिर निर्यात आणि सर्व्हरलेस उपयोजन यापैकी निवडू शकता.
वैशिष्ट्ये
- राउटिंग स्वयंचलितपणे केले जाते - तुम्हाला काहीही कॉन्फिगर करण्याची आवश्यकता नाही कारण कोणतीही URL फाइल सिस्टममध्ये, पेज फोल्डरमधील फाइल्सवर मॅप केली जाते (अर्थात तुमच्याकडे सानुकूल पर्याय आहेत).
- सिंगल फाईलचे घटक - स्टाइल-जेएसएक्स वापरून घटकामध्ये स्कोप केलेल्या शैली जोडणे सोपे आहे, जे पूर्णपणे समाकलित केले जाते आणि त्याच टीमद्वारे तयार केले जाते.
- हॉट कोड रीलोड करणे - जेव्हा Next.js डिस्कवर जतन केलेला बदल शोधतो, तेव्हा ते पृष्ठ रीलोड करते.
- डायनॅमिक घटक - तुम्ही जावास्क्रिप्ट मॉड्यूल आणि प्रतिक्रिया घटक डायनॅमिकपणे लोड करू शकता.
- स्टॅटिक एक्सपोर्ट्स - Next.js तुम्हाला पुढील एक्सपोर्ट कमांडसह तुमच्या अॅपवरून पूर्णपणे स्टॅटिक साइट एक्सपोर्ट करू देते.
- पर्यावरणाशी सुसंगतता - Next.js जावास्क्रिप्ट, नोड आणि रिअॅक्ट इकोसिस्टमसह अखंडपणे समाकलित होते.
- स्प्लिटिंग कोड आपोआप – केवळ लायब्ररी आणि JavaScript यांचा वापर पृष्ठे रेंडर करण्यासाठी केला जातो. अॅपचे सर्व कोड असलेली एकच JavaScript फाइल तयार करण्याऐवजी, Next.js बुद्धिमानपणे अॅपला अनेक संसाधनांमध्ये विभाजित करते.
Next.js ऍप्लिकेशन कसे तयार करावे?
स्थापना
तुम्ही नेक्स्ट.जेएस प्रोजेक्ट स्थापित आणि तयार करण्यासाठी नोड npx कमांड वापरू शकता.
हे एक फोल्डर आणि Next.js प्रोजेक्ट चालवण्यासाठी आवश्यक असलेल्या सर्व फाइल्स, कॉन्फिगरेशन आणि इतर आयटम तयार करेल.
एकदा ते व्युत्पन्न झाल्यानंतर तुम्ही अॅप लाँच करू शकता.
पृष्ठे आणि राउटिंग
Next.js सह मार्ग हाताळण्यासाठी, आम्हाला राउटिंग फ्रेमवर्क वापरण्याची आवश्यकता नाही. Next.js सह राउटिंग सेट करण्यासाठी एक ब्रीझ आहे. जेव्हा तुम्ही नवीन Next.js अॅप तयार करण्यासाठी create-next-app कमांड वापरता, तेव्हा अॅप डीफॉल्टनुसार 'पेजेस' नावाचे फोल्डर तयार करतो.
हे 'पेजेस' फोल्डर आहे जिथे तुम्ही तुमचे मार्ग राखता. परिणामी, उपडिरेक्टरीमधील प्रत्येक प्रतिक्रिया घटक फाइल स्वतंत्र मार्ग म्हणून हाताळली जाईल.
उदाहरणार्थ, फोल्डरमध्ये त्या फायली असल्यास:
- index.js
- बद्दल.js
- aricles.js
ही फाइल तीन प्रकारे आपोआप रूपांतरित होईल:
- अनुक्रमणिका पृष्ठ लोकलहोस्ट/इंडेक्स
- बद्दल पृष्ठ लोकलहोस्ट/बद्दल
- ब्लॉग पेज लोकलहोस्ट/लेख
about.js पृष्ठाचे उदाहरण खाली दर्शविले आहे. पृष्ठाबद्दल काहीही दिलेले नाही, जसे आपण पाहू शकता. हे फक्त एक मानक प्रतिक्रिया कार्यात्मक घटक आहे.
मार्ग
नेस्टेड मार्ग बनवण्यासाठी, तुम्ही प्रथम सबफोल्डर स्थापित करणे आवश्यक आहे. उदाहरणार्थ: पृष्ठे/लेख. त्या फोल्डरमध्ये तुमचा 'contact.js' प्रतिक्रिया घटक तयार करा, आणि ते लोकलहोस्ट/लेख/संपर्क पृष्ठ व्युत्पन्न करेल.
जर तुम्ही एक फाईल pages/articles.js मध्ये टाकली आणि दुसरी pages/articles/index.js मध्ये. दोन्ही समान मार्ग लोकलहोस्ट/ब्लॉग प्रतिबिंबित करतात. या परिस्थितीत, Next.js फक्त article.js फाइल रेंडर करेल. डायनॅमिक मार्गांबद्दल काय, ज्यामध्ये प्रत्येक ब्लॉग पोस्टचा स्वतःचा मार्ग आहे:
- लोकलहोस्ट/ब्लॉग/प्रथम-लेख
- लोकलहोस्ट/ब्लॉग/-दुसरा-लेख
ब्रॅकेट नोटेशन वापरून, तुम्ही Next.js मध्ये डायनॅमिक मार्ग परिभाषित करू शकता. उदाहरणार्थ: pages/article/[slug].js
लिंक मार्ग
तुम्ही आता तुमचा पहिला मार्ग पूर्ण केला आहे. माझा अंदाज आहे की तुम्ही त्या मार्गांना पृष्ठे कशी जोडायची हे विचारत आहात. असे करण्यासाठी तुम्हाला 'पुढील/लिंक' ची आवश्यकता असेल.
येथे मुख्यपृष्ठाचे एक उदाहरण आहे ज्यात बद्दल पृष्ठाची लिंक समाविष्ट आहे:
तुम्हाला लिंक स्टाईल करायची असल्यास, खालील वाक्यरचना वापरा:
मार्ग पुनर्निर्देशित करा
तुम्हाला एखाद्या विशिष्ट पृष्ठावर पुनर्निर्देशित करण्याची सक्ती करायची असल्यास काय? उदाहरणार्थ, बटण दाबल्यावर? तुम्ही 'router.push' वापरून हे पूर्ण करू शकता:
एसइओ
वेब ऍप्लिकेशन्समधील पृष्ठांना HTML मुख्य भागामध्ये डेटा व्यतिरिक्त मेटा (हेड) घटकांची आवश्यकता असते. यासाठी रिअॅक्ट अॅप्लिकेशनमध्ये रिअॅक्ट हेल्मेट नावाची अतिरिक्त आवश्यकता बसवणे आवश्यक आहे.
शोध परिणामांमध्ये आणि एम्बेड्समध्ये प्रदर्शित होणार्या आमच्या वेबपेजेसवर मेटाडेटा सहज जोडण्यासाठी आम्ही नेक्स्ट/हेड मधील नेक्स्ट मधील हेड घटक वापरू शकतो:
घटक
तुम्हाला वारंवार घटक किंवा लेआउट फाइल विकसित करण्याची आवश्यकता असेल. उदाहरणार्थ, नॅव्हबार रेंडर करणारा घटक. आम्ही आत्तापर्यंत पेजेस फोल्डर वापरले आहे. जर तुमचा घटक रूट पृष्ठ नसला तर?
वापरकर्त्याने लोकलहोस्ट/नॅव्हबार सारख्या पृष्ठावर नेव्हिगेट करावे असे तुम्हाला वाटत नाही. तुम्ही पेज फोल्डरमध्ये Navbar.js घटक ठेवल्यास, तेच होईल. आपण परिस्थितीत काय करावे?
फक्त तुमचे सर्व 'पृष्ठ नाही' घटक वेगळ्या फोल्डरमध्ये संग्रहित करा. बहुतेक Next.js प्रोजेक्ट्स moniker 'components' वापरतात आणि हे फोल्डर तुमच्या प्रोजेक्टच्या रूट फोल्डरमध्ये तयार केले जाते.
प्रमुख घटक
प्रारंभिक पृष्ठ लोड सर्व्हर-साइडवर Next.js द्वारे प्रस्तुत केले जाते. हे तुमच्या पृष्ठाच्या HTML मध्ये बदल करून हे करते. शीर्षलेख विभाग समाविष्ट आहे.
नेक्स्ट.जेएस हेड घटक हेडर सेक्शन टॅग जसे की शीर्षक आणि मेटा देण्यासाठी वापरला जातो. लेआउट घटकाच्या या उदाहरणात हेड घटक वापरला आहे.
404 पृष्ठ तयार करा आढळले नाही
तुमचे स्वतःचे 404 त्रुटी पृष्ठ बनवणे व्यवहार्य आहे. तुम्ही संदेश सानुकूलित करू इच्छित असाल किंवा तुमचे स्वतःचे पृष्ठ डिझाइन जोडू शकता. पृष्ठे फोल्डरमध्ये, 404.js फाइल तयार करा.
404 एरर आल्यावर, Next.js आपोआप या पृष्ठावर पुनर्निर्देशित करेल. येथे वैयक्तिकृत 404 पृष्ठाचे उदाहरण आहे:
सर्व्हर-साइड वरून डेटा आणत आहे
क्लायंट-साइडवर डेटा डाउनलोड करण्याऐवजी, Next.js तुम्हाला प्रारंभिक डेटा लोकसंख्या आयोजित करण्यास अनुमती देते, ज्याचा अर्थ सर्व्हरवरून आधीच भरलेल्या डेटासह पृष्ठ पाठवणे सूचित होते.
सर्व्हर-साइड डेटा आणण्यासाठी तुमच्याकडे दोन पर्याय आहेत:
- प्रत्येक विनंतीवर डेटा आणला जावा.
- संपूर्ण बांधकाम प्रक्रियेदरम्यान फक्त एकदाच डेटा मिळवा (स्थिर साइट)
प्रत्येक विनंतीवर डेटा मिळवा
getServerSideProps पद्धत प्रत्येक विनंतीला सर्व्हर-साइड रेंडर करण्यासाठी वापरली जाते. हे कार्य तुमच्या घटक फाइलच्या शेवटी समाविष्ट केले जाऊ शकते. नेक्स्ट.जेएस हे फंक्शन तुमच्या घटक फाइलमध्ये असल्यास getServerSideProps ऑब्जेक्टसह तुमचे घटक प्रॉप्स आपोआप पॉप्युलेट करेल.
बिल्ड वेळेवर डेटा मिळवा
getStaticProps पद्धत बिल्ड टाइमवर सर्व्हर-साइड रेंडर करण्यासाठी वापरली जाते. हे कार्य तुमच्या घटक फाइलच्या शेवटी समाविष्ट केले जाऊ शकते. ही पद्धत सर्व्हर कोड चालवते आणि सर्व्हरला GET विनंती पाठवते, परंतु आमचा प्रकल्प पूर्ण झाल्यावरच.
तुम्ही Next.js का शिकले पाहिजे?
याचे एक कारण हे आहे की नेक्स्ट.जेएस रिअॅक्टच्या वर तयार केले आहे, यासाठी फ्रंट-एंड डेव्हलपमेंट टूलकिट वापरकर्ता इंटरफेस तयार करणे वेब अॅप्स डिझाइन करण्यासाठी माझी आवडती निवड आहे.
पण नेक्स्ट.जेएसने जे केले ते चांगले नसेल तर ते पुरेसे होणार नाही… बरोबर?
मग, ते नक्की काय करते?
ते समजून घेण्यासाठी आपण प्रथम काही संकल्पना परिभाषित केल्या पाहिजेत. Next.js ने लोकप्रियता मिळवली कारण अनेक वेब डेव्हलपर्सना क्लायंट-साइड वेब अॅप्स (ब्राउझरमध्ये) असलेल्या समस्येचे निराकरण केले. या सिंगल-पेज अॅप्लिकेशन्स (एसपीए) चा अनुभव चांगला होता कारण त्यांना वापरकर्त्याला पेज रीलोड करण्याची आवश्यकता नव्हती आणि अधिक परस्परसंवादासाठी परवानगी दिली.
तथापि, यासारख्या अॅपमधील मोठ्या प्रमाणात सामग्री ब्राउझरमध्ये कार्यान्वित केल्यावरच दृश्यमान होत असल्याने, वेब क्रॉलर्सना अशा अॅपमधील मजकूर सामग्री समजून घेण्यात अडचणी येतात.
परिणामी, त्यांची लोकप्रियता असूनही, अनेक SPAs Google सारख्या मोठ्या शोध इंजिनांना मोठ्या प्रमाणात अनामिक राहिले. Next.js मध्ये आता React घटकांच्या सर्व्हर-साइड रेंडरिंग (SSR) साठी अधिक मजबूत अंगभूत यंत्रणा समाविष्ट आहे.
Next.js विकासकांना बिल्ड प्रक्रियेदरम्यान सर्व्हरवर JavaScript कोड तयार करण्यास आणि वापरकर्त्याला मूलभूत, अनुक्रमित HTML प्रदान करण्यास अनुमती देते.
साधक
- वापरकर्ता-अनुभवासाठी उत्तम
- SEO साठी उत्तम
- डायनॅमिकप्रमाणे वागणारी सुपर-फास्ट स्टॅटिक वेबसाइट तयार करा
- UI आणि UX तयार करण्यात लवचिकता.
- अनेक विकास फायदे
- महान समुदाय समर्थन
बाधक
- वेबसाइट्स किंवा अॅप्लिकेशन्सना तयार करण्यासाठी किंवा विकसित करण्यासाठी विशिष्ट कालावधी असतो.
- ठराविक कार्यांसाठी, Next.js अपुरे आहे. डेव्हलपर Node.js टूल्स वापरून डायनॅमिक मार्ग तयार करण्यास सक्षम असावेत.
निष्कर्ष
तुम्ही बघू शकता, Next.js React अॅप डेव्हलपमेंट सुलभ करते आणि तुम्हाला सर्वात महत्त्वाच्या गोष्टींवर लक्ष केंद्रित करण्यास अनुमती देते - तुमचे अॅप लॉजिक आणि UI. यात समकालीन, फ्रंटएंड-रिच आणि API-सक्षम अॅप्स तयार करण्यासाठी आवश्यक असलेल्या प्रत्येक गोष्टीचा समावेश आहे.
स्थिर HTML पृष्ठे तयार करण्याच्या क्षमतेमुळे हे ब्लॉग आणि व्यवसाय वेबसाइट्स सारख्या केवळ सामग्री प्रकल्पांसाठी देखील योग्य आहे.
सध्याच्या आवृत्त्यांसह, Next.js केवळ उच्च पातळीचा विकासक अनुभवच राखत नाही तर या फ्रेमवर्कसाठी उज्ज्वल भविष्य सुनिश्चित करून व्हिज्युअल कार्यप्रदर्शन आणि वापरकर्ता अनुभव वाढवण्यासाठी साधने देखील देते.
प्रत्युत्तर द्या