Table of Contents[Kache][Montre]
Lè w ap chwazi yon bibliyotèk oswa yon kad lojisyèl, se eksperyans pwomotè a anjeneral pran an kont.
Lè mwen mansyone "eksperyans devlopè," mwen refere li a ki jan devlopè aktyèlman fè travay la. Devlopè yo chwazi bibliyotèk oswa kad ki agreyab pou itilize.
Sa a se youn nan rezon prensipal poukisa nou kounye a gen bibliyotèk yo ak kad ki pi popilè. Kòm devlopè, nou pa oblije kòmanse nan grafouyen lè gen zouti ki egziste deja kreye pou ede nou ak travay nou yo.
Frameworks se moso lojisyèl ke devlopè yo kreye epi itilize pou konstwi aplikasyon, e NextJS se youn nan yo.
Nan pòs sa a, nou pral ale sou Nextjs, karakteristik kle li yo, ak kijan nou ka itilize li pou konstwi yon aplikasyon. Ann sote dwat nan.
Ki sa ki Next.js?
Next.js se yon kad JavaScript pou konstwi rapid ak fasilman paj wèb estatik ak aplikasyon sou entènèt ki baze sou React. Li pèmèt ou desine gwo aplikasyon Web pou yon varyete de tribin, tankou Windows, Linux, ak Mac.
Ou ta dwe abitye ak Next.js fondasyon an si ou gen yon minimòm abitye ak reyaksyon epi ou vle aprann plis sou ekosistèm react la.
Menmsi Next.js vini ak tout sa ou bezwen pou kòmanse, ou ka chwazi ant NPM ak Fil, JavaScript ak TypeScript, CSS ak SCSS, ekspòtasyon estatik, ak deplwaman san sèvè.
karakteristik
- Wout se fè otomatikman - Ou pa bezwen konfigirasyon anyen paske nenpòt URL trase nan sistèm fichye a, nan dosye ki nan katab la paj (ou gen opsyon personnalisation, nan kou).
- Konpozan nan yon dosye sèl - Li senp pou ajoute estil skoped nan eleman lè l sèvi avèk styled-jsx, ki se totalman entegre ak pwodwi pa menm ekip la.
- Rechaje yon kòd cho - Lè Next.js detekte yon modifikasyon sove sou disk, li rechaje paj la.
- Konpozan dinamik - Ou ka dinamikman chaje modil JavaScript ak React Components.
- Ekspòtasyon estatik - Next.js pèmèt ou ekspòte yon sit konplètman estatik soti nan app ou a ak pwochen lòd ekspòtasyon an.
- Konpatibilite ak Anviwònman an - Next.js entegre san pwoblèm ak ekosistèm JavaScript, Node, ak React.
- Divize Kòd Otomatikman - Se sèlman bibliyotèk yo ak JavaScript ki nesesè yo itilize pou rann paj yo. Olye pou yo kreye yon sèl fichye JavaScript ki gen tout kòd aplikasyon an, Next.js entèlijans divize aplikasyon an an plizyè resous.
Ki jan yo kreye yon aplikasyon next.js?
Enstalasyon
Ou ka sèvi ak lòd npx la pou enstale ak bati yon pwojè Next.js.
Sa a pral jenere yon katab ak tout fichye yo, konfigirasyon, ak lòt atik ki nesesè yo kouri yon pwojè Next.js.
Ou ka lanse aplikasyon an yon fwa li te pwodwi.
Paj & Routage
Pou okipe wout ak Next.js, nou pa bezwen anplwaye yon fondasyon routage. Wout ak Next.js se yon briz yo mete kanpe. Lè w itilize kòmandman create-next-app pou konstwi yon nouvo aplikasyon Next.js, aplikasyon an kreye yon katab ki rele 'paj' pa default.
Katab 'paj' sa a se kote ou kenbe wout ou yo. Kòm yon rezilta, chak fichye konpozan reyaji nan sou-anyè a pral okipe kòm yon wout separe.
Pou egzanp, si katab la gen dosye sa yo:
- index.js
- sou.js
- aricles.js
Fichye sa a pral transfòme otomatikman nan twa fason:
- Paj endèks localhost/index la
- Paj la sou localhost/sou
- Paj blog localhost/atik yo
Yo montre yon egzanp yon paj about.js anba a. Pa gen anyen ki bay sou paj la, jan ou ka wè. Li se tou senpleman yon eleman fonksyonèl React estanda.
wout
Pou fè wout imbrike, ou dwe premye etabli yon subfolder. Pa egzanp: paj/atik. Kreye eleman reyaksyon 'contact.js' ou nan katab sa a, epi li pral jenere paj localhost/articles/contact.
Si ou mete yon dosye nan pages/articles.js ak yon lòt nan pages/articles/index.js. Tou de reflete menm chemen localhost/blog. Nan sitiyasyon sa a, Next.js pral jis rann fichye article.js la. Ki sa ki sou wout dinamik, kote chak pòs blog gen pwòp chemen li yo:
- localhost/blog/premye-atik
- localhost/blog/-dezyèm-atik
Sèvi ak notasyon parantèz la, ou ka defini yon wout dinamik nan Next.js. Pa egzanp: paj/atik/[slug].js
Wout Link
Kounye a ou te konplete premye wout ou. Mwen devine w ap mande kijan pou konekte paj ak wout sa yo. Ou pral bezwen 'next/link' pou fè sa.
Men yon egzanp yon paj lakay ki gen yon lyen ki mennen nan paj Konsènan:
Si ou vle style lyen an, sèvi ak sentaks sa a:
Redireksyon Wout yo
E si ou bezwen fòse yon redireksyon nan yon paj sèten? Pou egzanp, lè yo peze yon bouton? Ou ka akonpli sa lè w itilize 'router.push':
SEO
Paj nan aplikasyon entènèt mande pou meta (tèt) eleman anplis done ki nan kò HTML la. Sa pral nesesite enstalasyon yon kondisyon siplemantè ki rele React Helmet nan yon Aplikasyon React.
Nou ka itilize eleman Head ki soti nan pwochen/tèt nan Next pou fasilman ajoute metadata nan paj wèb nou yo ki pral parèt nan rezilta rechèch la ak entegre:
Konpozan
Ou pral souvan bezwen devlope eleman oswa yon dosye layout. Pou egzanp, yon eleman ki rann navbar la. Nou jis itilize katab paj la jiskaprezan. E si eleman ou a pa vle di ke yo dwe yon paj wout?
Ou pa vle itilizatè a navige nan yon paj tankou yon localhost/navbar. Si ou mete eleman Navbar.js nan katab paj la, se sa ki pral rive. Kisa ou ta dwe fè nan sitiyasyon an?
Senpleman sere tout eleman 'pa yon paj' ou yo nan yon katab separe. Pifò pwojè Next.js yo sèvi ak 'konpozan' yo, epi katab sa a pwodui nan katab rasin pwojè ou a.
Eleman tèt
Next.js rann chaj paj inisyal la sou bò sèvè a. Li fè sa pa modifye HTML paj ou a. Seksyon header la enkli.
Yo itilize eleman Next.js Head pou bay tags seksyon header tankou tit ak meta. Yo itilize eleman Head nan egzanp sa a nan yon eleman Layout.
Kreye paj 404 pa jwenn
Li posib pou fè pwòp paj erè 404 ou. Ou ta ka vle personnaliser mesaj la oswa ajoute pwòp konsepsyon paj ou a. Nan katab paj la, kreye fichye 404.js la.
Lè yon erè 404 rive, Next.js pral otomatikman redireksyon sou paj sa a. Men yon egzanp yon paj 404 pèsonalize:
Chèche done ki soti nan bò sèvè
Olye pou yo telechaje done sou bò kliyan an, Next.js pèmèt ou fè yon premye popilasyon done, ki vle di voye paj la ak done yo deja peple soti nan sèvè a.
Ou gen de chwa pou mete ann aplikasyon pou chèche done bò sèvè:
- Done yo ta dwe chache sou chak demann.
- Jwenn done sèlman yon fwa pandan tout pwosesis konstriksyon an (sit estatik)
Chèche done sou chak demann
Metòd getServerSideProps yo itilize pou rann chak demann bò sèvè. Fonksyon sa a ka enkli nan fen dosye eleman ou a. Next.js pral otomatikman peple akseswar eleman ou yo ak objè getServerSideProps la si fonksyon sa a prezan nan dosye eleman ou a.
Chèche done nan moman konstriksyon
Metòd getStaticProps yo itilize pou rann bò sèvè nan moman konstriksyon. Fonksyon sa a ka enkli nan fen dosye eleman ou a. Metòd sa a kouri kòd sèvè a epi voye yon demann GET nan sèvè a, men se sèlman yon fwa lè pwojè nou an fini.
Poukisa ou ta dwe aprann Next.js?
Youn nan rezon ki fè sa a se paske Next.js bati sou tèt React, yon zouti devlopman front-end pou kreye entèfas itilizatè sa se chwa mwen pi renmen pou desine aplikasyon entènèt.
Men, li pa ta ase si Next.js pa t 'bon nan sa li te fè ... dwa?
Se konsa, ki sa egzakteman li fè?
Nou dwe premye defini kèk konsèp yo nan lòd yo konprann li. Next.js te vin popilarite paske li te rezoud yon pwoblèm ke anpil devlopè entènèt te genyen ak aplikasyon entènèt bò kliyan (nan navigatè a). Aplikasyon pou yon sèl paj sa yo (SPA) te gen yon pi bon eksperyans paske yo pa t 'bezwen itilizatè a rechaje paj la ak pèmèt pou plis entèaktif.
Sepandan, paske gwo materyèl la nan yon aplikasyon tankou sa a vin vizib sèlman lè li fèt nan navigatè a, crawlers entènèt yo gen yon moman difisil pou konprann kontni tèks nan yon aplikasyon konsa.
Kòm yon rezilta, malgre popilarite yo, anpil SPA te rete lajman anonim pou gwo motè rechèch tankou Google. Next.js kounye a gen ladann yon mekanis entegre ki pi solid pou rann bò sèvè (SSR) nan eleman React.
Next.js pèmèt devlopè yo konstwi kòd JavaScript sou sèvè a pandan pwosesis konstriksyon an epi bay itilizatè a HTML debaz, endeksab.
Pou
- Gran pou itilizatè-eksperyans
- Gwo pou SEO
- Bati yon sit entènèt estatik super-rapid ki konpòte li tankou yon dinamik
- Fleksibilite nan bati UI & UX.
- Anpil avantaj devlopman
- Gwo sipò kominote a
Kont
- Sit wèb oswa aplikasyon yo gen yon sèten kantite tan pou konstwi oswa devlope.
- Pou sèten travay, Next.js pa apwopriye. Devlopè yo ta dwe kapab konstwi wout dinamik lè l sèvi avèk zouti Node.js.
konklizyon
Kòm ou ka wè, Next.js senplifye devlopman app React epi li pèmèt ou konsantre sou sa ki pi enpòtan - lojik app ou a ak UI. Li gen ladann tout bagay ki nesesè pou kreye aplikasyon kontanporen, ki rich ak API ki mache ak pisans.
Li apwopriye tou pou pwojè kontni sèlman, tankou blog ak sit entènèt biznis, akòz kapasite li pou konstwi paj HTML estatik.
Avèk edisyon aktyèl yo, Next.js pa sèlman kenbe yon wo nivo de eksperyans pwomotè, men tou bay zouti pou ogmante pèfòmans vizyèl ak eksperyans itilizatè, asire yon avni briyan pou kad sa a.
Kite yon Reply