Enhavtabelo[Kaŝi][Montri]
Kiam oni elektas programaran bibliotekon aŭ kadron, oni kutime konsideras la sperton de la programisto.
Kiam mi mencias "sperto de programistoj", mi aludas al kiel programistoj efektive faras la laboron. Programistoj elektas bibliotekojn aŭ kadrojn, kiuj estas agrablaj uzi.
Ĉi tio estas unu el la ĉefaj kialoj, kial ni nun havas la plej popularajn bibliotekojn kaj kadrojn. Kiel programistoj, ni ne devas komenci de nulo kiam ekzistas ekzistantaj iloj kreitaj por helpi nin kun niaj taskoj.
Kadroj estas programoj kreitaj kaj uzataj de programistoj por konstrui aplikaĵojn, kaj NextJS estas unu el ili.
En ĉi tiu afiŝo, ni trarigardos Nextjs, ĝiajn ĉefajn funkciojn, kaj kiel ni povas uzi ĝin por konstrui aplikaĵon. Ni ensaltu tuj.
Kio estas Next.js?
Sekva.js estas JavaScript-kadro por rapide kaj facile konstrui senmovajn retpaĝojn kaj retajn aplikaĵojn bazitajn sur React. Ĝi permesas vin desegni bonegajn TTT-apojn por diversaj platformoj, inkluzive de Vindozo, Linukso kaj Mac.
Vi devus koni la kadron Next.js se vi havas minimuman familiarecon kun react kaj volas lerni pli pri la react-ekosistemo.
Kvankam Next.js venas kun ĉio, kion vi bezonas por komenci, vi povas elekti inter NPM kaj Yarn, JavaScript kaj TypeScript, CSS kaj SCSS, senmovan eksporton kaj senservila disfaldi.
Trajtoj
- Envojigo estas farita aŭtomate – Vi ne bezonas agordi ion ajn ĉar iu ajn URL estas mapita al la dosiersistemo, al dosieroj en la paĝa dosierujo (vi havas personigo-opciojn, kompreneble).
- Komponantoj de Ununura Dosiero - Estas simple aldoni stilojn ampleksitaj al la komponanto uzante styled-jsx, kiu estas tute integrita kaj produktita de la sama teamo.
- Reŝargi Varman Kodon - Kiam Next.js detektas modifon konservitan al disko, ĝi reŝargas la paĝon.
- Dinamikaj Komponentoj - Vi povas dinamike ŝargi JavaScript-modulojn kaj React Komponantojn.
- Senmovaj eksportoj - Next.js permesas eksporti tute senmovan retejon de via programo per la sekva eksporta komando.
- Kongruo kun la Medio - Next.js integriĝas perfekte kun la ekosistemoj JavaScript, Node kaj React.
- Aŭtomate disigo de kodoj - Nur la bibliotekoj kaj JavaScript necesaj estas uzataj por bildigi paĝojn. Anstataŭ krei ununuran JavaScript-dosieron enhavantan la tutan kodon de la programo, Next.js inteligente dividas la apon en multajn rimedojn.
Kiel krei next.js-aplikaĵon?
instalado
Vi povas uzi la nodan komandon npx por instali kaj konstrui Next.js-projekton.
Ĉi tio generos dosierujon kaj ĉiujn dosierojn, agordojn kaj aliajn erojn necesajn por ruli Next.js-projekton.
Vi povas lanĉi la apon post kiam ĝi estas kreita.
Paĝoj & Enrutado
Por pritrakti itinerojn kun Next.js, ni ne bezonas uzi vojkadron. Voji kun Next.js estas facile agordi. Kiam vi uzas la komandon create-next-app por konstrui novan Next.js-apon, la apo kreas dosierujon nomatan 'paĝoj' defaŭlte.
Ĉi tiu dosierujo "paĝoj" estas kie vi konservas viajn itinerojn. Kiel rezulto, ĉiu reagas komponan dosieron en la subdosierujo estos pritraktata kiel aparta itinero.
Ekzemple, se la dosierujo enhavas tiujn dosierojn:
- indekso.js
- pri.js
- aricles.js
Ĉi tiu dosiero estos aŭtomate transformita en tri manieroj:
- La indeksa paĝo localhost/index
- La pri paĝo localhost/pri
- La blogpaĝo localhost/artikoloj
Ekzemplo de paĝo pri.js estas montrita sube. Nenio estas provizita pri la paĝo, kiel vi povas vidi. Ĝi estas simple norma React-funkcia komponanto.
Vojoj
Por fari nestitajn itinerojn, vi unue devas establi subdosierujon. Ekzemple: paĝoj/artikoloj. Kreu vian 'contact.js' reagi komponenton ene de tiu dosierujo, kaj ĝi generos la paĝon localhost/articles/contact.
Se vi metas unu dosieron en pages/articles.js kaj alian en pages/articles/index.js. Ambaŭ reflektas la saman vojon lokagastiganto/blogo. En ĉi tiu situacio, Next.js nur redonos la article.js-dosieron. Kio pri dinamikaj itineroj, en kiuj ĉiu blogaĵo havas sian propran vojon:
- lokagastiganto/blogo/unua-artikolo
- localhost/blogo/-dua-artikolo
Uzante la krampojn, vi povas difini dinamikan itineron en Next.js. Ekzemple: paĝoj/artikolo/[slug].js
Ligaj Itineroj
Vi nun finis vian unuan itineron. Mi supozas, ke vi demandas kiel konekti paĝojn al tiuj itineroj. Vi bezonos 'next/link' por fari tion.
Jen ekzemplo de hejmpaĝo kiu inkluzivas ligilon al la paĝo Pri:
Se vi volas stiligi la ligilon, uzu la jenan sintakson:
Alidirekti Itineroj
Kio se vi bezonas devigi alidirektilon al certa paĝo? Ekzemple, kiam butono estas premata? Vi povas plenumi ĉi tion uzante 'router.push':
SEO
Paĝoj en TTT-aplikoj postulas meta-(kapajn) elementojn krom datumoj ene de la HTML-korpo. Ĉi tio necesos la instaladon de ekstra postulo nomita React Helmet en React Apliko.
Ni povas uzi la Head-komponenton de next/head en Next por facile aldoni metadatumojn al niaj retpaĝoj, kiuj estos montrataj en serĉrezultoj kaj enkonstruoj:
komponantoj
Vi ofte devos evoluigi komponantojn aŭ aranĝan dosieron. Ekzemple, komponanto kiu prezentas la navbaron. Ni ĵus uzis la paĝdosierujon ĝis nun. Kio se via komponanto ne estas intencita esti vojpaĝo?
Vi ne volas, ke la uzanto navigu al paĝo kiel loka gastiganto/navbaro. Se vi metas la komponanton Navbar.js en la paĝan dosierujon, tio okazos. Kion vi faru en la situacio?
Simple konservu ĉiujn viajn "ne paĝajn" komponantojn en aparta dosierujo. Plej multaj projektoj Next.js uzas la kromnomon 'komponentoj' kaj ĉi tiu dosierujo estas generita en la radika dosierujo de via projekto.
Kapa komponanto
La komenca paĝa ŝarĝo estas prezentita de Next.js ĉe la servilo. Ĝi faras tion modifante la HTML de via paĝo. La kaplinio sekcio estas inkluzivita.
La komponanto Next.js Head estas uzata por doni kapliniajn sekciajn etikedojn kiel titolon kaj meta. La Kapa komponanto estas uzata en ĉi tiu ekzemplo de Aranĝo-komponento.
Krei 404 paĝon ne trovita
Estas fareble fari vian propran 404-erarpaĝon. Vi eble volas personecigi la mesaĝon aŭ aldoni vian propran paĝan dezajnon. En la dosierujo de paĝoj, kreu la dosieron 404.js.
Kiam 404-eraro okazas, Next.js aŭtomate redirektos al ĉi tiu paĝo. Jen ekzemplo de personigita 404 paĝo:
Prenado de datumoj de servilo-flanko
Anstataŭ elŝuti datumojn ĉe la kliento, Next.js permesas vin fari komencan datuman loĝantaron, kio implicas sendi la paĝon kun la datumoj jam plenigitaj de la servilo.
Vi havas du elektojn por efektivigi servilflankan datuman alportadon:
- Datumoj devus esti prenitaj sur ĉiu peto.
- Akiru datumojn nur unufoje dum la konstruprocezo (senmova retejo)
Prenu datumojn pri ĉiu peto
La getServerSideProps-metodo estas uzata por servilflanka redoni ĉiun peton. Ĉi tiu funkcio povas esti inkludita ĉe la fino de via kompona dosiero. Next.js aŭtomate plenigos viajn komponajn propojn per la objekto getServerSideProps se tiu funkcio ĉeestas en via kompona dosiero.
Prenu datumojn je konstrua tempo
La getStaticProps-metodo estas uzata por redoni servilflankon je konstrua tempo. Ĉi tiu funkcio povas esti inkludita ĉe la fino de via kompona dosiero. Ĉi tiu metodo rulas la servilan kodon kaj sendas GET peton al la servilo, sed nur unufoje kiam nia projekto estas finita.
Kial vi devus lerni Next.js?
Unu el la kialoj de tio estas ĉar Next.js estas konstruita sur React, antaŭfina ilaro por kreante uzantinterfacojn tio estas mia plej ŝatata elekto por desegni TTT-aplikaĵojn.
Sed ne sufiĉus, se Next.js ne estus lerta pri tio, kion ĝi faris... ĉu ne?
Do, kion ĝuste ĝi faras?
Ni devas unue difini kelkajn konceptojn por kompreni ĝin. Next.js akiris popularecon ĉar ĝi solvis problemon, kiun multaj retejprogramistoj havis kun klientflankaj TTT-aplikoj (en la retumilo). Ĉi tiuj Unupaĝaj Aplikoj (SPAoj) havis pli bonan sperton ĉar ili ne bezonis la uzanton por reŝargi la paĝon kaj permesis pli da interagado.
Tamen, ĉar la plej granda parto de la materialo en tia aplikaĵo iĝas videbla nur kiam ĝi estas farita en la retumilo, retumiloj malfacilas kompreni la tekstan enhavon de tia programo.
Kiel rezulto, malgraŭ ilia populareco, multaj SPAoj restis plejparte anonimaj al grandaj serĉiloj kiel ekzemple Guglo. Next.js nun inkluzivas pli fortikan enkonstruitan mekanismon por servilflanka bildigo (SSR) de React-komponentoj.
Next.js permesas al programistoj konstrui JavaScript-kodon sur la servilo dum la konstruprocezo kaj disponigi bazan, indekseblan HTML al la uzanto.
avantaĝoj
- Bonega por uzanto-sperto
- Bonega por SEO
- Konstruu superrapidan statikan retejon, kiu kondutas kiel dinamika
- Fleksebleco en konstruado de UI kaj UX.
- Multaj avantaĝoj de disvolviĝo
- Bonega komunuma subteno
contras
- Retejoj aŭ aplikoj havas certan tempon por konstrui aŭ disvolvi.
- Por certaj taskoj, Next.js estas neadekvata. Programistoj devus povi konstrui dinamikajn itinerojn per Node.js-iloj.
konkludo
Kiel vi povas vidi, Next.js simpligas la disvolviĝon de la aplikaĵo React kaj permesas vin koncentriĝi pri tio, kio plej gravas - via aplika logiko kaj UI. Ĝi inkluzivas ĉion necesan por krei nuntempajn, frontend-riĉajn kaj API-funkciigitajn apojn.
Ĝi ankaŭ taŭgas por nurenhavaj projektoj, kiel blogoj kaj komercaj retejoj, pro sia kapablo konstrui senmovajn HTML-paĝojn.
Kun la nunaj eldonoj, Next.js ne nur konservas altnivelan de sperto de programisto, sed ankaŭ donas ilojn por pliigi vidan rendimenton kaj sperton de uzanto, certigante brilan estontecon por ĉi tiu kadro.
Lasi Respondon