INHOUDSOPGAWE[Versteek][Wys]
Wanneer 'n sagtewarebiblioteek of -raamwerk gekies word, word die ontwikkelaarervaring gewoonlik in ag geneem.
Wanneer ek "ontwikkelaarervaring" noem, verwys ek na hoe ontwikkelaars die werk eintlik doen. Ontwikkelaars kies biblioteke of raamwerke wat aangenaam is om te gebruik.
Dit is een van die primêre redes waarom ons nou die gewildste biblioteke en raamwerke het. As ontwikkelaars hoef ons nie van voor af te begin as daar bestaande nutsmiddels geskep is om ons met ons take te help nie.
Raamwerke is stukke sagteware wat deur ontwikkelaars geskep en gebruik word om toepassings te bou, en NextJS is een daarvan.
In hierdie pos gaan ons oor Nextjs, sy belangrikste kenmerke, en hoe ons dit kan gebruik om 'n toepassing te bou. Kom ons spring dadelik in.
Wat is Next.js?
Volgende.js is 'n JavaScript-raamwerk vir die vinnige en maklike bou van statiese webblaaie en React-gebaseerde aanlyntoepassings. Dit laat jou toe om wonderlike webtoepassings vir 'n verskeidenheid platforms te ontwerp, insluitend Windows, Linux en Mac.
Jy behoort vertroud te wees met die Next.js-raamwerk as jy minimale vertroud is met react en meer wil leer oor die react-ekosisteem.
Al kom Next.js met alles wat jy nodig het om aan die gang te kom, kan jy kies tussen NPM en Yarn, JavaScript en TypeScript, CSS en SCSS, statiese uitvoer en bedienerlose ontplooiing.
Kenmerke
- Roetering word outomaties gedoen – Jy hoef niks op te stel nie, want enige URL is gekarteer na die lêerstelsel, na lêers in die bladsye-lêergids (jy het natuurlik aanpassingsopsies).
- Komponente van 'n enkele lêer – Dit is maklik om style by die komponent by te voeg deur gebruik te maak van styled-jsx, wat heeltemal geïntegreer en deur dieselfde span vervaardig is.
- Herlaai van 'n warm kode - Wanneer Next.js 'n wysiging bespeur wat op skyf gestoor is, herlaai dit die bladsy.
- Dinamiese komponente – Jy kan JavaScript-modules en Reageer-komponente dinamies laai.
- Statiese uitvoere - Next.js laat jou toe om 'n heeltemal statiese werf vanaf jou toepassing uit te voer met die volgende uitvoeropdrag.
- Verenigbaarheid met die omgewing – Next.js integreer naatloos met die JavaScript-, Node- en React-ekosisteme.
- Verdeel kodes outomaties – Slegs die biblioteke en JavaScript wat benodig word, word gebruik om bladsye weer te gee. In plaas daarvan om 'n enkele JavaScript-lêer te skep wat al die program se kode bevat, verdeel Next.js die toepassing intelligent in baie hulpbronne.
Hoe om 'n next.js-toepassing te skep?
installasie
Jy kan die node npx-opdrag gebruik om 'n Next.js-projek te installeer en te bou.
Dit sal 'n gids genereer en al die lêers, konfigurasies en ander items wat nodig is om 'n Next.js-projek te laat loop.
Jy kan die toepassing begin sodra dit gegenereer is.
Bladsye en roetes
Om roetes met Next.js te hanteer, hoef ons nie 'n roeteraamwerk te gebruik nie. Roetering met Next.js is 'n briesie om op te stel. Wanneer jy die create-next-app-opdrag gebruik om 'n nuwe Next.js-toepassing te bou, skep die toepassing by verstek 'n vouer genaamd 'bladsye'.
Hierdie 'bladsye'-lêergids is waar jy jou roetes onderhou. As gevolg hiervan, sal elke reageer-komponent-lêer in die subgids as 'n aparte roete hanteer word.
Byvoorbeeld, as die gids daardie lêers bevat:
- index.js
- oor.js
- aricles.js
Hierdie lêer sal outomaties op drie maniere getransformeer word:
- Die indeksbladsy localhost/index
- Die oor bladsy localhost/about
- Die blogbladsy localhost/artikels
'n Voorbeeld van 'n about.js-bladsy word hieronder getoon. Niks word oor die bladsy verskaf nie, soos jy kan sien. Dit is bloot 'n standaard React-funksionele komponent.
roetes
Om geneste roetes te maak, moet jy eers 'n subgids vestig. Byvoorbeeld: bladsye/artikels. Skep jou 'contact.js'-reaksiekomponent binne daardie vouer, en dit sal die bladsy localhost/articles/contact genereer.
As jy een lêer in pages/articles.js en 'n ander in pages/articles/index.js plaas. Albei weerspieël dieselfde pad localhost/blog. In hierdie situasie sal Next.js net die article.js-lêer weergee. Wat van dinamiese roetes, waarin elke blogplasing sy eie pad het:
- localhost/blog/eerste artikel
- localhost/blog/-tweede-artikel
Deur die hakiesnotasie te gebruik, kan jy 'n dinamiese roete in Next.js definieer. Byvoorbeeld: bladsye/artikel/[slug].js
Koppel roetes
Jy het nou jou eerste roete voltooi. Ek raai jy vra hoe om bladsye aan daardie roetes te koppel. Jy sal 'next/link' nodig hê om dit te doen.
Hier is 'n voorbeeld van 'n tuisblad wat 'n skakel na die Meer oor-bladsy insluit:
As jy die skakel wil stileer, gebruik die volgende sintaksis:
Herlei roetes
Wat as jy 'n herleiding na 'n sekere bladsy moet dwing? Byvoorbeeld, wanneer 'n knoppie gedruk word? Jy kan dit bereik deur 'router.push' te gebruik:
SEO
Bladsye in webtoepassings vereis meta (kop) elemente bykomend tot data binne die HTML liggaam. Dit sal die installering van 'n ekstra vereiste genaamd React Helmet in 'n React-toepassing noodsaak.
Ons kan die Hoof-komponent van volgende/kop in Volgende gebruik om maklik metadata by ons webblaaie te voeg wat in soekresultate en inbeddings vertoon sal word:
komponente
Jy sal gereeld komponente of 'n uitleglêer moet ontwikkel. Byvoorbeeld, 'n komponent wat die navigasiebalk weergee. Ons het tot dusver net die bladsye-lêergids gebruik. Wat as jou komponent nie bedoel is om 'n roetebladsy te wees nie?
U wil nie hê dat die gebruiker na 'n bladsy soos 'n localhost/navbar moet navigeer nie. As jy die Navbar.js-komponent in die bladsye-lêergids plaas, is dit wat sal gebeur. Wat moet jy doen in die situasie?
Stoor eenvoudig al jou 'nie 'n bladsy'-komponente in 'n aparte vouer. Die meeste Next.js-projekte gebruik die bynaam 'komponente', en hierdie vouer word in die wortellêergids van jou projek gegenereer.
Kop komponent
Die aanvanklike bladsylading word deur Next.js aan die bedienerkant gelewer. Dit doen dit deur die HTML van jou bladsy te wysig. Die kop-afdeling is ingesluit.
Die Next.js Head-komponent word gebruik om kop-afdeling-etikette soos titel en meta te gee. Die Hoof-komponent word in hierdie voorbeeld van 'n uitleg-komponent gebruik.
Skep 404 bladsy nie gevind nie
Dit is moontlik om jou eie 404-foutbladsy te maak. Jy wil dalk die boodskap aanpas of jou eie bladsyontwerp byvoeg. Skep die 404.js-lêer in die bladsye-lêergids.
Wanneer 'n 404-fout voorkom, sal Next.js outomaties na hierdie bladsy herlei. Hier is 'n voorbeeld van 'n persoonlike 404-bladsy:
Data haal van bedienerkant af
In plaas daarvan om data aan die kliëntkant af te laai, laat Next.js jou toe om 'n aanvanklike datapopulasie uit te voer, wat impliseer dat die bladsy gestuur word met die data wat reeds vanaf die bediener gevul is.
Jy het twee keuses vir die implementering van bediener-kant data haal:
- Data moet op elke versoek gehaal word.
- Kry data net een keer regdeur die konstruksieproses (statiese webwerf)
Haal data op elke versoek
Die getServerSideProps-metode word gebruik om elke versoek aan die bedienerkant te lewer. Hierdie funksie kan aan die einde van jou komponentlêer ingesluit word. Next.js sal outomaties jou komponent rekwisiete vul met die getServerSideProps voorwerp as daardie funksie teenwoordig is in jou komponent lêer.
Haal data tydens boutyd
Die getStaticProps-metode word gebruik om bedienerkant tydens boutyd weer te gee. Hierdie funksie kan aan die einde van jou komponentlêer ingesluit word. Hierdie metode loop die bedienerkode en stuur 'n GET-versoek na die bediener, maar net een keer wanneer ons projek klaar is.
Hoekom moet jy Next.js leer?
Een van die redes hiervoor is omdat Next.js bo-op React gebou is, 'n front-end ontwikkelingshulpmiddelstel vir die skep van gebruikerskoppelvlakke dit is my gunsteling keuse vir die ontwerp van webtoepassings.
Maar dit sou nie genoeg wees as Next.js nie goed was in wat dit gedoen het nie ... reg?
So, wat presies doen dit?
Ons moet eers 'n paar begrippe definieer om dit te begryp. Next.js het gewild geword omdat dit 'n probleem opgelos het wat baie webontwikkelaars met kliënt-kant webtoepassings (in die blaaier) gehad het. Hierdie enkelbladsy-toepassings (SPA's) het 'n beter ervaring gehad, aangesien dit nie die gebruiker nodig gehad het om die bladsy te herlaai nie en meer interaktiwiteit moontlik gemaak het.
Omdat die grootste deel van die materiaal in 'n toepassing soos hierdie egter slegs sigbaar word wanneer dit in die blaaier uitgevoer word, vind webkruipers dit moeilik om die teksinhoud van so 'n toepassing te verstaan.
As gevolg hiervan, ondanks hul gewildheid, het baie SPA's grootliks anoniem gebly vir groot soekenjins soos Google. Next.js bevat nou 'n meer robuuste ingeboude meganisme vir bedienerkant-weergawe (SSR) van React-komponente.
Next.js laat ontwikkelaars toe om JavaScript-kode op die bediener te konstrueer tydens die bouproses en basiese, indekseerbare HTML aan die gebruiker te verskaf.
Pros
- Ideaal vir gebruikerservaring
- Ideaal vir SEO
- Bou 'n supervinnige statiese webwerf wat soos 'n dinamiek optree
- Buigsaamheid in die bou van UI en UX.
- Baie ontwikkelingsvoordele
- Groot gemeenskapsondersteuning
Nadele
- Webwerwe of toepassings het 'n sekere hoeveelheid tyd om te bou of te ontwikkel.
- Vir sekere take is Next.js onvoldoende. Ontwikkelaars moet in staat wees om dinamiese roetes te bou deur Node.js-nutsgoed te gebruik.
Gevolgtrekking
Soos jy kan sien, vereenvoudig Next.js React-toepassingsontwikkeling en laat jou toe om te fokus op wat die belangrikste is - jou toepassinglogika en UI. Dit bevat alles wat nodig is om kontemporêre, frontend-ryke en API-aangedrewe toepassings te skep.
Dit is ook geskik vir projekte wat slegs inhoud, soos blogs en besigheidswebwerwe, vanweë die vermoë om statiese HTML-bladsye te bou.
Met die huidige uitgawes handhaaf Next.js nie net 'n hoë vlak van ontwikkelaarervaring nie, maar gee ook gereedskap om visuele werkverrigting en gebruikerservaring te verhoog, wat 'n blink toekoms vir hierdie raamwerk verseker.
Lewer Kommentaar