فهرست[پټ][ښکاره]
کله چې د سافټویر کتابتون یا چوکاټ غوره کول، د پراختیا کونکي تجربه معمولا په پام کې نیول کیږي.
کله چې زه د "پراختیا تجربه" یادونه کوم، زه دې ته اشاره کوم چې څنګه پراختیا کونکي واقعیا کار کوي. پرمخ وړونکي کتابتونونه یا چوکاټونه غوره کوي چې د کارولو لپاره خوندور وي.
دا یو له لومړنیو دلیلونو څخه دی چې ولې موږ اوس خورا مشهور کتابتونونه او چوکاټونه لرو. د پراختیا کونکو په توګه، موږ اړتیا نلرو له پیل څخه پیل وکړو کله چې زموږ د دندو سره د مرستې لپاره موجوده وسیلې رامینځته شوي.
چوکاټونه د سافټویر ټوټې دي چې د پراختیا کونکو لخوا د غوښتنلیکونو جوړولو لپاره رامینځته شوي او کارول کیږي ، او NextJS یو له دوی څخه دی.
پدې پوسټ کې ، موږ به د Nextjs ، د هغې کلیدي ب featuresو ته لاړ شو او دا چې څنګه موږ کولی شو دا د غوښتنلیک جوړولو لپاره وکاروو. راځئ چې سم دننه لاړ شو.
Next.js څه شی دی؟
Next.js د جاوا سکریپټ چوکاټ دی چې په چټکۍ او اسانۍ سره د جامد ویب پاڼو او د عکس العمل پر بنسټ آنلاین غوښتنلیکونو جوړولو لپاره. دا تاسو ته اجازه درکوي د مختلف پلیټ فارمونو لپاره عالي ویب ایپس ډیزاین کړئ ، پشمول د وینډوز ، لینکس او ماک.
تاسو باید د Next.js چوکاټ سره آشنا اوسئ که تاسو د عکس العمل سره لږترلږه آشنا یاست او غواړئ د عکس العمل ایکوسیستم په اړه نور معلومات زده کړئ.
که څه هم Next.js د هر هغه څه سره راځي چې تاسو یې پیل کولو ته اړتیا لرئ، تاسو کولی شئ د NPM او یارن، جاوا سکریپټ او ټایپ سکریپټ، CSS او SCSS، جامد صادراتو، او د سرور پرته ځای پرځای کولو ترمنځ انتخاب کړئ.
برخی
- روټینګ په اوتومات ډول ترسره کیږي - تاسو اړتیا نلرئ هیڅ شی تنظیم کړئ ځکه چې کوم یو آر ایل د فایل سیسټم سره نقشه شوی ، د پا pagesو فولډر کې فایلونو ته (البته تاسو د اصلاح کولو اختیارونه لرئ).
- د یو واحد فایل اجزا - دا ساده ده چې د سټایل شوي-jsx په کارولو سره برخې ته د سټایلونو اندازې اضافه کړئ ، کوم چې په بشپړ ډول د ورته ټیم لخوا مدغم او تولید شوی.
- د ګرم کوډ بیا پورته کول - کله چې Next.js په ډیسک کې خوندي شوی ترمیم کشف کړي، دا پاڼه بیا پورته کوي.
- متحرک اجزا - تاسو کولی شئ په متحرک ډول د جاواسکریپټ ماډلونه او عکس العمل اجزا پورته کړئ.
- جامد صادرات - Next.js تاسو ته اجازه درکوي د راتلونکي صادراتو کمانډ سره ستاسو له اپلیکیشن څخه بشپړ جامد سایټ صادر کړئ.
- د چاپیریال سره مطابقت - Next.js د جاواسکریپټ ، نوډ ، او عکس العمل اکوسیستمونو سره په بې ساري ډول مدغم کیږي.
- په اتوماتيک ډول د کوډونو ویشل - یوازې هغه کتابتونونه او جاواسکریپټ چې اړین دي د پاڼو د وړاندې کولو لپاره کارول کیږي. د دې پرځای چې یو واحد جاواسکریپټ فایل رامینځته کړي چې د اپلیکیشن ټول کوډ لري ، Next.js په هوښیارۍ سره اپلیکیشن په ډیری سرچینو ویشي.
د Next.js اپلیکیشن څنګه جوړ کړو؟
نصب
تاسو کولی شئ د نوډ npx کمانډ د Next.js پروژې نصب او جوړولو لپاره وکاروئ.
دا به یو فولډر او ټول فایلونه، تشکیلات، او نور توکي تولید کړي چې د 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 کې واچوئ. دواړه ورته لاره منعکس کوي localhost/blog. په دې حالت کې، Next.js به یوازې د article.js فایل وړاندې کړي. د متحرک لارو په اړه څه، په کوم کې چې هر بلاګ پوسټ خپله لاره لري:
- localhost/blog/لومړی مقاله
- localhost/blog/-دوهمه مقاله
د بریکٹ نوټیشن په کارولو سره، تاسو کولی شئ په Next.js کې یو متحرک لاره تعریف کړئ. د مثال په توګه: مخونه/مضمون/[slug].js
د نښلولو لارې
تاسو اوس خپله لومړۍ لاره بشپړه کړې ده. زه اټکل کوم چې تاسو پوښتنه کوئ چې څنګه پاڼې له دې لارو سره وصل کړئ. تاسو به د دې کولو لپاره 'بل/ لینک' ته اړتیا ولرئ.
دلته د کور پاڼې یوه بیلګه ده چې په اړه یې د پاڼې لینک شامل دی:
که تاسو غواړئ لینک سټایل کړئ، لاندې ترکیب وکاروئ:
د لارښوونو له لارې
څه که تاسو اړتیا لرئ چې یوې ټاکلې پاڼې ته بیرته راستانه کړئ؟ د مثال په توګه، کله چې تڼۍ فشارول کیږي؟ تاسو کولی شئ دا د 'router.push' په کارولو سره ترسره کړئ:
SEO
په ویب غوښتنلیکونو کې پاڼې د HTML بدن کې د معلوماتو سربیره میټا (سر) عناصرو ته اړتیا لري. دا به د عکس العمل غوښتنلیک کې د React هیلمټ په نوم اضافي اړتیا نصبولو ته اړتیا ولري.
موږ کولی شو په راتلونکي کې د راتلونکي/سر څخه د سر برخه وکاروو ترڅو په اسانۍ سره زموږ ویب پا pagesو ته میټاډاټا اضافه کړو چې د لټون پایلو او سرایتونو کې به ښودل کیږي:
د اجزاو
تاسو به ډیری وختونه د اجزاو یا ترتیب فایل رامینځته کولو ته اړتیا ولرئ. د مثال په توګه، یوه برخه چې د نیوبار وړاندې کوي. موږ تر اوسه پورې یوازې د پاڼو فولډر کارولی دی. څه که ستاسو اجزا د لارې پاڼې نه وي؟
تاسو نه غواړئ چې کاروونکي یوې پاڼې ته لاړ شي لکه لوکل هوسټ/نیوبار. که تاسو د پاڼو په فولډر کې د Navbar.js برخې ځای په ځای کړئ، دا به څه وي. تاسو باید په وضعیت کې څه وکړئ؟
په ساده ډول ستاسو ټول 'پاڼه نه' برخې په جلا فولډر کې ذخیره کړئ. ډیری Next.js پروژې د مونیکر 'اجزاوو' کاروي، او دا فولډر ستاسو د پروژې په روټ فولډر کې رامینځته کیږي.
د سر برخه
د مخکیني مخ بار د Next.js لخوا د سرور اړخ کې وړاندې کیږي. دا ستاسو د پاڼې HTML بدلولو سره دا کار کوي. د سر برخه شامله ده.
د Next.js Head برخه د سرلیک برخې ټاګونو لکه سرلیک او میټا ورکولو لپاره کارول کیږي. د سر برخه د ترتیب برخې په دې مثال کې کارول کیږي.
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) ښه تجربه درلوده ځکه چې دوی کاروونکي ته اړتیا نه درلوده چې پاڼه بیا پورته کړي او د ډیرو متقابل عمل لپاره اجازه ورکړي.
په هرصورت، ځکه چې د دې په څیر په اپلیکیشن کې د موادو لویه برخه یوازې هغه وخت ښکاره کیږي کله چې دا په براوزر کې ترسره کیږي، ویب کرالر د داسې اپلیکیشن متن مینځپانګې په پوهیدو کې ستونزمن وخت لري.
د پایلې په توګه، د دوی د شهرت سره سره، ډیری SPAs په لویه کچه د لویو پلټونکو انجنونو لکه ګوګل لپاره نامعلوم پاتې دي. Next.js اوس د عکس العمل اجزاو د سرور-سایډ رینډرینګ (SSR) لپاره خورا قوي جوړ شوی میکانیزم شامل دی.
Next.js پراختیا کونکو ته اجازه ورکوي چې د جوړونې پروسې په جریان کې په سرور کې جاواسکریپټ کوډ رامینځته کړي او کارونکي ته لومړني ، د شاخص وړ HTML چمتو کړي.
Pros
- د کارونکي تجربې لپاره عالي
- د SEO لپاره عالي
- یو خورا چټک جامد ویب پاڼه جوړه کړئ چې د متحرک په څیر چلند کوي
- د UI او UX په جوړولو کې انعطاف.
- ډیری پرمختیایي ګټې
- د ټولنې لوی ملاتړ
له بندڅخه
- ویب پاڼې یا غوښتنلیکونه د جوړولو یا پراختیا لپاره یو ټاکلی وخت لري.
- د ځینو دندو لپاره، Next.js ناکافي دی. پراختیا کونکي باید وکوالی شي د Node.js وسیلو په کارولو سره متحرک لارې رامینځته کړي.
پایله
لکه څنګه چې تاسو لیدلی شئ ، Next.js د عکس العمل ایپ پراختیا ساده کوي او تاسو ته اجازه درکوي په هغه څه تمرکز وکړئ چې خورا مهم دي - ستاسو د ایپ منطق او UI. پدې کې هر هغه څه شامل دي چې د معاصر، مخکیني بډایه او د API ځواک لرونکي ایپسونو جوړولو لپاره اړین دي.
دا یوازې د محتوياتو پروژو لپاره هم مناسبه ده، لکه بلاګونه او سوداګریز ویب پاڼې، د جامد HTML پاڼو د جوړولو وړتیا له امله.
د اوسني نسخو سره، Next.js نه یوازې د پراختیا کونکي تجربه لوړه کچه ساتي بلکې د لید فعالیت او کاروونکي تجربې زیاتولو لپاره وسیلې هم ورکوي، د دې چوکاټ لپاره روښانه راتلونکی تضمینوي.
یو ځواب ورکړئ ووځي