Tabl Cynnwys[Cuddio][Dangos]
Wrth ddewis llyfrgell neu fframwaith meddalwedd, mae profiad y datblygwr fel arfer yn cael ei ystyried.
Pan soniaf am “brofiad datblygwr,” rwy'n cyfeirio at sut mae datblygwyr yn gwneud y gwaith mewn gwirionedd. Mae datblygwyr yn dewis llyfrgelloedd neu fframweithiau sy'n bleserus i'w defnyddio.
Dyma un o'r prif resymau pam fod gennym bellach y llyfrgelloedd a'r fframweithiau mwyaf poblogaidd. Fel datblygwyr, nid oes yn rhaid i ni ddechrau o'r dechrau pan fydd offer presennol wedi'u creu i'n cynorthwyo gyda'n tasgau.
Mae fframweithiau yn ddarnau o feddalwedd sy'n cael eu creu a'u defnyddio gan ddatblygwyr i adeiladu cymwysiadau, ac mae NextJS yn un ohonyn nhw.
Yn y swydd hon, byddwn yn mynd dros Nextjs, ei nodweddion allweddol, a sut y gallwn ei ddefnyddio i adeiladu cais. Gadewch i ni neidio reit i mewn.
Beth yw Next.js?
Nesaf.js yn fframwaith JavaScript ar gyfer adeiladu tudalennau gwe sefydlog a chymwysiadau ar-lein sy'n seiliedig ar React yn gyflym ac yn hawdd. Mae'n caniatáu ichi ddylunio apiau Gwe gwych ar gyfer amrywiaeth o lwyfannau, gan gynnwys Windows, Linux, a Mac.
Dylech chi fod yn gyfarwydd â fframwaith Next.js os nad ydych chi'n gyfarwydd iawn ag adweithio ac eisiau dysgu mwy am yr ecosystem adweithio.
Er bod Next.js yn dod â phopeth sydd ei angen arnoch i ddechrau, gallwch ddewis rhwng NPM ac Yarn, JavaScript a TypeScript, CSS a SCSS, allforio statig, a defnydd di-weinydd.
Nodweddion
- Mae llwybro yn cael ei wneud yn awtomatig - Nid oes angen i chi ffurfweddu unrhyw beth oherwydd bod unrhyw URL wedi'i fapio i'r system ffeiliau, i ffeiliau yn ffolder y tudalennau (mae gennych chi opsiynau addasu, wrth gwrs).
- Cydrannau Ffeil Sengl - Mae'n syml ychwanegu arddulliau wedi'u cwmpasu i'r gydran gan ddefnyddio styled-jsx, sydd wedi'i integreiddio'n llwyr a'i gynhyrchu gan yr un tîm.
- Ail-lwytho Cod Poeth - Pan fydd Next.js yn canfod addasiad sydd wedi'i gadw ar ddisg, mae'n ail-lwytho'r dudalen.
- Cydrannau Dynamig - Gallwch chi lwytho modiwlau JavaScript a Chydrannau Adwaith yn ddeinamig.
- Allforion statig - Mae Next.js yn caniatáu ichi allforio gwefan hollol statig o'ch app gyda'r gorchymyn allforio nesaf.
- Cydnawsedd â'r Amgylchedd - Mae Next.js yn integreiddio'n ddi-dor ag ecosystemau JavaScript, Node, ac React.
- Hollti Codau yn Awtomatig - Dim ond y llyfrgelloedd a JavaScript sydd eu hangen sy'n cael eu defnyddio i rendro tudalennau. Yn hytrach na chreu un ffeil JavaScript sy'n cynnwys holl god yr app, mae Next.js yn rhannu'r app yn ddeallus i lawer o adnoddau.
Sut i greu cymhwysiad next.js?
Gosod
Gallwch ddefnyddio'r gorchymyn nod npx i osod ac adeiladu prosiect Next.js.
Bydd hyn yn cynhyrchu ffolder a'r holl ffeiliau, ffurfweddiadau, ac eitemau eraill sydd eu hangen i redeg prosiect Next.js.
Gallwch chi lansio'r app unwaith y bydd wedi'i gynhyrchu.
Tudalennau a Llwybro
Er mwyn ymdrin â llwybrau gyda Next.js, nid oes angen i ni ddefnyddio fframwaith llwybro. Mae llwybro gyda Next.js yn awel i'w sefydlu. Pan fyddwch chi'n defnyddio'r gorchymyn create-next-app i adeiladu app Next.js newydd, mae'r app yn creu ffolder o'r enw 'tudalennau' yn ddiofyn.
Y ffolder 'tudalennau' hwn yw lle rydych chi'n cynnal eich llwybrau. O ganlyniad, bydd pob ffeil cydrannau adweithio yn yr is-gyfeiriadur yn cael ei drin fel llwybr ar wahân.
Er enghraifft, os yw'r ffolder yn cynnwys y ffeiliau hynny:
- mynegai.js
- am.js
- erthyglau.js
Bydd y ffeil hon yn cael ei thrawsnewid yn awtomatig mewn tair ffordd:
- Y dudalen fynegai localhost/mynegai
- Y dudalen am localhost / am
- Y dudalen blog localhost / erthyglau
Mae enghraifft o dudalen about.js i'w gweld isod. Nid oes dim yn cael ei ddarparu am y dudalen, fel y gwelwch. Yn syml, mae'n gydran swyddogaethol safonol React.
llwybrau
I wneud llwybrau nythu, rhaid i chi sefydlu is-ffolder yn gyntaf. Er enghraifft: tudalennau/erthyglau. Creu eich cydran adweithio 'contact.js' o fewn y ffolder honno, a bydd yn cynhyrchu'r dudalen localhost/articles/contact.
Os rhowch un ffeil mewn tudalennau/articles.js ac un arall mewn tudalennau/articles/index.js. Mae'r ddau yn adlewyrchu'r un llwybr localhost / blog. Yn y sefyllfa hon, bydd Next.js yn gwneud y ffeil article.js yn unig. Beth am lwybrau deinamig, lle mae gan bob post blog ei lwybr ei hun:
- localhost / blog / erthygl gyntaf
- localhost/blog/-second-article
Gan ddefnyddio nodiant y cromfachau, gallwch ddiffinio llwybr deinamig yn Next.js. Er enghraifft: tudalennau/erthygl/[slug].js
Llwybrau Cyswllt
Rydych chi bellach wedi cwblhau eich llwybr cyntaf. Rwy'n dyfalu eich bod yn gofyn sut i gysylltu tudalennau â'r llwybrau hynny. Bydd angen 'nesaf/dolen' i wneud hynny.
Dyma enghraifft o dudalen gartref sy'n cynnwys dolen i'r dudalen Amdanom ni:
Os hoffech chi steilio'r ddolen, defnyddiwch y gystrawen ganlynol:
Llwybrau Ailgyfeirio
Beth os oes angen i chi orfodi ailgyfeirio i dudalen benodol? Er enghraifft, pan fo botwm yn cael ei wasgu? Gallwch chi gyflawni hyn trwy ddefnyddio 'router.push':
SEO
Mae tudalennau mewn cymwysiadau gwe yn gofyn am elfennau meta (pen) yn ogystal â data o fewn y corff HTML. Bydd hyn yn golygu bod angen gosod gofyniad ychwanegol o'r enw Helmed React mewn Cymhwysiad React.
Gallwn ddefnyddio'r gydran Pennaeth o'r nesaf/pen yn Next i ychwanegu metadata yn hawdd i'n tudalennau gwe a fydd yn cael eu harddangos mewn canlyniadau chwilio ac mewn ymgorffori:
cydrannau
Yn aml bydd angen i chi ddatblygu cydrannau neu ffeil gosodiad. Er enghraifft, cydran sy'n rendro'r bar llywio. Rydyn ni newydd ddefnyddio'r ffolder tudalennau hyd yn hyn. Beth os nad yw eich cydran i fod i fod yn dudalen llwybr?
Nid ydych am i'r defnyddiwr lywio i dudalen fel localhost/bar llywio. Os rhowch y gydran Navbar.js yn y ffolder tudalennau, dyna beth fydd yn digwydd. Beth ddylech chi ei wneud yn y sefyllfa?
Yn syml, storio'ch holl gydrannau 'nid tudalen' mewn ffolder ar wahân. Mae'r rhan fwyaf o brosiectau Next.js yn defnyddio'r moniker 'components,' a chynhyrchir y ffolder hwn yn ffolder gwraidd eich prosiect.
Cydran pen
Mae'r llwyth tudalen cychwynnol yn cael ei rendro gan Next.js ar ochr y gweinydd. Mae'n gwneud hyn trwy addasu HTML eich tudalen. Mae adran y pennawd wedi'i chynnwys.
Defnyddir cydran Next.js Head i roi tagiau adran pennawd fel teitl a meta. Defnyddir y gydran Pen yn yr enghraifft hon o gydran Gosodiad.
Creu 404 tudalen heb ei chanfod
Mae'n ymarferol gwneud eich tudalen gwall 404 eich hun. Efallai yr hoffech chi addasu'r neges neu ychwanegu eich dyluniad tudalen eich hun. Yn y ffolder tudalennau, crëwch y ffeil 404.js.
Pan fydd gwall 404 yn digwydd, bydd Next.js yn ailgyfeirio i'r dudalen hon yn awtomatig. Dyma enghraifft o dudalen 404 wedi'i phersonoli:
Nôl Data o ochr y gweinydd
Yn hytrach na lawrlwytho data ar ochr y cleient, mae Next.js yn caniatáu ichi gynnal poblogaeth ddata gychwynnol, sy'n awgrymu anfon y dudalen gyda'r data sydd eisoes wedi'i boblogi o'r gweinydd.
Mae gennych ddau ddewis ar gyfer gweithredu nôl data ochr y gweinydd:
- Dylid nôl data ar bob cais.
- Cael data unwaith yn unig drwy gydol y broses adeiladu (safle statig)
Nôl data ar bob cais
Defnyddir y dull getServerSideProps i rendro ochr y gweinydd pob cais. Gellir cynnwys y swyddogaeth hon ar ddiwedd eich ffeil gydran. Bydd Next.js yn llenwi eich propiau cydran yn awtomatig gyda'r gwrthrych getServerSideProps os yw'r swyddogaeth honno'n bresennol yn eich ffeil cydran.
Nôl data ar amser adeiladu
Defnyddir y dull getStaticProps i rendro ochr y gweinydd ar amser adeiladu. Gellir cynnwys y swyddogaeth hon ar ddiwedd eich ffeil gydran. Mae'r dull hwn yn rhedeg cod y gweinydd ac yn anfon cais GET i'r gweinydd, ond dim ond unwaith pan fydd ein prosiect wedi'i orffen.
Pam dylech chi ddysgu Next.js?
Un o'r rhesymau am hyn yw bod Next.js wedi'i adeiladu ar ben React, pecyn cymorth datblygu pen blaen ar gyfer creu rhyngwynebau defnyddwyr dyna yw fy hoff ddewis ar gyfer dylunio apps gwe.
Ond ni fyddai’n ddigon os nad oedd Next.js yn dda ar yr hyn a wnaeth… iawn?
Felly, beth yn union y mae'n ei wneud?
Rhaid inni ddiffinio ychydig o gysyniadau yn gyntaf er mwyn ei ddeall. Enillodd Next.js boblogrwydd oherwydd ei fod wedi datrys problem a oedd gan lawer o ddatblygwyr gwe gydag apiau gwe ochr cleientiaid (yn y porwr). Cafodd y Cymwysiadau Tudalen Sengl (SPAs) hyn brofiad gwell gan nad oedd angen y defnyddiwr arnynt i ail-lwytho'r dudalen ac roeddent yn caniatáu mwy o ryngweithioldeb.
Fodd bynnag, oherwydd bod mwyafrif y deunydd mewn app fel hwn yn dod yn weladwy dim ond pan gaiff ei berfformio yn y porwr, mae ymlusgwyr gwe yn cael amser anodd i ddeall cynnwys testun app o'r fath.
O ganlyniad, er gwaethaf eu poblogrwydd, roedd llawer o SPAs yn parhau i fod yn ddienw i raddau helaeth i beiriannau chwilio mawr fel Google. Mae Next.js bellach yn cynnwys mecanwaith adeiledig mwy cadarn ar gyfer rendro ochr y gweinydd (SSR) o gydrannau React.
Mae Next.js yn galluogi datblygwyr i adeiladu cod JavaScript ar y gweinydd yn ystod y broses adeiladu a darparu HTML sylfaenol, mynegadwy i'r defnyddiwr.
Pros
- Gwych ar gyfer profiad defnyddiwr
- Gwych ar gyfer SEO
- Adeiladwch wefan statig hynod gyflym sy'n ymddwyn fel deinamig
- Hyblygrwydd wrth adeiladu UI & UX.
- Llawer o fanteision datblygu
- Cefnogaeth gymunedol wych
anfanteision
- Mae gan wefannau neu gymwysiadau gyfnod penodol o amser i'w hadeiladu neu eu datblygu.
- Ar gyfer rhai tasgau, mae Next.js yn annigonol. Dylai datblygwyr allu adeiladu llwybrau deinamig gan ddefnyddio offer Node.js.
Casgliad
Fel y gallwch weld, mae Next.js yn symleiddio datblygiad ap React ac yn caniatáu ichi ganolbwyntio ar yr hyn sydd bwysicaf - rhesymeg eich ap a'ch UI. Mae'n cynnwys popeth sydd ei angen i greu apiau cyfoes, llawn frontend ac wedi'u pweru gan API.
Mae hefyd yn briodol ar gyfer prosiectau cynnwys yn unig, megis blogiau a gwefannau busnes, oherwydd ei allu i adeiladu tudalennau HTML statig.
Gyda'r rhifynnau cyfredol, mae Next.js nid yn unig yn cynnal lefel uchel o brofiad datblygwr ond hefyd yn rhoi offer ar gyfer cynyddu perfformiad gweledol a phrofiad y defnyddiwr, gan sicrhau dyfodol disglair i'r fframwaith hwn.
Gadael ymateb