Clàr-innse[Falaich][Seall]
Nuair a bhios tu a’ taghadh leabharlann no frèam bathar-bog, mar as trice bithear a’ toirt aire do eòlas an leasaiche.
Nuair a bheir mi iomradh air “eòlas leasaiche,” tha mi a’ toirt iomradh air mar a bhios luchd-leasachaidh a’ dèanamh an obair. Bidh luchd-leasachaidh a 'taghadh leabharlannan no frèaman a tha tlachdmhor a chleachdadh.
Is e seo aon de na prìomh adhbharan gu bheil na leabharlannan agus na frèaman as mòr-chòrdte againn a-nis. Mar luchd-leasachaidh, chan fheum sinn tòiseachadh bhon fhìor thoiseach nuair a tha innealan ann mu thràth air an cruthachadh gus ar cuideachadh le ar gnìomhan.
Tha frèaman nam pìosan bathar-bog a tha air an cruthachadh agus air an cleachdadh le luchd-leasachaidh gus tagraidhean a thogail, agus tha NextJS mar aon dhiubh.
Anns an dreuchd seo, thèid sinn thairis air Nextjs, na prìomh fheartan aige, agus mar as urrainn dhuinn a chleachdadh gus tagradh a thogail. Leig leinn leum ceart a-steach.
Dè th' ann an Next.js?
Air adhart.js. na fhrèam JavaScript airson duilleagan-lìn statach agus tagraidhean air-loidhne stèidhichte air React a thogail gu luath agus gu furasta. Leigidh e leat aplacaidean lìn sgoinneil a dhealbhadh airson grunn àrd-ùrlaran, nam measg Windows, Linux, agus Mac.
Bu chòir dhut a bhith eòlach air frèam Next.js mura h-eil ach glè bheag de eòlas agad air react agus gu bheil thu airson barrachd ionnsachadh mun eag-shiostam freagairt.
Eadhon ged a thig Next.js leis a h-uile dad a dh ’fheumas tu airson tòiseachadh, faodaidh tu taghadh eadar NPM agus Yarn, JavaScript agus TypeScript, CSS agus SCSS, às-mhalairt statach, agus cleachdadh gun fhrithealaiche.
feartan
- Thèid slighe a dhèanamh gu fèin-ghluasadach - Cha leig thu leas dad a rèiteachadh oir tha URL sam bith air a mhapadh gu siostam nam faidhlichean, gu faidhlichean ann am pasgan nan duilleagan (tha roghainnean gnàthachaidh agad, gu dearbh).
- Co-phàirtean de fhaidhle shingilte - Tha e sìmplidh stoidhlichean a chuir ris a’ cho-phàirt a’ cleachdadh styled-jsx, a tha gu tur amalaichte agus air a thoirt gu buil leis an aon sgioba.
- Ag ath-luchdachadh còd teth - Nuair a lorgas Next.js atharrachadh a chaidh a shàbhaladh air diosc, bidh e ag ath-luchdachadh na duilleige.
- Co-phàirtean fiùghantach - Faodaidh tu modalan JavaScript agus React Components a luchdachadh gu dinamach.
- Às-mhalairt statach - Leigidh Next.js leat làrach gu tur statach às-mhalairt bhon aplacaid agad leis an ath àithne às-mhalairt.
- Co-chòrdalachd leis an Àrainneachd - Bidh Next.js a’ fighe a-steach gu sgiobalta le eag-shiostaman JavaScript, Node, agus React.
- A’ sgoltadh chòdan gu fèin-ghluasadach - Is e dìreach na leabharlannan agus JavaScript a tha a dhìth a thathas a’ cleachdadh gus duilleagan a thoirt seachad. An àite a bhith a’ cruthachadh aon fhaidhle JavaScript anns a bheil còd na h-aplacaid gu lèir, bidh Next.js gu tùrail a’ roinn an aplacaid gu mòran ghoireasan.
Ciamar a chruthaicheas tu aplacaid next.js?
stàladh
Faodaidh tu an àithne nód npx a chleachdadh gus pròiseact Next.js a stàladh agus a thogail.
Ginidh seo pasgan agus a h-uile faidhle, rèiteachadh, agus nithean eile a dh’ fheumar gus pròiseact Next.js a ruith.
Faodaidh tu an aplacaid a chuir air bhog aon uair ‘s gu bheil e air a chruthachadh.
Duilleagan & Routing
Gus slighean a làimhseachadh le Next.js, chan fheum sinn frèam slighe a chleachdadh. Tha slighe le Next.js na ghaoith ri stèidheachadh. Nuair a chleachdas tu an àithne create-next-app gus app Next.js ùr a thogail, bidh an aplacaid a’ cruthachadh pasgan ris an canar ‘pages’ gu bunaiteach.
'S e am pasgan 'duilleagan' seo far am bi thu a' cumail suas do shlighean. Mar thoradh air an sin, thèid gach faidhle co-phàirtean ath-fhreagairt san fho-leabhar a làimhseachadh mar shlighe air leth.
Mar eisimpleir, ma tha na faidhlichean sin anns a’ phasgan:
- clàr-amais.js
- mu dheidhinn.js
- artaigilean.js
Thèid am faidhle seo atharrachadh gu fèin-obrachail ann an trì dòighean:
- An duilleag clàr-amais localhost / clàr-amais
- An duilleag mu dheidhinn localhost / mu dheidhinn
- An duilleag blog localhost / artaigilean
Tha eisimpleir de dhuilleag about.js ri fhaicinn gu h-ìosal. Chan eil dad air a thoirt seachad mun duilleag, mar a chì thu. Tha e dìreach mar phàirt àbhaisteach gnìomh React.
Slighean
Gus slighean neadachaidh a dhèanamh, feumaidh tu an toiseach fo-fhilleadh a stèidheachadh. Mar eisimpleir: duilleagan/artaigilean. Cruthaich am pàirt freagairt ‘contact.js’ agad taobh a-staigh a’ phasgan sin, agus cruthaichidh e an duilleag localhost/articles/contact.
Ma chuireas tu aon fhaidhle ann an duilleagan/articles.js agus fear eile ann an duilleagan/articles/index.js. Tha an dà chuid a’ nochdadh an aon shlighe localhost / blog. Anns an t-suidheachadh seo, bidh Next.js dìreach a’ toirt seachad am faidhle article.js. Dè mu dheidhinn slighean fiùghantach, anns a bheil a shlighe fhèin aig gach post blog:
- localhost / blog / ciad artaigil
- localhost/blog/-second-article
A’ cleachdadh comharradh nan camagan, ’s urrainn dhut slighe fiùghantach a mhìneachadh ann an Next.js. Mar eisimpleir: duilleagan/artaigil/[slug].js
Slighean ceangail
Tha thu a-nis air a’ chiad slighe agad a chrìochnachadh. Tha mi creidsinn gu bheil thu a’ faighneachd ciamar a cheanglas tu duilleagan ris na slighean sin. Feumaidh tu 'next/link' airson sin a dhèanamh.
Seo eisimpleir de dhuilleag dachaigh anns a bheil ceangal gu duilleag Mu dheidhinn:
Ma tha thu airson an ceangal a stoidhle, cleachd an co-chòrdadh a leanas:
Ath-stiùireadh slighean
Dè ma dh’ fheumas tu ath-stiùireadh gu duilleag sònraichte a sparradh? Mar eisimpleir, nuair a thèid putan a bhrùthadh? Faodaidh tu seo a choileanadh le bhith a’ cleachdadh ‘router.push’:
SEO
Feumaidh duilleagan ann an tagraidhean lìn eileamaidean meta (ceann) a bharrachd air dàta taobh a-staigh na buidhne HTML. Bidh feum air riatanas a bharrachd a chuir a-steach leis an ainm React Helmet ann an Iarrtas React.
Is urrainn dhuinn am pàirt Ceann a chleachdadh bhon ath / ceann ann an Next gus meata-dàta a chuir gu na duilleagan lìn againn gu furasta a thèid a thaisbeanadh ann an toraidhean rannsachaidh agus in-ghabhail:
phàirtean
Gu tric feumaidh tu co-phàirtean no faidhle cruth a leasachadh. Mar eisimpleir, co-phàirt a bheir seachad am bàr seòlaidh. Tha sinn dìreach air pasgan nan duilleagan a chleachdadh gu ruige seo. Dè mura h-eil am pàirt agad gu bhith na dhuilleag slighe?
Chan eil thu airson 's gun gluais an neach-cleachdaidh gu duilleag mar localhost/navbar. Ma chuireas tu am pàirt Navbar.js ann am pasgan nan duilleagan, sin a thachras. Dè bu chòir dhut a dhèanamh san t-suidheachadh?
Dìreach glèidh na pàirtean agad 'chan e duilleag' ann am pasgan air leth. Bidh a’ mhòr-chuid de phròiseactan Next.js a’ cleachdadh am moniker ‘components,’ agus thèid am pasgan seo a chruthachadh ann am pasgan freumh a’ phròiseict agad.
Co-phàirt ceann
Tha an duilleag tùsail air a thoirt seachad le Next.js air taobh an fhrithealaiche. Bidh e a’ dèanamh seo le bhith ag atharrachadh HTML na duilleige agad. Tha an roinn ceann-cinn air a thoirt a-steach.
Tha am pàirt Next.js Head air a chleachdadh gus tagaichean earrann cinn leithid tiotal agus meta a thoirt seachad. Tha am pàirt Ceann air a chleachdadh san eisimpleir seo de phàirt Layout.
Cruthaich 404 duilleag cha deach a lorg
Tha e comasach an duilleag mearachd 404 agad fhèin a dhèanamh. Is dòcha gum bi thu airson an teachdaireachd a ghnàthachadh no do dhealbhadh duilleag fhèin a chuir ris. Ann am pasgan nan duilleagan, cruthaich am faidhle 404.js.
Nuair a thachras mearachd 404, cuiridh Next.js ath-stiùireadh gu fèin-obrachail chun duilleag seo. Seo eisimpleir de dhuilleag pearsanta 404:
A’ faighinn dàta bho thaobh an fhrithealaiche
An àite a bhith a’ luchdachadh sìos dàta air taobh an neach-dèiligidh, leigidh Next.js leat àireamh dàta tùsail a dhèanamh, a tha a’ ciallachadh gun cuir thu an duilleag leis an dàta a tha air a lìonadh bhon t-seirbheisiche mu thràth.
Tha dà roghainn agad airson faighinn dàta taobh an fhrithealaiche a chuir an gnìomh:
- Bu chòir dàta fhaighinn air gach iarrtas.
- Na faigh dàta ach aon turas tron phròiseas togail (làrach statach)
Faigh dàta air gach iarrtas
Tha an dòigh getServerSideProps air a chleachdadh gus gach iarrtas a thoirt seachad taobh an fhrithealaiche. Faodar an gnìomh seo a thoirt a-steach aig deireadh am faidhle co-phàirteach agad. Bidh Next.js gu fèin-obrachail a’ lìonadh na props co-phàirteach agad leis an nì getServerSideProps ma tha an gnìomh sin an làthair anns an fhaidhle co-phàirteach agad.
Faigh dàta aig àm togail
Tha an dòigh getStaticProps air a chleachdadh gus taobh an fhrithealaiche a thoirt seachad aig àm togail. Faodar an gnìomh seo a thoirt a-steach aig deireadh am faidhle co-phàirteach agad. Bidh an dòigh seo a 'ruith còd an fhrithealaiche agus a' cur iarrtas GET chun an fhrithealaiche, ach dìreach aon turas nuair a bhios am pròiseact againn deiseil.
Carson a bu chòir dhut Next.js ionnsachadh?
Is e aon de na h-adhbharan airson seo gu bheil Next.js air a thogail a bharrachd air React, inneal leasachaidh aghaidh aghaidh airson cruthachadh eadar-aghaidh luchd-cleachdaidh is e sin an roghainn as fheàrr leam airson dealbhadh aplacaidean lìn.
Ach cha bhiodh e gu leòr mura robh Next.js math air na rinn e… ceart?
Mar sin, dè dìreach a bhios e a’ dèanamh?
Feumaidh sinn an toiseach beagan bhun-bheachdan a mhìneachadh gus a thuigsinn. Fhuair Next.js mòr-chòrdte oir dh’ fhuasgail e duilgheadas a bha aig mòran de luchd-leasachaidh lìn le aplacaidean lìn taobh teachdaiche (sa bhrobhsair). Bha eòlas na b’ fheàrr aig na Tagraidhean Singilte (SPAn) seo leis nach robh feum aca air an neach-cleachdaidh an duilleag ath-luchdachadh agus leig iad le barrachd eadar-ghnìomhachd.
Ach, leis nach fhaicear a’ mhòr-chuid den stuth ann an aplacaid mar seo ach nuair a thèid a chluich sa bhrobhsair, bidh ùine dhoirbh aig luchd-crathaidh lìn a bhith a’ tuigsinn susbaint teacsa an aplacaid sin.
Mar thoradh air an sin, a dh’ aindeoin cho mòr ‘s a bha iad, bha mòran de SPAn fhathast gun urra ri einnseanan sgrùdaidh mòra leithid Google. Tha Next.js a-nis a’ toirt a-steach inneal togte nas làidire airson toirt seachad taobh an fhrithealaiche (SSR) de cho-phàirtean React.
Leigidh Next.js le luchd-leasachaidh còd JavaScript a thogail air an fhrithealaiche rè a’ phròiseas togail agus HTML bunaiteach, clàr-amais a thoirt don neach-cleachdaidh.
nithean matha
- Fìor mhath airson eòlas neach-cleachdaidh
- Fìor mhath airson SEO
- Tog làrach-lìn statach fìor-luath a bhios gad ghiùlan fhèin mar dhinimigeach
- Sùbailteachd ann a bhith a’ togail UI&UX.
- Mòran bhuannachdan leasachaidh
- Taic coimhearsnachd fìor mhath
ana
- Tha ùine shònraichte aig làraichean-lìn no tagraidhean airson togail no leasachadh.
- Airson gnìomhan sònraichte, chan eil Next.js iomchaidh. Bu chòir gum biodh e comasach do luchd-leasachaidh slighean fiùghantach a thogail a’ cleachdadh innealan Node.js.
Co-dhùnadh
Mar a chì thu, tha Next.js a’ sìmpleachadh leasachadh app React agus a’ leigeil leat fòcas a chuir air na rudan as cudromaiche - loidsig an aplacaid agad agus an UI. Tha e a’ toirt a-steach a h-uile dad a dh’ fheumar gus aplacaidean co-aimsireil, beairteach aghaidh agus cumhachd API a chruthachadh.
Tha e cuideachd iomchaidh airson pròiseactan susbaint a-mhàin, leithid blogaichean agus làraich-lìn gnìomhachais, air sgàth a chomas duilleagan HTML statach a thogail.
Leis na deasachaidhean gnàthach, tha Next.js chan ann a-mhàin a’ cumail suas ìre àrd de eòlas leasaiche ach cuideachd a’ toirt seachad innealan airson coileanadh lèirsinneach àrdachadh agus eòlas luchd-cleachdaidh, a’ dèanamh cinnteach gum bi àm ri teachd soilleir don fhrèam seo.
Leave a Reply