Orodha ya Yaliyomo[Ficha][Onyesha]
Wakati wa kuchagua maktaba ya programu au mfumo, uzoefu wa msanidi kawaida huzingatiwa.
Ninapotaja "uzoefu wa wasanidi programu," ninarejelea jinsi wasanidi programu hufanya kazi. Wasanidi huchagua maktaba au mifumo ambayo ni ya kufurahisha kutumia.
Hii ni mojawapo ya sababu za msingi kwa nini sasa tuna maktaba na mifumo maarufu zaidi. Kama wasanidi programu, si lazima tuanze kutoka mwanzo wakati kuna zana zilizopo iliyoundwa ili kutusaidia na kazi zetu.
Mifumo ni vipande vya programu ambavyo huundwa na kutumiwa na wasanidi programu kuunda programu, na NextJS ni mojawapo.
Katika chapisho hili, tutapitia Nextjs, vipengele vyake muhimu, na jinsi tunavyoweza kuitumia kuunda programu. Hebu turukie ndani.
Next.js ni nini?
Ijayo ni mfumo wa JavaScript wa kuunda kwa haraka na kwa urahisi kurasa za tovuti tuli na programu-tumizi za mtandaoni zinazotegemea React. Inakuruhusu kubuni programu bora za Wavuti kwa majukwaa anuwai, ikijumuisha Windows, Linux, na Mac.
Unapaswa kufahamu mfumo wa Next.js ikiwa una ujuzi mdogo wa react na unataka kujifunza zaidi kuhusu mfumo ikolojia wa kuitikia.
Ingawa Next.js inakuja na kila kitu unachohitaji ili kuanza, unaweza kuchagua kati ya NPM na Uzi, JavaScript na TypeScript, CSS na SCSS, usafirishaji tuli, na uwekaji bila seva.
Vipengele
- Uelekezaji unafanywa kiotomatiki - Huhitaji kusanidi chochote kwa sababu URL yoyote imechorwa kwenye mfumo wa faili, hadi faili kwenye folda ya kurasa (una chaguzi za kubinafsisha, bila shaka).
- Vipengee vya Faili Moja - Ni rahisi kuongeza mitindo iliyowekwa kwenye kipengee kwa kutumia styled-jsx, ambayo imeunganishwa kabisa na kuzalishwa na timu moja.
- Kupakia upya Msimbo wa Moto - Wakati Next.js inapotambua urekebishaji uliohifadhiwa kwenye diski, inapakia upya ukurasa.
- Vipengee Vinavyobadilika - Unaweza kupakia moduli za JavaScript na Vipengee vya React.
- Usafirishaji tuli - Next.js hukuruhusu kusafirisha tovuti tuli kabisa kutoka kwa programu yako kwa amri inayofuata ya usafirishaji.
- Utangamano na Mazingira - Next.js inaunganishwa bila mshono na JavaScript, Nodi, na mifumo ikolojia ya React.
- Kugawanya Misimbo Kiotomatiki - maktaba na JavaScript pekee zinazohitajika ndizo zinazotumiwa kutoa kurasa. Badala ya kuunda faili moja ya JavaScript iliyo na msimbo wote wa programu, Next.js inagawanya programu katika rasilimali nyingi kwa busara.
Jinsi ya kuunda programu inayofuata.js?
ufungaji
Unaweza kutumia nodi npx amri kusakinisha na kujenga mradi Next.js.
Hii itazalisha folda na faili zote, usanidi, na vipengee vingine vinavyohitajika ili kuendesha mradi wa Next.js.
Unaweza kuzindua programu mara tu imetolewa.
Kurasa na Uelekezaji
Ili kushughulikia njia kwa Next.js, hatuhitaji kutumia mfumo wa uelekezaji. Kuelekeza ukitumia Next.js ni rahisi kusanidi. Unapotumia amri ya kuunda-programu inayofuata kuunda programu mpya ya Next.js, programu huunda folda inayoitwa 'kurasa' kwa chaguomsingi.
Folda hii ya 'kurasa' ndipo unapodumisha njia zako. Kama matokeo, kila faili ya vipengee vya majibu kwenye saraka ndogo itashughulikiwa kama njia tofauti.
Kwa mfano, ikiwa folda ina faili hizo:
- index.js
- kuhusu.js
- aricles.js
Faili hii itabadilishwa kiotomatiki kwa njia tatu:
- Ukurasa wa faharasa localhost/index
- Ukurasa wa kuhusu localhost/about
- Ukurasa wa blogu mwenyeji/makala
Mfano wa ukurasa wa about.js umeonyeshwa hapa chini. Hakuna chochote kinachotolewa kuhusu ukurasa, kama unavyoona. Ni kijenzi cha kawaida cha utendaji cha React.
njia
Ili kutengeneza njia zilizowekwa kiota, lazima kwanza uweke folda ndogo. Kwa mfano: kurasa/makala. Unda kijenzi chako cha majibu cha 'contact.js' ndani ya folda hiyo, na itazalisha ukurasa localhost/articles/contact.
Ukiweka faili moja katika pages/articles.js na nyingine katika pages/articles/index.js. Zote zinaonyesha njia sawa localhost/blog. Katika hali hii, Next.js itatoa tu faili ya article.js. Vipi kuhusu njia zinazobadilika, ambazo kila chapisho la blogi lina njia yake:
- localhost/blog/makala-ya-kwanza
- localhost/blog/-makala-ya pili
Kwa kutumia nukuu ya mabano, unaweza kufafanua njia inayobadilika katika Next.js. Kwa mfano: kurasa/makala/[slug].js
Viunga vya Njia
Sasa umekamilisha njia yako ya kwanza. Nadhani unauliza jinsi ya kuunganisha kurasa kwenye njia hizo. Utahitaji 'kifuatacho/kiungo' kufanya hivyo.
Huu hapa ni mfano wa ukurasa wa nyumbani unaojumuisha kiungo kwa ukurasa wa Kuhusu:
Ikiwa ungependa kuweka kiungo mtindo, tumia syntax ifuatayo:
Elekeza Upya Njia
Je, ikiwa unahitaji kulazimisha kuelekeza upya kwa ukurasa fulani? Kwa mfano, wakati kifungo ni taabu? Unaweza kukamilisha hili kwa kutumia 'router.push':
SEO
Kurasa katika programu za wavuti zinahitaji vipengele vya meta (kichwa) pamoja na data ndani ya mwili wa HTML. Hii italazimu usakinishaji wa hitaji la ziada linaloitwa React Helmet katika React Application.
Tunaweza kutumia kipengele cha Kichwa kutoka kinachofuata/kichwa katika Inayofuata ili kuongeza metadata kwa urahisi kwenye kurasa zetu za tovuti ambazo zitaonyeshwa katika matokeo ya utafutaji na upachikaji:
Vipengele
Mara kwa mara utahitaji kutengeneza vipengele au faili ya mpangilio. Kwa mfano, sehemu inayotoa upau wa urambazaji. Tumetumia folda ya kurasa hivi sasa. Je, ikiwa kijenzi chako hakikusudiwi kuwa ukurasa wa njia?
Hutaki mtumiaji kuelekeza kwenye ukurasa kama vile mwenyeji/upau wa urambazaji. Ukiweka kijenzi cha Navbar.js kwenye folda ya kurasa, hicho ndicho kitatokea. Unapaswa kufanya nini katika hali hiyo?
Hifadhi tu vipengele vyako vyote vya 'sio ukurasa' kwenye folda tofauti. Miradi mingi ya Next.js hutumia 'vijenzi' vya moniker, na folda hii inatolewa katika folda ya msingi ya mradi wako.
Sehemu ya kichwa
Upakiaji wa ukurasa wa mwanzo unatolewa na Next.js kwenye upande wa seva. Inafanya hivyo kwa kurekebisha HTML ya ukurasa wako. Sehemu ya kichwa imejumuishwa.
Kipengele cha Next.js Head kinatumika kutoa lebo za sehemu ya vichwa kama vile kichwa na meta. Kipengele cha Kichwa kinatumika katika mfano huu wa kipengele cha Mpangilio.
Unda ukurasa wa 404 haujapatikana
Inawezekana kutengeneza ukurasa wako wa hitilafu 404. Unaweza kutaka kubinafsisha ujumbe au kuongeza muundo wako wa ukurasa. Katika folda ya kurasa, unda faili ya 404.js.
Hitilafu ya 404 inapotokea, Next.js itaelekeza upya kwa ukurasa huu kiotomatiki. Hapa kuna mfano wa ukurasa wa 404 uliobinafsishwa:
Kuleta data kutoka upande wa seva
Badala ya kupakua data kwa upande wa mteja, Next.js hukuruhusu kufanya idadi ya awali ya data, ambayo ina maana ya kutuma ukurasa na data ambayo tayari imejaa kutoka kwa seva.
Una chaguo mbili za kutekeleza kutafuta data ya upande wa seva:
- Data inapaswa kuletwa kwa kila ombi.
- Pata data mara moja pekee katika mchakato wa ujenzi (tovuti tuli)
Leta data kwa kila ombi
Njia ya getServerSideProps inatumika kwa upande wa seva kutoa kila ombi. Chaguo hili la kukokotoa linaweza kujumuishwa mwishoni mwa faili ya kijenzi chako. Next.js itajaza kiotomatiki mhimili wa kijenzi chako na kitu cha getServerSideProps ikiwa kitendakazi hicho kipo katika faili ya kijenzi chako.
Leta data kwa wakati wa ujenzi
Njia ya getStaticProps inatumika kutoa upande wa seva wakati wa ujenzi. Chaguo hili la kukokotoa linaweza kujumuishwa mwishoni mwa faili ya kijenzi chako. Njia hii huendesha msimbo wa seva na kutuma ombi la GET kwa seva, lakini mara moja tu mradi wetu unapokamilika.
Kwa nini unapaswa kujifunza Next.js?
Moja ya sababu za hii ni kwa sababu Next.js imejengwa juu ya React, zana ya ukuzaji ya mbele ya kuunda miingiliano ya watumiaji hilo ni chaguo langu ninalopenda zaidi kwa kubuni programu za wavuti.
Lakini haingetosha kama Next.js haikuwa nzuri kwa kile ilichokifanya… sawa?
Kwa hiyo, inafanya nini hasa?
Ni lazima kwanza tufafanue dhana chache ili kuielewa. Next.js ilipata umaarufu kwa sababu ilitatua tatizo ambalo watengenezaji wengi wa wavuti walikuwa nalo na programu za wavuti za upande wa mteja (katika kivinjari). Programu hizi za Ukurasa Mmoja (SPAs) zilikuwa na matumizi bora zaidi kwa kuwa hazikuhitaji mtumiaji kupakia upya ukurasa na ziliruhusu mwingiliano zaidi.
Hata hivyo, kwa sababu wingi wa nyenzo katika programu kama hii huonekana tu inapotekelezwa kwenye kivinjari, watambazaji wa wavuti huwa na wakati mgumu kuelewa maudhui ya maandishi ya programu kama hiyo.
Kwa hivyo, licha ya umaarufu wao, SPA nyingi zilibaki bila majina kwa injini kubwa za utafutaji kama vile Google. Next.js sasa inajumuisha utaratibu thabiti zaidi uliojengewa ndani wa uwasilishaji wa upande wa seva (SSR) wa vipengee vya React.
Next.js huruhusu wasanidi programu kuunda msimbo wa JavaScript kwenye seva wakati wa mchakato wa kuunda na kutoa HTML msingi, inayoweza kutambulika kwa mtumiaji.
faida
- Nzuri kwa uzoefu wa mtumiaji
- Nzuri kwa SEO
- Unda tovuti tuli ya haraka sana ambayo inafanya kazi kama inayobadilika
- Kubadilika katika kujenga UI na UX.
- Faida nyingi za maendeleo
- Msaada mkubwa wa jamii
Africa
- Tovuti au programu zina muda fulani wa kuunda au kuendeleza.
- Kwa kazi fulani, Next.js haitoshi. Wasanidi programu wanapaswa kuwa na uwezo wa kuunda njia zinazobadilika kwa kutumia zana za Node.js.
Hitimisho
Kama unavyoona, Next.js hurahisisha uundaji wa programu ya React na hukuruhusu kuangazia mambo muhimu zaidi - mantiki ya programu yako na UI. Inajumuisha kila kitu kinachohitajika ili kuunda programu za kisasa, za mbele na zinazotumia API.
Inafaa pia kwa miradi ya maudhui pekee, kama vile blogu na tovuti za biashara, kutokana na uwezo wake wa kuunda kurasa tuli za HTML.
Kwa matoleo ya sasa, Next.js sio tu hudumisha kiwango cha juu cha matumizi ya wasanidi programu lakini pia inatoa zana za kuongeza utendakazi wa kuona na matumizi ya mtumiaji, kuhakikisha mustakabali mzuri wa mfumo huu.
Acha Reply