පටුන[සඟවන්න][පෙන්වන්න]
මෘදුකාංග පුස්තකාලයක් හෝ රාමුවක් තෝරාගැනීමේදී, සංවර්ධක අත්දැකීම සාමාන්යයෙන් සැලකිල්ලට ගනී.
මම "සංවර්ධක අත්දැකීම" සඳහන් කරන විට, මම සංවර්ධකයින් ඇත්ත වශයෙන්ම කාර්යය කරන ආකාරය ගැන සඳහන් කරමි. සංවර්ධකයින් භාවිතා කිරීමට ප්රියජනක පුස්තකාල හෝ රාමු තෝරා ගනී.
අපට දැන් වඩාත්ම ජනප්රිය පුස්තකාල සහ රාමු තිබීමට මෙය මූලික හේතුවකි. සංවර්ධකයින් වශයෙන්, අපගේ කාර්යයන් සඳහා අපට සහාය වීමට දැනට පවතින මෙවලම් නිර්මාණය කර ඇති විට අපට මුල සිටම ආරම්භ කිරීමට අවශ්ය නැත.
Frameworks යනු යෙදුම් තැනීම සඳහා සංවර්ධකයින් විසින් නිර්මාණය කර භාවිතා කරන මෘදුකාංග කොටස් වන අතර NextJS ඒවායින් එකකි.
මෙම පෝස්ටුවේදී, අපි Nextjs, එහි ප්රධාන විශේෂාංග සහ යෙදුමක් තැනීමට එය භාවිතා කරන්නේ කෙසේද යන්න හරහා යන්නෙමු. අපි කෙලින්ම ඇතුලට යමු.
Next.js යනු කුමක්ද?
ඊළඟට ස්ථිතික වෙබ් පිටු සහ ප්රතික්රියා පාදක සබැඳි යෙදුම් ඉක්මනින් සහ පහසුවෙන් තැනීමට JavaScript රාමුවකි. Windows, Linux සහ Mac ඇතුළු විවිධ වේදිකා සඳහා විශිෂ්ට වෙබ් යෙදුම් නිර්මාණය කිරීමට එය ඔබට ඉඩ සලසයි.
ඔබට ප්රතික්රියා සම්බන්ධයෙන් අවම හුරුපුරුදුකමක් තිබේ නම් සහ ප්රතික්රියා පරිසර පද්ධතිය ගැන වැඩිදුර දැන ගැනීමට අවශ්ය නම් ඔබ Next.js රාමුව ගැන හුරුපුරුදු විය යුතුය.
Next.js ඔබට ආරම්භ කිරීමට අවශ්ය සියල්ල සමඟ පැමිණියත්, ඔබට NPM සහ නූල්, JavaScript සහ TypeScript, CSS සහ SCSS, ස්ථිතික අපනයනය සහ සේවාදායක රහිත යෙදවීම අතර තේරිය හැක.
විශේෂාංග
- මාර්ගගත කිරීම ස්වයංක්රීයව සිදු වේ - ඕනෑම URL එකක් ගොනු පද්ධතියට, පිටු ෆෝල්ඩරයේ ඇති ගොනු වෙත සිතියම්ගත කර ඇති නිසා ඔබට කිසිවක් වින්යාස කිරීමට අවශ්ය නැත (ඔබට අභිරුචිකරණ විකල්ප ඇත, ඇත්තෙන්ම).
- තනි ගොනුවක සංරචක - Styled-jsx භාවිතයෙන් සංරචකයට විෂය පථය එකතු කිරීම සරලයි, එය සම්පූර්ණයෙන්ම ඒකාබද්ධ කර එකම කණ්ඩායමක් විසින් නිෂ්පාදනය කරනු ලැබේ.
- උණුසුම් කේතයක් නැවත පූරණය කිරීම - Next.js තැටියට සුරකින ලද වෙනස් කිරීමක් හඳුනා ගත් විට, එය පිටුව නැවත පූරණය කරයි.
- ගතික සංරචක - ඔබට JavaScript මොඩියුල සහ ප්රතික්රියා සංරචක ගතිකව පූරණය කළ හැක.
- ස්ථිතික අපනයන - Next.js ඔබට මීළඟ අපනයන විධානය සමඟ ඔබේ යෙදුමෙන් සම්පූර්ණයෙන්ම ස්ථිතික අඩවියක් අපනයනය කිරීමට ඉඩ සලසයි.
- පරිසරය සමඟ ගැළපීම - Next.js JavaScript, Node, සහ React පරිසර පද්ධති සමඟ බාධාවකින් තොරව ඒකාබද්ධ වේ.
- කේත ස්වයංක්රීයව බෙදීම - පිටු විදැහුම්කරණය සඳහා අවශ්ය පුස්තකාල සහ ජාවාස්ක්රිප්ට් පමණක් භාවිතා කරයි. යෙදුමේ සියලුම කේත අඩංගු තනි ජාවාස්ක්රිප්ට් ගොනුවක් නිර්මාණය කරනවා වෙනුවට, Next.js බුද්ධිමත්ව යෙදුම බොහෝ සම්පත් වලට බෙදා ඇත.
Next.js යෙදුමක් සාදා ගන්නේ කෙසේද?
ස්ථාපනය
Next.js ව්යාපෘතියක් ස්ථාපනය කර ගොඩනැගීමට ඔබට node npx විධානය භාවිතා කළ හැක.
මෙය ෆෝල්ඩරයක් සහ Next.js ව්යාපෘතියක් ක්රියාත්මක කිරීමට අවශ්ය සියලුම ගොනු, වින්යාස කිරීම් සහ අනෙකුත් අයිතම ජනනය කරනු ඇත.
එය ජනනය කළ පසු ඔබට යෙදුම දියත් කළ හැකිය.
පිටු සහ මාර්ගගත කිරීම
Next.js සමඟ මාර්ග හැසිරවීමට, අපට මාර්ගගත කිරීමේ රාමුවක් භාවිතා කිරීමට අවශ්ය නොවේ. Next.js සමඟින් මාර්ගගත කිරීම පිහිටුවීමට පහසුවකි. ඔබ නව Next.js යෙදුමක් තැනීමට create-next-app විධානය භාවිතා කරන විට, යෙදුම පෙරනිමියෙන් 'pages' නමින් ෆෝල්ඩරයක් සාදයි.
මෙම 'පිටු' ෆෝල්ඩරය ඔබ ඔබේ මාර්ග නඩත්තු කරන ස්ථානයයි. එහි ප්රතිඵලයක් ලෙස, උප බහලුමේ ඇති එක් එක් ප්රතික්රියා සංරචක ගොනුව වෙනම මාර්ගයක් ලෙස හසුරුවනු ඇත.
උදාහරණයක් ලෙස, ෆෝල්ඩරයේ එම ගොනු තිබේ නම්:
- index.js
- js ගැන
- aricles.js
මෙම ගොනුව ආකාර තුනකින් ස්වයංක්රීයව පරිවර්තනය වේ:
- දර්ශක පිටුව localhost/index
- ගැන පිටුව localhost/about
- බ්ලොග් පිටුව localhost/ලිපි
about.js පිටුවක උදාහරණයක් පහත දැක්වේ. ඔබට පෙනෙන පරිදි පිටුව ගැන කිසිවක් සපයා නැත. එය හුදෙක් සම්මත ප්රතික්රියා ක්රියාකාරී සංරචකයකි.
මාර්ග
කූඩු මාර්ග සෑදීමට, ඔබ මුලින්ම උප ෆෝල්ඩරයක් ස්ථාපිත කළ යුතුය. උදාහරණයක් ලෙස: පිටු/ලිපි. එම ෆෝල්ඩරය තුළ ඔබේ 'contact.js' ප්රතික්රියා සංරචකය සාදන්න, එවිට එය localhost/articles/contact පිටුව ජනනය කරයි.
ඔබ එක් ගොනුවක් 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 ශරීරය තුළ දත්ත වලට අමතරව මෙටා (හිස) මූලද්රව්ය අවශ්ය වේ. මෙය ප්රතික්රියා යෙදුමක ප්රතික්රියා හෙල්මට් නම් අමතර අවශ්යතාවයක් ස්ථාපනය කිරීම අවශ්ය වේ.
සෙවුම් ප්රතිඵල සහ කාවැද්දීම තුළ සංදර්ශන කෙරෙන අපගේ වෙබ් පිටුවලට පාර-දත්ත පහසුවෙන් එක් කිරීමට අපට Next හි next/head වෙතින් Head සංරචකය භාවිත කළ හැක:
සංරචක
ඔබට නිතරම සංරචක හෝ පිරිසැලසුම් ගොනුවක් සංවර්ධනය කිරීමට අවශ්ය වනු ඇත. උදාහරණයක් ලෙස, නව තීරුව විදැහුම් කරන සංරචකයකි. අපි මෙතෙක් භාවිතා කළේ පිටු ෆෝල්ඩරය පමණි. ඔබේ සංරචකය මාර්ග පිටුවක් වීමට අදහස් නොකරන්නේ නම් කුමක් කළ යුතුද?
පරිශීලකයා localhost/navbar වැනි පිටුවකට සැරිසැරීමට ඔබට අවශ්ය නැත. ඔබ Navbar.js සංරචකය පිටු ෆෝල්ඩරය තුළ තැබුවහොත්, එය සිදුවනු ඇත. තත්වය තුළ ඔබ කළ යුත්තේ කුමක්ද?
ඔබගේ සියලුම 'පිටුවක් නොවේ' සංරචක වෙනම ෆෝල්ඩරයක ගබඩා කරන්න. බොහෝ Next.js ව්යාපෘති 'සංරචක' යන නාමය භාවිත කරන අතර, මෙම ෆෝල්ඩරය ඔබේ ව්යාපෘතියේ මූල ෆෝල්ඩරය තුළ ජනනය වේ.
හිස සංරචකය
ආරම්භක පිටු පූරණය සේවාදායක පැත්තේ Next.js මගින් ලබා දේ. එය ඔබගේ පිටුවේ HTML වෙනස් කිරීමෙන් මෙය සිදු කරයි. ශීර්ෂ කොටස ඇතුළත් වේ.
Next.js Head සංරචකය මාතෘකාව සහ මෙටා වැනි ශීර්ෂ කොටස් ටැග් ලබා දීමට භාවිතා කරයි. පිරිසැලසුම් සංරචකයේ මෙම උදාහරණයේ 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 Google වැනි විශාල සෙවුම් යන්ත්ර සඳහා බොහෝ දුරට නිර්නාමිකව පැවතුනි. Next.js හි දැන් ප්රතික්රියා සංරචකවල සේවාදායක පාර්ශ්ව විදැහුම්කරණය (SSR) සඳහා වඩාත් ශක්තිමත් බිල්ට් යාන්ත්රණයක් ඇතුළත් වේ.
Next.js ගොඩනැගීමේ ක්රියාවලියේදී සේවාදායකයේ ජාවාස්ක්රිප්ට් කේතය ගොඩනැගීමට සහ පරිශීලකයාට මූලික, සුචිගත කළ හැකි HTML සැපයීමට සංවර්ධකයින්ට ඉඩ සලසයි.
කිහිප දෙනකුගේ
- පරිශීලක-අත්දැකීම් සඳහා විශිෂ්ටයි
- SEO සඳහා විශිෂ්ටයි
- ගතිකයක් ලෙස හැසිරෙන සුපිරි වේගවත් ස්ථිතික වෙබ් අඩවියක් සාදන්න
- UI සහ UX ගොඩනැගීමේ නම්යශීලී බව.
- බොහෝ සංවර්ධන වාසි
- විශාල ප්රජා සහයෝගයක්
අවාසි
- වෙබ් අඩවි හෝ යෙදුම් ගොඩනැගීමට හෝ සංවර්ධනය කිරීමට නිශ්චිත කාලයක් ඇත.
- ඇතැම් කාර්යයන් සඳහා, Next.js ප්රමාණවත් නොවේ. Node.js මෙවලම් භාවිතයෙන් ගතික මාර්ග තැනීමට සංවර්ධකයින්ට හැකි විය යුතුය.
නිගමනය
ඔබට පෙනෙන පරිදි, Next.js ප්රතික්රියා යෙදුම් සංවර්ධනය සරල කරන අතර ඔබට වඩාත්ම වැදගත් දේ කෙරෙහි අවධානය යොමු කිරීමට ඉඩ සලසයි - ඔබේ යෙදුම් තර්කනය සහ UI. සමකාලීන, ඉදිරිපස පොහොසත් සහ API බලයෙන් ක්රියාත්මක වන යෙදුම් නිර්මාණය කිරීමට අවශ්ය සියල්ල එයට ඇතුළත් වේ.
එය ස්ථිතික HTML පිටු තැනීමේ හැකියාව හේතුවෙන් බ්ලොග් සහ ව්යාපාරික වෙබ් අඩවි වැනි අන්තර්ගත-පමණි ව්යාපෘති සඳහා ද සුදුසු වේ.
වත්මන් සංස්කරණ සමඟ, Next.js උසස් මට්ටමේ සංවර්ධක අත්දැකීමක් පවත්වා ගෙන යනවා පමණක් නොව, දෘශ්ය කාර්ය සාධනය සහ පරිශීලක අත්දැකීම වැඩි කිරීම සඳහා මෙවලම් ද ලබා දෙයි, මෙම රාමුව සඳහා දීප්තිමත් අනාගතයක් සහතික කරයි.
ඔබමයි