کی میز کے مندرجات[چھپائیں][دکھائیں]
سافٹ ویئر لائبریری یا فریم ورک چنتے وقت، ڈویلپر کے تجربے کو عام طور پر مدنظر رکھا جاتا ہے۔
جب میں "ڈویلپر کے تجربے" کا ذکر کرتا ہوں، تو میں اس بات کا ذکر کر رہا ہوں کہ ڈویلپر دراصل کام کیسے کرتے ہیں۔ ڈویلپرز ایسی لائبریریوں یا فریم ورک کا انتخاب کرتے ہیں جو استعمال کرنے میں لطف اندوز ہوں۔
یہ ایک بنیادی وجہ ہے کہ ہمارے پاس اب سب سے زیادہ مقبول لائبریریاں اور فریم ورک کیوں ہیں۔ بطور ڈیولپر، جب ہمارے کاموں میں ہماری مدد کرنے کے لیے موجودہ ٹولز بنائے گئے ہوں تو ہمیں شروع سے شروع کرنے کی ضرورت نہیں ہے۔
فریم ورک سافٹ ویئر کے ٹکڑے ہیں جو ڈویلپرز کے ذریعے ایپلی کیشنز کی تعمیر کے لیے بنائے اور استعمال کیے جاتے ہیں، اور نیکسٹ جے ایس ان میں سے ایک ہے۔
اس پوسٹ میں، ہم Nextjs، اس کی کلیدی خصوصیات، اور ہم اسے ایپلی کیشن بنانے کے لیے کیسے استعمال کر سکتے ہیں، پر جائیں گے۔ آئیے سیدھے اندر کودیں۔
Next.js کیا ہے؟
Next.js جامد ویب صفحات اور رد عمل پر مبنی آن لائن ایپلی کیشنز کو تیزی سے اور آسانی سے بنانے کے لیے جاوا اسکرپٹ کا فریم ورک ہے۔ یہ آپ کو ونڈوز، لینکس اور میک سمیت متعدد پلیٹ فارمز کے لیے بہترین ویب ایپس ڈیزائن کرنے کی اجازت دیتا ہے۔
اگر آپ کو ری ایکٹ سے کم سے کم واقفیت ہے اور آپ ری ایکٹ ایکو سسٹم کے بارے میں مزید جاننا چاہتے ہیں تو آپ کو Next.js فریم ورک سے واقف ہونا چاہیے۔
اگرچہ Next.js آپ کو شروع کرنے کے لیے درکار ہر چیز کے ساتھ آتا ہے، آپ NPM اور Yarn، 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
- about.js
- aricles.js
یہ فائل خود بخود تین طریقوں سے تبدیل ہو جائے گی۔
- انڈیکس پیج لوکل ہوسٹ/انڈیکس
- کے بارے میں صفحہ لوکل ہوسٹ/کے بارے میں
- بلاگ کا صفحہ لوکل ہوسٹ/مضامین
about.js صفحہ کی ایک مثال ذیل میں دکھائی گئی ہے۔ جیسا کہ آپ دیکھ سکتے ہیں صفحہ کے بارے میں کچھ بھی فراہم نہیں کیا گیا ہے۔ یہ صرف ایک معیاری رد عمل کا فنکشنل جزو ہے۔
روٹس
گھریلو راستے بنانے کے لیے، آپ کو سب سے پہلے ایک ذیلی فولڈر قائم کرنا ہوگا۔ مثال کے طور پر: صفحات/مضامین۔ اس فولڈر میں اپنا 'contact.js' ری ایکٹ جزو بنائیں، اور یہ صفحہ لوکل ہوسٹ/مضمون/رابطہ تیار کرے گا۔
اگر آپ ایک فائل کو pages/articles.js میں اور دوسری فائل کو pages/articles/index.js میں ڈالتے ہیں۔ دونوں ایک ہی راستے کی عکاسی کرتے ہیں لوکل ہوسٹ/بلاگ۔ اس صورت حال میں، Next.js صرف article.js فائل کو رینڈر کرے گا۔ متحرک راستوں کا کیا ہوگا، جس میں ہر بلاگ پوسٹ کا اپنا راستہ ہے:
- لوکل ہوسٹ/بلاگ/پہلا مضمون
- لوکل ہوسٹ/بلاگ/-سیکنڈ-آرٹیکل
بریکٹ اشارے کا استعمال کرتے ہوئے، آپ Next.js میں ایک متحرک راستے کی وضاحت کر سکتے ہیں۔ مثال کے طور پر: pages/article/[slug].js
لنک روٹس
اب آپ نے اپنا پہلا راستہ مکمل کر لیا ہے۔ میرا اندازہ ہے کہ آپ پوچھ رہے ہیں کہ صفحات کو ان راستوں سے کیسے جوڑا جائے۔ ایسا کرنے کے لیے آپ کو 'اگلا/لنک' کی ضرورت ہوگی۔
یہاں ہوم پیج کی ایک مثال ہے جس میں About صفحہ کا لنک شامل ہے:
اگر آپ لنک کو اسٹائل کرنا چاہتے ہیں تو درج ذیل نحو کا استعمال کریں:
راستوں کو ری ڈائریکٹ کریں۔
اگر آپ کو کسی خاص صفحہ پر زبردستی ری ڈائریکٹ کرنے کی ضرورت ہو تو کیا ہوگا؟ مثال کے طور پر، جب ایک بٹن دبایا جاتا ہے؟ آپ اسے 'router.push' استعمال کر کے پورا کر سکتے ہیں:
SEO
ویب ایپلیکیشنز میں صفحات کو HTML باڈی میں ڈیٹا کے علاوہ میٹا (ہیڈ) عناصر کی ضرورت ہوتی ہے۔ اس سے React ایپلی کیشن میں React Helmet نامی اضافی ضرورت کی تنصیب کی ضرورت ہوگی۔
ہم اپنے ویب پیجز میں آسانی سے میٹا ڈیٹا شامل کرنے کے لیے نیکسٹ میں اگلا/ہیڈ سے ہیڈ جزو استعمال کر سکتے ہیں جو تلاش کے نتائج اور ایمبیڈز میں ظاہر ہوں گے:
اجزاء
آپ کو اکثر اجزاء یا لے آؤٹ فائل تیار کرنے کی ضرورت ہوگی۔ مثال کے طور پر، ایک جز جو 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 React کے سب سے اوپر بنایا گیا ہے، اس کے لیے ایک فرنٹ اینڈ ڈویلپمنٹ ٹول کٹ یوزر انٹرفیس بنانا ویب ایپس کو ڈیزائن کرنے کے لیے یہ میرا پسندیدہ انتخاب ہے۔
لیکن یہ کافی نہیں ہوگا اگر Next.js اس میں اچھا نہیں تھا جو اس نے کیا… ٹھیک ہے؟
تو، یہ بالکل کیا کرتا ہے؟
اسے سمجھنے کے لیے ہمیں پہلے چند تصورات کی وضاحت کرنی چاہیے۔ Next.js نے مقبولیت حاصل کی کیونکہ اس نے ایک مسئلہ حل کیا جو بہت سے ویب ڈویلپرز کو کلائنٹ سائڈ ویب ایپس (براؤزر میں) کے ساتھ تھا۔ ان سنگل پیج ایپلیکیشنز (SPAs) کا تجربہ بہتر تھا کیونکہ انہیں صفحہ کو دوبارہ لوڈ کرنے کے لیے صارف کی ضرورت نہیں تھی اور مزید تعامل کی اجازت تھی۔
تاہم، چونکہ اس طرح کی ایپ میں موجود مواد کا بڑا حصہ تب ہی نظر آتا ہے جب اسے براؤزر میں انجام دیا جاتا ہے، اس لیے ویب کرالر کو ایسی ایپ کے متنی مواد کو سمجھنے میں مشکل پیش آتی ہے۔
نتیجتاً، اپنی مقبولیت کے باوجود، بہت سے SPAs بڑے سرچ انجن جیسے گوگل کے لیے بڑے پیمانے پر گمنام رہے۔ Next.js میں اب React اجزاء کی سرور سائیڈ رینڈرنگ (SSR) کے لیے زیادہ مضبوط بلٹ ان میکانزم شامل ہے۔
Next.js ڈویلپرز کو تعمیراتی عمل کے دوران سرور پر JavaScript کوڈ بنانے اور صارف کو بنیادی، انڈیکس ایبل ایچ ٹی ایم ایل فراہم کرنے کی اجازت دیتا ہے۔
پیشہ
- صارف کے تجربے کے لیے بہت اچھا ہے۔
- SEO کے لیے بہت اچھا ہے۔
- ایک تیز رفتار جامد ویب سائٹ بنائیں جو متحرک کی طرح برتاؤ کرے۔
- UI اور UX بنانے میں لچک۔
- ترقی کے بہت سے فوائد
- زبردست کمیونٹی سپورٹ
خامیاں
- ویب سائٹس یا ایپلیکیشنز کے پاس تعمیر یا ترقی کے لیے ایک خاص وقت ہوتا ہے۔
- کچھ کاموں کے لیے، Next.js ناکافی ہے۔ ڈویلپرز کو Node.js ٹولز کا استعمال کرتے ہوئے متحرک روٹس بنانے کے قابل ہونا چاہیے۔
نتیجہ
جیسا کہ آپ دیکھ سکتے ہیں، Next.js React ایپ کی ڈیولپمنٹ کو آسان بناتا ہے اور آپ کو ان چیزوں پر توجہ مرکوز کرنے کی اجازت دیتا ہے جو سب سے اہم ہیں - آپ کی ایپ کی منطق اور UI۔ اس میں عصری، فرنٹ اینڈ سے بھرپور اور API سے چلنے والی ایپس بنانے کے لیے درکار ہر چیز شامل ہے۔
جامد HTML صفحات بنانے کی صلاحیت کی وجہ سے یہ صرف مواد کے پروجیکٹس، جیسے بلاگز اور کاروباری ویب سائٹس کے لیے بھی موزوں ہے۔
موجودہ ایڈیشنز کے ساتھ، Next.js نہ صرف ڈیولپر کے تجربے کی اعلیٰ سطح کو برقرار رکھتا ہے بلکہ اس فریم ورک کے روشن مستقبل کو یقینی بناتے ہوئے بصری کارکردگی اور صارف کے تجربے کو بڑھانے کے لیے ٹولز بھی فراہم کرتا ہے۔
جواب دیجئے