جڏهن سافٽ ويئر لائبريري يا فريم ورڪ چونڊيو، ڊولپر تجربو عام طور تي حساب ۾ ورتو ويندو آهي.
جڏهن مان ذڪر ڪريان ٿو ”ڊولپر تجربو“، مان حوالو ڏيان ٿو ته ڊولپر اصل ۾ ڪم ڪيئن ڪندا آهن. ڊولپرز لئبرريون يا فريم ورڪ چونڊيندا آھن جيڪي استعمال ڪرڻ ۾ مزيدار آھن.
اهو هڪ بنيادي سبب آهي ڇو ته اسان وٽ هاڻي تمام مشهور لائبريريون ۽ فريم ورڪ آهن. ڊولپرز جي طور تي، اسان کي شروع کان شروع ڪرڻ جي ضرورت ناهي جڏهن موجود اوزار موجود آهن اسان جي ڪمن ۾ اسان جي مدد ڪرڻ لاءِ.
فريم ورڪ سافٽ ويئر جا ٽڪرا آهن جيڪي ٺاهيا ويا آهن ۽ ڊولپرز پاران ايپليڪيشن ٺاهڻ لاءِ استعمال ڪيا ويا آهن، ۽ NextJS انهن مان هڪ آهي.
هن پوسٽ ۾، اسان اڳتي وڌنداسين Nextjs، ان جي اهم خاصيتون، ۽ اسان ان کي ڪيئن استعمال ڪري سگهون ٿا ايپليڪيشن ٺاهڻ لاءِ. اچو ته سڌو اندر وڃو.
Next.js ڇا آهي؟
اڳيون هڪ جاوا اسڪرپٽ فريم ورڪ آهي تيزيءَ سان ۽ آسانيءَ سان جامد ويب پيجز ٺاهڻ ۽ رد عمل تي ٻڌل آن لائن ايپليڪيشنون. اهو توهان کي مختلف پليٽ فارمن لاءِ بهترين ويب ايپس ڊزائين ڪرڻ جي اجازت ڏئي ٿو، بشمول ونڊوز، لينڪس، ۽ ميڪ.
توھان کي واقف ٿيڻ گھرجي Next.js فريم ورڪ جيڪڏھن توھان وٽ گھٽ ۾ گھٽ واقفيت آھي react سان ۽ توھان چاھيو ٿا وڌيڪ ڄاڻڻ چاھيو React ecosystem بابت.
جيتوڻيڪ Next.js هر شي سان گڏ اچي ٿو جيڪو توهان کي شروع ڪرڻ جي ضرورت آهي، توهان NPM ۽ يارن، جاوا اسڪرپٽ ۽ ٽائپ اسڪرپٽ، CSS ۽ SCSS، جامد برآمد، ۽ سرور بي ترتيب جي وچ ۾ چونڊ ڪري سگهو ٿا.
مضمونن جي
- روٽنگ خود بخود ٿي ويندي آهي - توهان کي ڪنهن به شيءِ کي ترتيب ڏيڻ جي ضرورت ناهي ڇو ته ڪنهن به URL کي فائيل سسٽم سان ميپ ڪيو ويو آهي، صفحن جي فولڊر ۾ فائلن ڏانهن (يقيناً توهان وٽ ڪسٽمائيزيشن جا اختيار آهن).
- هڪ واحد فائل جا اجزاء - اسٽائلڊ-jsx استعمال ڪندي جزو ۾ اسڪوپ ٿيل اندازن کي شامل ڪرڻ آسان آهي، جيڪو مڪمل طور تي ضم ٿيل آهي ۽ ساڳئي ٽيم پاران پيدا ڪيل آهي.
- هڪ گرم ڪوڊ ٻيهر لوڊ ڪرڻ - جڏهن Next.js ڊسڪ ۾ محفوظ ڪيل ترميم کي ڳولي ٿو، اهو صفحي کي ٻيهر لوڊ ڪري ٿو.
- متحرڪ اجزاء - توھان متحرڪ طور تي لوڊ ڪري سگھوٿا جاوا اسڪرپٽ ماڊلز ۽ رد عمل اجزاء.
- جامد برآمدات - Next.js توهان کي توهان جي ايپ مان مڪمل طور تي جامد سائيٽ برآمد ڪرڻ جي اجازت ڏئي ٿي ايندڙ ايڪسپورٽ ڪمانڊ سان.
- ماحول سان مطابقت - Next.js جاوا اسڪرپٽ، نوڊ، ۽ ريڪٽ ايڪو سسٽم سان بيحد ضم ٿي.
- ورهائڻ وارا ڪوڊ خودڪار طور تي - صرف لائبريريون ۽ جاوا اسڪرپٽ جيڪي گهربل آهن صفحا رينجر ڪرڻ لاءِ استعمال ڪيا ويندا آهن. هڪ واحد JavaScript فائل ٺاهڻ جي بدران جنهن ۾ ايپ جي سڀني ڪوڊ شامل آهن، Next.js ذهانت سان ايپ کي ڪيترن ئي وسيلن ۾ ورهائي ٿو.
هڪ Next.js ايپليڪيشن ڪيئن ٺاهي؟
لڳائڻ
توھان استعمال ڪري سگھو ٿا نوڊ npx ڪمانڊ انسٽال ڪرڻ ۽ ٺاھڻ لاءِ Next.js پروجيڪٽ.
هي هڪ فولڊر ٺاهيندو ۽ سڀني فائلن، ترتيبن، ۽ ٻيون شيون جيڪي هڪ Next.js پروجيڪٽ کي هلائڻ لاء گهربل آهن.
توهان ائپ لانچ ڪري سگهو ٿا هڪ ڀيرو ان کي پيدا ڪيو ويو آهي.
صفحا ۽ رستو
Next.js سان رستن کي سنڀالڻ لاءِ، اسان کي روٽنگ فريم ورڪ استعمال ڪرڻ جي ضرورت ناهي. Next.js سان روٽنگ قائم ڪرڻ لاءِ هڪ هوا آهي. جڏهن توهان نئين Next.js ايپ ٺاهڻ لاءِ create-next-app ڪمانڊ استعمال ڪندا آهيو، ته ايپ ڊفالٽ طور 'صفحا' نالي هڪ فولڊر ٺاهي ٿي.
هي 'صفحا' فولڊر اهو آهي جتي توهان پنهنجي رستن کي برقرار رکون ٿا. نتيجي طور، ذيلي ڊاريڪٽري ۾ هر ردعمل اجزاء فائل کي الڳ رستو طور سنڀاليو ويندو.
مثال طور، جيڪڏهن فولڊر انهن فائلن تي مشتمل آهي:
- index.js
- جي باري ۾
- aricles.js
هي فائل ٽن طريقن سان خودڪار طريقي سان تبديل ٿي ويندي:
- انڊيڪس صفحو localhost/index
- اٽڪل پيج localhost/about
- بلاگ جو صفحو localhost/مضمون
اٽڪل.js صفحي جو ھڪڙو مثال ھيٺ ڏيکاريل آھي. صفحي بابت ڪجھ به نه ڏنو ويو آھي، جيئن توھان ڏسي سگھو ٿا. اهو صرف هڪ معياري رد عمل فنڪشنل جزو آهي.
رستا
nested رستا ٺاهڻ لاء، توهان کي پهريان هڪ ذيلي فولڊر قائم ڪرڻ گهرجي. مثال طور: صفحا/مضمون. ان فولڊر ۾ پنهنجو 'contact.js' react جزو ٺاهيو، ۽ اهو پيج ٺاهيندو localhost/articles/contact.
جيڪڏھن توھان ھڪڙي فائل کي pages/articles.js ۾ ۽ ٻي کي pages/articles/index.js ۾ رکون ٿا. ٻئي ساڳئي رستي کي ظاهر ڪن ٿا localhost/blog. هن صورتحال ۾، Next.js صرف آرٽيڪل.js فائل کي رينڈر ڪندو. متحرڪ رستن بابت ڇا، جنهن ۾ هر بلاگ پوسٽ جو پنهنجو رستو آهي:
- localhost/blog/first-artical
- localhost/blog/-سيڪنڊ-آرٽيڪل
بریکٹ نوٽشن استعمال ڪندي، توهان Next.js ۾ هڪ متحرڪ رستو بيان ڪري سگهو ٿا. مثال طور: pages/article/[slug].js
لنڪ رستا
توھان ھاڻي پنھنجو پھريون رستو مڪمل ڪيو آھي. مان اندازو لڳائي رهيو آهيان ته توهان پڇي رهيا آهيو ته صفحن کي انهن رستن سان ڪيئن ڳنڍجي. ائين ڪرڻ لاءِ توھان کي 'اڳيون/لنڪ' جي ضرورت پوندي.
ھتي ھڪڙو مثال آھي گھر واري صفحي جو جنھن ۾ ھڪڙي لنڪ شامل آھي بابت صفحي جي:
جيڪڏهن توهان لنڪ کي انداز ڪرڻ چاهيو ٿا، هيٺ ڏنل نحو استعمال ڪريو:
ريڊائريڪٽ رستا
ڇا جيڪڏهن توهان کي ڪنهن خاص صفحي ڏانهن ريڊائريڪٽ ڪرڻ جي ضرورت آهي؟ مثال طور، جڏهن هڪ بٽڻ دٻايو ويندو آهي؟ توهان هن کي 'router.push' استعمال ڪندي حاصل ڪري سگهو ٿا:
SEO
ويب ايپليڪيشنن ۾ صفحن کي HTML جسم ۾ ڊيٽا کان علاوه ميٽا (سر) عناصر جي ضرورت هوندي آهي. هي ري ايڪٽ ايپليڪيشن ۾ ري ايڪٽ هيلمٽ نالي هڪ اضافي گهرج جي انسٽاليشن جي ضرورت پوندي.
اسان استعمال ڪري سگھون ٿا Head component from next/head in Next ۾ آساني سان ميٽا ڊيٽا شامل ڪرڻ لاءِ اسان جي ويب پيجز ۾ ڏيکاريا ويندا جيڪي ڳولا جي نتيجن ۽ ايمبيڊس ۾ ڏيکاريا ويندا:
جزا
توھان کي اڪثر ڪري اجزاء يا ھڪڙي ترتيب واري فائل کي ترقي ڪرڻ جي ضرورت پوندي. مثال طور، ھڪڙو حصو جيڪو نيوبار کي پيش ڪري ٿو. اسان هينئر تائين صرف صفحن جو فولڊر استعمال ڪيو آهي. ڇا جيڪڏھن توھان جو حصو ھڪڙي رستي واري صفحي جو مطلب نه آھي؟
توھان نٿا چاھيو ته صارف ھڪڙي صفحي ڏانھن وڃو جيئن مقامي ھوسٽ / نيوبار. جيڪڏھن توھان رکو ٿا 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 React جي چوٽي تي ٺهيل آهي، هڪ فرنٽ اينڊ ڊولپمينٽ ٽول ڪٽ لاءِ يوزر انٽرفيس ٺاهڻ اهي ويب ايپس ڊزائين ڪرڻ لاءِ منهنجي پسنديده پسند آهن.
پر اهو ڪافي نه هوندو جيڪڏهن Next.js سٺو نه هو ته اهو ڇا ڪيو... صحيح؟
تنهن ڪري، اهو ڇا ڪري ٿو؟
ان کي سمجھڻ لاءِ اسان کي پھريون ڪجھ تصورن جي وضاحت ڪرڻ گھرجي. Next.js مقبوليت حاصل ڪئي ڇاڪاڻ ته اهو هڪ مسئلو حل ڪيو ته ڪيترن ئي ويب ڊولپرز کي ڪلائنٽ سائڊ ويب ايپس (براؤزر ۾) سان گڏ هئا. هنن سنگل پيج ايپليڪيشنن (SPAs) کي هڪ بهتر تجربو هو، ڇاڪاڻ ته انهن کي ضرورت نه هئي صارف کي صفحي کي ٻيهر لوڊ ڪرڻ ۽ وڌيڪ رابطي جي اجازت ڏني وئي.
تنهن هوندي، ڇاڪاڻ ته اهڙي ايپ ۾ مواد جو وڏو حصو صرف ظاهر ٿيندو آهي جڏهن اهو برائوزر ۾ ڪيو ويندو آهي، ويب ڪريلرز کي اهڙي ايپ جي متن جي مواد کي سمجهڻ ۾ مشڪل وقت آهي.
نتيجي طور، انھن جي مقبوليت جي باوجود، ڪيترائي SPAs وڏين سرچ انجڻن جھڙوڪ گوگل لاءِ گمنام رھيا. Next.js هاڻي شامل آهي هڪ وڌيڪ مضبوط بلٽ ان ميڪانيزم لاءِ سرور-سائڊ رينڊرنگ (SSR) React اجزاء جي.
Next.js ڊولپرز کي اجازت ڏئي ٿو ته جاوا اسڪرپٽ ڪوڊ تعمير ڪرڻ جي دوران سرور تي ۽ صارف کي بنيادي، انڊيڪس قابل HTML مهيا ڪن.
گڻ
- استعمال ڪندڙ-تجربو لاء وڏو
- ايس اي او لاء وڏو
- ھڪڙي تيز تيز جامد ويب سائيٽ ٺاھيو جيڪا ھڪڙي متحرڪ وانگر عمل ڪري
- UI ۽ UX جي تعمير ۾ لچڪدار.
- ترقي جا ڪيترائي فائدا
- عظيم ڪميونٽي سپورٽ
اوگڻ
- ويب سائيٽن يا ايپليڪيشنن کي ٺهڻ يا ترقي ڪرڻ لاءِ هڪ خاص وقت هوندو آهي.
- ڪجهه ڪمن لاءِ، Next.js ڪافي نه آهي. ڊولپرز کي Node.js اوزار استعمال ڪندي متحرڪ رستن کي تعمير ڪرڻ جي قابل هوندو.
ٿڪل
جئين توهان ڏسي سگهو ٿا، Next.js React ايپ ڊولپمينٽ کي آسان بڻائي ٿو ۽ توهان کي ان ڳالهه تي ڌيان ڏيڻ جي اجازت ڏئي ٿو ته سڀ کان وڌيڪ اهم - توهان جي ايپ منطق ۽ UI. اهو سڀ ڪجهه شامل ڪري ٿو جيڪو همعصر، فرنٽ اينڊ امير ۽ API سان هلندڙ ايپس ٺاهڻ لاءِ گهربل آهي.
اهو صرف مواد جي منصوبن لاءِ پڻ مناسب آهي، جهڙوڪ بلاگ ۽ ڪاروباري ويب سائيٽون، ان جي قابليت جي ڪري جامد HTML صفحا ٺاهڻ جي صلاحيت.
موجوده ايڊيشن سان، Next.js نه رڳو ڊولپر جي تجربي جي اعليٰ سطح کي برقرار رکي ٿو پر ان سان گڏ بصري ڪارڪردگي ۽ صارف جي تجربي کي وڌائڻ لاءِ اوزار پڻ ڏئي ٿو، انهي فريم ورڪ لاءِ روشن مستقبل کي يقيني بڻائي.
جواب ڇڏي وڃو