Kazalo[Skrij][Pokaži]
Pri izbiri programske knjižnice ali ogrodja se običajno upoštevajo izkušnje razvijalca.
Ko omenjam »razvijalsko izkušnjo«, mislim na to, kako razvijalci dejansko opravljajo delo. Razvijalci izberejo knjižnice ali ogrodja, ki jih je prijetno uporabljati.
To je eden glavnih razlogov, zakaj imamo zdaj najbolj priljubljene knjižnice in ogrodja. Kot razvijalcem nam ni treba začeti iz nič, če obstajajo obstoječa orodja, ustvarjena za pomoč pri naših nalogah.
Ogrodja so deli programske opreme, ki jih ustvarijo in uporabljajo razvijalci za izdelavo aplikacij, NextJS pa je eden izmed njih.
V tej objavi bomo preučili Nextjs, njegove ključne funkcije in kako ga lahko uporabimo za izdelavo aplikacije. Skočimo takoj.
Kaj je Next.js?
Naprej.js je ogrodje JavaScript za hitro in preprosto izdelavo statičnih spletnih strani in spletnih aplikacij, ki temeljijo na Reactu. Omogoča vam oblikovanje odličnih spletnih aplikacij za različne platforme, vključno z Windows, Linux in Mac.
Morali bi poznati okvir Next.js, če ste le minimalno seznanjeni z react in želite izvedeti več o ekosistemu react.
Čeprav Next.js vsebuje vse, kar potrebujete za začetek, lahko izbirate med NPM in Yarn, JavaScript in TypeScript, CSS in SCSS, statičnim izvozom in uvedbo brez strežnika.
Lastnosti
- Usmerjanje poteka samodejno – ničesar vam ni treba konfigurirati, ker je vsak URL preslikan v datotečni sistem, v datoteke v mapi strani (seveda imate možnosti prilagajanja).
- Komponente ene same datoteke – preprosto je dodati sloge v obseg komponenti z uporabo styled-jsx, ki je popolnoma integriran in ga je izdelala ista ekipa.
- Ponovno nalaganje vroče kode – Ko Next.js zazna spremembo, shranjeno na disku, znova naloži stran.
- Dinamične komponente – module JavaScript in komponente React lahko dinamično naložite.
- Statični izvozi – Next.js vam omogoča izvoz popolnoma statičnega spletnega mesta iz vaše aplikacije z naslednjim ukazom za izvoz.
- Združljivost z okoljem – Next.js se brezhibno integrira z ekosistemi JavaScript, Node in React.
- Samodejno razdeljevanje kod – za upodabljanje strani se uporabljajo samo knjižnice in JavaScript, ki so potrebni. Namesto ustvarjanja ene same datoteke JavaScript, ki vsebuje vso kodo aplikacije, Next.js inteligentno razdeli aplikacijo na številne vire.
Kako ustvariti aplikacijo next.js?
namestitev
Za namestitev in izdelavo projekta Next.js lahko uporabite ukaz node npx.
To bo ustvarilo mapo in vse datoteke, konfiguracije in druge elemente, potrebne za izvajanje projekta Next.js.
Aplikacijo lahko zaženete, ko je ustvarjena.
Strani in usmerjanje
Za upravljanje poti z Next.js nam ni treba uporabiti ogrodja za usmerjanje. Nastavitev usmerjanja z Next.js je preprosta. Ko uporabite ukaz create-next-app za izdelavo nove aplikacije Next.js, aplikacija privzeto ustvari mapo z imenom »pages«.
V tej mapi »strani« vzdržujete svoje poti. Posledično bo vsaka datoteka reakcijskih komponent v podimeniku obravnavana kot ločena pot.
Na primer, če mapa vsebuje te datoteke:
- index.js
- about.js
- aricles.js
Ta datoteka bo samodejno preoblikovana na tri načine:
- Indeksna stran localhost/index
- Stran o localhost/about
- Stran spletnega dnevnika localhost/articles
Spodaj je prikazan primer strani about.js. Kot lahko vidite, o strani ni ničesar. Je preprosto standardna funkcionalna komponenta React.
poti
Če želite narediti ugnezdene poti, morate najprej ustvariti podmapo. Na primer: strani/članki. Ustvarite svojo reakcijsko komponento 'contact.js' v tej mapi in ustvarila bo stran localhost/articles/contact.
Če postavite eno datoteko v pages/articles.js in drugo v pages/articles/index.js. Oba odražata isto pot localhost/blog. V tem primeru bo Next.js samo upodobil datoteko article.js. Kaj pa dinamične poti, pri katerih ima vsaka objava v blogu svojo pot:
- localhost/blog/first-article
- localhost/blog/-drugi-članek
Z zapisom v oklepajih lahko definirate dinamično pot v Next.js. Na primer: pages/article/[slug].js
Poti povezav
Zdaj ste zaključili svojo prvo pot. Predvidevam, da sprašujete, kako povezati strani s temi potmi. Za to boste potrebovali 'next/link'.
Tu je primer domače strani, ki vključuje povezavo do strani O tem:
Če želite povezavo oblikovati, uporabite naslednjo sintakso:
Preusmeri poti
Kaj pa, če morate vsiliti preusmeritev na določeno stran? Na primer, ko pritisnete gumb? To lahko dosežete z uporabo 'router.push':
SEO
Strani v spletnih aplikacijah zahtevajo meta elemente (head) poleg podatkov v telesu HTML. To bo zahtevalo namestitev dodatne zahteve z imenom React Helmet v aplikaciji React.
Komponento Head iz next/head v Next lahko uporabimo za preprosto dodajanje metapodatkov na naše spletne strani, ki bodo prikazane v rezultatih iskanja in vdelanih elementih:
Sestavni deli
Pogosto boste morali razviti komponente ali datoteko postavitve. Na primer komponenta, ki upodablja navbar. Doslej smo uporabljali samo mapo strani. Kaj pa, če vaša komponenta ni mišljena kot stran poti?
Ne želite, da se uporabnik pomakne na stran, kot je localhost/navbar. Če komponento Navbar.js postavite v mapo strani, se bo to zgodilo. Kaj storiti v tej situaciji?
Preprosto shranite vse komponente, ki niso stran, v ločeno mapo. Večina projektov Next.js uporablja vzdevek 'components' in ta mapa je ustvarjena v korenski mapi vašega projekta.
Sestavni del glave
Začetno nalaganje strani upodobi Next.js na strani strežnika. To naredi tako, da spremeni HTML vaše strani. Vključen je razdelek z glavo.
Komponenta Head Next.js se uporablja za podajanje oznak razdelka glave, kot sta naslov in meta. V tem primeru komponente Layout je uporabljena komponenta Head.
Stran Create 404 ni bila najdena
Izvedljivo je narediti svojo stran z napako 404. Morda boste želeli prilagoditi sporočilo ali dodati svojo zasnovo strani. V mapi strani ustvarite datoteko 404.js.
Ko pride do napake 404, bo Next.js samodejno preusmeril na to stran. Tu je primer prilagojene strani 404:
Pridobivanje podatkov s strani strežnika
Namesto prenosa podatkov na strani odjemalca vam Next.js omogoča izvedbo začetne populacije podatkov, kar pomeni pošiljanje strani s podatki, ki so že poseljeni s strežnika.
Za izvajanje pridobivanja podatkov na strani strežnika imate dve možnosti:
- Podatke je treba pridobiti ob vsaki zahtevi.
- Pridobite podatke samo enkrat v celotnem procesu gradnje (statična stran)
Pridobite podatke za vsako zahtevo
Metoda getServerSideProps se uporablja za upodabljanje vsake zahteve na strani strežnika. To funkcijo lahko vključite na konec vaše komponente komponente. Next.js bo samodejno zapolnil vaše rekvizite komponente z objektom getServerSideProps, če je ta funkcija prisotna v vaši komponentni datoteki.
Pridobi podatke v času gradnje
Metoda getStaticProps se uporablja za upodabljanje na strani strežnika v času gradnje. To funkcijo lahko vključite na konec vaše komponente komponente. Ta metoda zažene kodo strežnika in strežniku pošlje zahtevo GET, vendar le enkrat, ko je naš projekt končan.
Zakaj bi se morali naučiti Next.js?
Eden od razlogov za to je, ker je Next.js zgrajen na vrhu Reacta, kompleta sprednjih razvojnih orodij za ustvarjanje uporabniških vmesnikov ki so moja najljubša izbira za oblikovanje spletnih aplikacij.
Vendar ne bi bilo dovolj, če Next.js ne bi bil dober v tem, kar počne ... kajne?
Torej, kaj točno počne?
Najprej moramo definirati nekaj pojmov, da bi to lahko razumeli. Next.js je postal priljubljen, ker je rešil težavo, ki so jo imeli številni spletni razvijalci s spletnimi aplikacijami na strani odjemalca (v brskalniku). Te enostranske aplikacije (SPA) so imele boljšo izkušnjo, saj uporabniku ni bilo treba znova naložiti strani in so omogočile večjo interaktivnost.
Ker pa večina gradiva v aplikaciji, kot je ta, postane vidna šele, ko se izvaja v brskalniku, spletni pajki težko razumejo besedilno vsebino takšne aplikacije.
Posledično so številni SPA kljub svoji priljubljenosti ostali večinoma anonimni za velike iskalnike, kot je Google. Next.js zdaj vključuje robustnejši vgrajen mehanizem za strežniško upodabljanje (SSR) komponent React.
Next.js omogoča razvijalcem, da sestavijo kodo JavaScript na strežniku med gradnjo in uporabniku zagotovijo osnovni HTML, ki ga je mogoče indeksirati.
Prednosti
- Odlično za uporabniško izkušnjo
- Odlično za SEO
- Zgradite super hitro statično spletno mesto, ki se obnaša kot dinamično
- Fleksibilnost pri ustvarjanju uporabniškega vmesnika in UX.
- Številne razvojne prednosti
- Velika podpora skupnosti
Proti
- Spletna mesta ali aplikacije imajo določen čas za izdelavo ali razvoj.
- Za določene naloge je Next.js neustrezen. Razvijalci bi morali imeti možnost konstruirati dinamične poti z orodji Node.js.
zaključek
Kot lahko vidite, Next.js poenostavlja razvoj aplikacije React in vam omogoča, da se osredotočite na tisto, kar je najpomembnejše – logiko vaše aplikacije in uporabniški vmesnik. Vključuje vse, kar je potrebno za ustvarjanje sodobnih aplikacij, bogatih s frontendom in API-ji.
Primeren je tudi za projekte samo z vsebino, kot so blogi in poslovna spletna mesta, zaradi svoje zmožnosti gradnje statičnih strani HTML.
S trenutnimi izdajami Next.js ne le ohranja visoko raven razvijalske izkušnje, ampak ponuja tudi orodja za povečanje vizualne zmogljivosti in uporabniške izkušnje, kar zagotavlja svetlo prihodnost tega okvira.
Pustite Odgovori