Teburin Abubuwan Ciki[Boye][Nuna]
Lokacin zabar ɗakin karatu na software ko tsari, yawanci ana la'akari da ƙwarewar haɓakawa.
Lokacin da na ambaci "ƙwarewar haɓakawa," Ina nufin yadda masu haɓakawa ke yin aikin. Masu haɓakawa suna zaɓar ɗakunan karatu ko tsarin da ke da daɗi don amfani.
Wannan yana ɗaya daga cikin dalilan farko da ya sa a yanzu muna da manyan ɗakunan karatu da tsarin aiki. A matsayinmu na masu haɓakawa, ba dole ba ne mu fara daga karce lokacin da akwai kayan aikin da aka ƙirƙira don taimaka mana da ayyukanmu.
Frameworks guda ne na software waɗanda masu haɓakawa ke ƙirƙira kuma suke amfani da su don gina aikace-aikacen, kuma NextJS na ɗaya daga cikinsu.
A cikin wannan sakon, za mu ci gaba da ci gaba da Nextjs, mahimman abubuwan da ke tattare da shi, da kuma yadda za mu yi amfani da shi don gina aikace-aikace. Mu yi tsalle kai tsaye.
Menene Next.js?
Na gaba.js tsarin JavaScript ne don gina rukunan yanar gizo da sauri da sauƙi da aikace-aikacen kan layi na tushen React. Yana ba ku damar ƙirƙira manyan ƙa'idodin Yanar gizo don dandamali iri-iri, gami da Windows, Linux, da Mac.
Ya kamata ku saba da tsarin Next.js idan kuna da ƙarancin masaniya game da amsa kuma kuna son ƙarin koyo game da yanayin yanayin.
Ko da yake Next.js ya zo da duk abin da kuke buƙata don farawa, kuna iya zaɓar tsakanin NPM da Yarn, JavaScript da TypeScript, CSS da SCSS, fitarwa a tsaye, da tura marasa sabar.
Features
- Ana yin taswirar hanya ta atomatik - Ba kwa buƙatar saita komai saboda kowane URL an tsara shi zuwa tsarin fayil, zuwa fayiloli a cikin babban fayil ɗin shafuka (kuna da zaɓuɓɓukan gyare-gyare, ba shakka).
- Abubuwan da aka haɗa na Fayil Guda – Abu ne mai sauƙi don ƙara salo da aka keɓance ga ɓangaren ta amfani da salon-jsx, wanda aka haɗa gabaɗaya kuma ƙungiya ɗaya ta samar.
- Sake ɗora lambar zafi - Lokacin da Next.js ya gano gyara da aka ajiye zuwa faifai, yana sake loda shafin.
- Abubuwan Dake Tsarukan - Zaku iya ɗora kayan aikin JavaScript a hankali da Abubuwan Amsa.
- Fitarwa a tsaye - Next.js yana ba ku damar fitarwa gabaɗaya a tsaye daga app ɗinku tare da umarnin fitarwa na gaba.
- Daidaitawa tare da Muhalli - Next.js yana haɗawa tare da JavaScript, Node, da React muhalli.
- Lambobin Rarraba ta atomatik - Laburaren karatu da JavaScript kaɗai ake amfani da su don yin shafuka. Maimakon ƙirƙirar fayil ɗin JavaScript guda ɗaya mai ɗauke da duk lambar ƙa'idar, Next.js cikin hikima ya raba ƙa'idar zuwa albarkatu da yawa.
Yadda ake ƙirƙirar aikace-aikacen next.js?
Installation
Kuna iya amfani da umarnin npx node don shigarwa da gina aikin Next.js.
Wannan zai haifar da babban fayil da duk fayiloli, daidaitawa, da sauran abubuwan da ake buƙata don gudanar da aikin Next.js.
Kuna iya ƙaddamar da app da zarar an ƙirƙira shi.
Shafuka & Gudanarwa
Don sarrafa hanyoyi tare da Next.js, ba ma buƙatar yin amfani da tsarin tuƙi. Yin tafiya tare da Next.js iska ce don saitawa. Lokacin da kake amfani da umarnin ƙirƙira-na gaba don gina sabuwar manhajar Next.js, ƙa'idar ta ƙirƙiri babban fayil mai suna 'shafukan' ta tsohuwa.
Wannan babban fayil na 'shafukan' shine inda kuke kula da hanyoyinku. Sakamakon haka, kowane fayil ɗin da ya amsa abubuwan da aka gyara a cikin babban kundin adireshi za a sarrafa shi azaman hanya ta daban.
Misali, idan babban fayil ɗin ya ƙunshi waɗannan fayilolin:
- index.js
- ku.js
- aricles.js
Wannan fayil ɗin za a canza ta atomatik ta hanyoyi uku:
- Shafin shafi localhost/index
- Game da shafi localhost/game da
- Shafin shafi localhost/labulai
Ana nuna misalin shafin about.js a ƙasa. Babu wani abu da aka bayar game da shafin, kamar yadda kuke gani. Kawai daidaitaccen bangaren aikin React ne.
Hanyoyi
Don yin hanyoyin gida, dole ne ka fara kafa babban babban fayil. Misali: shafuka/labarai. Ƙirƙiri ɓangaren amsawar 'contact.js' ɗinku a cikin wannan babban fayil ɗin, kuma zai samar da shafin localhost/articles/contact.
Idan kun sanya fayil ɗaya a cikin shafuka/articles.js da wani a cikin shafuka/articles/index.js. Dukansu suna nuna hanya iri ɗaya localhost/blog. A cikin wannan yanayin, Next.js zai sanya fayil ɗin article.js kawai. Menene game da hanyoyi masu ƙarfi, waɗanda kowane gidan yanar gizon yana da nasa hanyar:
- localhost/blog/ labarin farko
- localhost/blog/-labu na biyu
Yin amfani da bayanin martaba, zaku iya ayyana hanya mai ƙarfi a Next.js. Misali: shafuka/labarin/[slug].js
Hanyoyin haɗi
Yanzu kun gama hanyarku ta farko. Ina tsammanin kuna tambayar yadda ake haɗa shafuka zuwa waɗannan hanyoyin. Kuna buƙatar 'na gaba/mahadar' don yin hakan.
Ga misalin shafin gida wanda ya haɗa da hanyar haɗi zuwa Game da shafi:
Idan kuna son yin salon hanyar haɗin yanar gizon, yi amfani da tsarin haɗin gwiwa mai zuwa:
Ƙaddamar da Hanyoyi
Idan kana buƙatar tilasta turawa zuwa wani shafi fa? Misali, lokacin da aka danna maballin? Kuna iya cim ma wannan ta amfani da 'router.push':
SEO
Shafuka a cikin aikace-aikacen yanar gizo suna buƙatar abubuwan meta (kai) ban da bayanai a cikin jikin HTML. Wannan zai buƙaci shigar da ƙarin buƙatu mai suna React Helmet a cikin Aikace-aikacen React.
Za mu iya amfani da sashin Head daga gaba/ kai a gaba don ƙara metadata cikin sauƙi zuwa shafukan yanar gizon mu waɗanda za a nuna a cikin sakamakon bincike da sakawa:
Aka gyara
Kullum kuna buƙatar haɓaka abubuwan haɗin gwiwa ko fayil ɗin shimfidawa. Misali, bangaren da ke sanya navbar. Mun dai yi amfani da babban fayil ɗin shafuka zuwa yanzu. Idan ba a nufin bangaren ku ya zama shafin hanya fa?
Ba kwa son mai amfani ya kewaya zuwa shafi kamar localhost/navbar. Idan kun sanya bangaren Navbar.js a cikin babban fayil ɗin shafuka, abin da zai faru ke nan. Me ya kamata ku yi a halin da ake ciki?
Kawai adana duk abubuwan 'ba shafi' naku a cikin babban fayil daban. Yawancin ayyukan Next.js suna amfani da moniker 'components', kuma wannan babban fayil an ƙirƙira shi a cikin tushen babban fayil ɗin aikin ku.
Bangaran kai
Next.js ne ke ɗaukar nauyin shafin farko a gefen uwar garken. Yana yin haka ta hanyar gyara HTML na shafinku. An haɗa sashin taken.
Ana amfani da sashin Head na Next.js don ba da alamun sashin kai kamar take da meta. Ana amfani da bangaren kai a cikin wannan misali na bangaren Layout.
Ƙirƙiri shafi 404 ba a samo ba
Yana da yuwuwar yin shafin ku na kuskure 404. Kuna iya tsara saƙon ko ƙara ƙirar shafinku. A cikin babban fayil ɗin shafuka, ƙirƙiri fayil ɗin 404.js.
Lokacin da kuskure 404 ya faru, Next.js zai tura kai tsaye zuwa wannan shafin. Ga misalin shafi na 404 na keɓaɓɓen:
Ciro bayanai daga gefen uwar garken
Maimakon zazzage bayanai a gefen abokin ciniki, Next.js yana ba ku damar gudanar da yawan adadin bayanai na farko, wanda ke nuna aika shafin tare da bayanan da aka riga aka cika daga uwar garken.
Kuna da zaɓi biyu don aiwatar da ɗauko bayanan gefen uwar garken:
- Yakamata a debo bayanai akan kowace bukata.
- Samu bayanai sau ɗaya kawai a cikin aikin ginin (tsayayyen wurin)
Nemo bayanai akan kowace buƙata
Ana amfani da hanyar getServerSideProps don yin kowane buƙatu a gefen uwar garken. Za'a iya haɗa wannan aikin a ƙarshen fayil ɗin ɓangarori na ku. Next.js zai cika kayan aikin ku ta atomatik tare da abin getServerSideProps idan wannan aikin yana cikin fayil ɗin ɓangaren ku.
Ɗauki bayanai a lokacin ginawa
Ana amfani da hanyar getStaticProps don ba da gefen uwar garke a lokacin ginawa. Za'a iya haɗa wannan aikin a ƙarshen fayil ɗin ɓangarori na ku. Wannan hanyar tana gudanar da lambar uwar garken kuma tana aika buƙatar GET zuwa uwar garken, amma sau ɗaya kawai lokacin da aikinmu ya ƙare.
Me yasa yakamata ku koyi Next.js?
Ɗaya daga cikin dalilan wannan shine saboda Next.js an gina shi a saman React, kayan aikin haɓaka na gaba-gaba don ƙirƙirar musaya masu amfani Waɗannan su ne zaɓi na da na fi so don zayyana aikace-aikacen yanar gizo.
Amma ba zai isa ba idan Next.js bai yi kyau a abin da ya yi ba… daidai?
Don haka, menene ainihin yake yi?
Dole ne mu fara ayyana ƴan ra'ayoyi don mu fahimce su. Next.js ya sami shahara saboda ya warware matsalar da yawancin masu haɓaka gidan yanar gizo ke da su tare da aikace-aikacen yanar gizo na gefen abokin ciniki (a cikin mai binciken). Waɗannan Aikace-aikacen Shafi guda ɗaya (SPAs) sun sami ƙwarewa mafi kyau tunda ba sa buƙatar mai amfani ya sake loda shafin kuma ya ba da izinin ƙarin hulɗa.
Koyaya, saboda yawancin abubuwan da ke cikin ƙa'idar kamar wannan suna bayyana ne kawai lokacin da ake yin su a cikin mashigar yanar gizo, masu rarrafe yanar gizo suna da wahalar fahimtar abubuwan da ke cikin irin wannan app ɗin.
Sakamakon haka, duk da shaharar su, yawancin SPAs sun kasance ba a san su ba ga manyan injunan bincike kamar Google. Next.js yanzu ya ƙunshi ingantacciyar ingantacciyar ingantacciyar ingantacciyar hanyar samar da sabar-gefen sabar (SSR) na abubuwan React.
Next.js yana ba masu haɓaka damar gina lambar JavaScript akan uwar garken yayin aikin ginawa da samar da asali, HTML mai ƙima ga mai amfani.
ribobi
- Mai girma don ƙwarewar mai amfani
- Mafi kyau ga SEO
- Gina babban gidan yanar gizo mai saurin gaske wanda ke yin kamar mai ƙarfi
- Sassauci a ginin UI & UX.
- Yawancin fa'idodin ci gaba
- Babban goyon bayan al'umma
fursunoni
- Shafukan yanar gizo ko aikace-aikace suna da takamaiman adadin lokaci don ginawa ko haɓakawa.
- Don wasu ayyuka, Next.js bai isa ba. Masu haɓakawa yakamata su iya gina hanyoyi masu ƙarfi ta amfani da kayan aikin Node.js.
Kammalawa
Kamar yadda kuke gani, Next.js yana sauƙaƙa haɓaka haɓakar React app kuma yana ba ku damar mai da hankali kan abin da ya fi dacewa - dabaru na app da UI. Ya haɗa da duk abin da ake buƙata don ƙirƙirar kayan aiki na zamani, masu-arziƙi na gaba da API masu ƙarfi.
Hakanan ya dace da ayyukan abun ciki-kawai, kamar bulogi da gidajen yanar gizo na kasuwanci, saboda ikonsa na gina shafuna na HTML.
Tare da bugu na yanzu, Next.js ba kawai yana kula da babban matakin ƙwarewar haɓakawa ba amma yana ba da kayan aiki don haɓaka aikin gani da ƙwarewar mai amfani, yana tabbatar da kyakkyawar makoma ga wannan tsarin.
Leave a Reply