Sisällysluettelo[Piilottaa][Näytä]
Ohjelmistokirjastoa tai -kehystä valittaessa otetaan yleensä huomioon kehittäjän kokemus.
Kun mainitsen "kehittäjäkokemuksen", tarkoitan sitä, kuinka kehittäjät todella tekevät työn. Kehittäjät valitsevat kirjastot tai puitteet, joita on miellyttävä käyttää.
Tämä on yksi tärkeimmistä syistä, miksi meillä on nyt suosituimmat kirjastot ja puitteet. Kehittäjänä meidän ei tarvitse aloittaa tyhjästä, kun olemassa olevia työkaluja on luotu auttamaan meitä tehtävissämme.
Kehykset ovat ohjelmistoja, joita kehittäjät luovat ja käyttävät sovellusten rakentamiseen, ja NextJS on yksi niistä.
Tässä viestissä käymme läpi Nextjsin, sen tärkeimmät ominaisuudet ja kuinka voimme käyttää sitä sovelluksen rakentamiseen. Hyppäämme sisään.
Mikä on Next.js?
Next.js on JavaScript-kehys staattisten verkkosivujen ja React-pohjaisten verkkosovellusten rakentamiseen nopeasti ja helposti. Sen avulla voit suunnitella upeita verkkosovelluksia useille alustoille, mukaan lukien Windows, Linux ja Mac.
Sinun pitäisi tuntea Next.js-kehys, jos sinulla on vain vähän perehtyneitä reactiin ja haluat oppia lisää react-ekosysteemistä.
Vaikka Next.js:n mukana tulee kaikki mitä tarvitset aloittamiseen, voit valita NPM:n ja Yarnin, JavaScriptin ja TypeScriptin, CSS:n ja SCSS:n, staattisen viennin ja palvelimettoman käyttöönoton välillä.
Ominaisuudet
- Reititys tapahtuu automaattisesti – Sinun ei tarvitse määrittää mitään, koska mikä tahansa URL-osoite on yhdistetty tiedostojärjestelmään, sivut-kansion tiedostoihin (sinulla on tietysti mukautusvaihtoehtoja).
- Yhden tiedoston komponentit – Komponenttiin on helppo lisätä tyylejä käyttämällä styled-jsx:ää, joka on täysin integroitu ja jonka on tuottanut sama tiimi.
- Hot Coden lataaminen uudelleen – Kun Next.js havaitsee levylle tallennetun muutoksen, se lataa sivun uudelleen.
- Dynaamiset komponentit – Voit ladata dynaamisesti JavaScript-moduuleja ja React-komponentteja.
- Staattinen vienti – Next.js:n avulla voit viedä täysin staattisen sivuston sovelluksestasi seuraavalla vientikomennolla.
- Yhteensopivuus ympäristön kanssa – Next.js integroituu saumattomasti JavaScript-, Node- ja React-ekosysteemien kanssa.
- Koodien jakaminen automaattisesti – Sivujen hahmontamiseen käytetään vain tarvittavia kirjastoja ja JavaScriptiä. Sen sijaan, että Next.js loisi yhden JavaScript-tiedoston, joka sisältää koko sovelluksen koodin, se jakaa sovelluksen älykkäästi useisiin resursseihin.
Kuinka luoda next.js-sovellus?
Asennus
Voit käyttää node npx -komentoa Next.js-projektin asentamiseen ja rakentamiseen.
Tämä luo kansion ja kaikki tiedostot, määritykset ja muut kohteet, jotka tarvitaan Next.js-projektin suorittamiseen.
Voit käynnistää sovelluksen, kun se on luotu.
Sivut ja reititys
Reittien käsittelemiseksi Next.js:n avulla meidän ei tarvitse käyttää reitityskehystä. Reititys Next.js:n avulla on helppoa määrittää. Kun käytät Create-next-app -komentoa uuden Next.js-sovelluksen luomiseen, sovellus luo oletuksena kansion nimeltä "sivut".
Tämä "sivut"-kansio on paikka, jossa ylläpidät reittejäsi. Tämän seurauksena kutakin alihakemistossa olevaa reagoi komponenttitiedostoa käsitellään erillisenä reittinä.
Jos kansio sisältää esimerkiksi nämä tiedostot:
- index.js
- about.js
- aricles.js
Tämä tiedosto muunnetaan automaattisesti kolmella tavalla:
- Hakemistosivu localhost/index
- Tietoja-sivu localhost/about
- Blogisivu localhost/articles
Alla on esimerkki about.js-sivusta. Sivusta ei anneta mitään, kuten näette. Se on yksinkertaisesti tavallinen React-toiminnallinen komponentti.
reitit
Sisäkkäisten reittien tekemiseksi sinun on ensin luotava alikansio. Esimerkiksi: sivut/artikkelit. Luo 'contact.js'-reaktiokomponentti kyseiseen kansioon, niin se luo sivun localhost/articles/contact.
Jos laitat yhden tiedoston hakemistoon pages/articles.js ja toisen hakemistoon pages/articles/index.js. Molemmat heijastavat samaa polkua localhost/blog. Tässä tilanteessa Next.js hahmontaa vain article.js-tiedoston. Entä dynaamiset reitit, joissa jokaisella blogikirjoituksella on oma polkunsa:
- localhost/blog/first-artikkeli
- localhost/blog/-toinen-artikkeli
Hakasulkeiden merkinnällä voit määrittää dynaamisen reitin Next.js:ssä. Esimerkiksi: pages/article/[slug].js
Linkki reitit
Olet nyt suorittanut ensimmäisen reittisi. Oletan, että kysyt kuinka yhdistää sivut näihin reitteihin. Tarvitset "seuraava/linkki" tehdäksesi niin.
Tässä on esimerkki kotisivusta, joka sisältää linkin Tietoja-sivulle:
Jos haluat muokata linkin tyyliä, käytä seuraavaa syntaksia:
Uudelleenohjaa reitit
Entä jos sinun täytyy pakottaa uudelleenohjaus tietylle sivulle? Esimerkiksi kun nappia painetaan? Voit suorittaa tämän käyttämällä 'router.push'-komentoa:
SEO
Verkkosovellusten sivut vaativat metaelementtejä (head) HTML-tekstin sisältämien tietojen lisäksi. Tämä edellyttää lisävaatimuksen, nimeltä React Helmet, asentamista React-sovellukseen.
Voimme käyttää Head-komponenttia seuraavasta/head in Next -sivulla lisätäksemme helposti metatietoja verkkosivuillemme, jotka näkyvät hakutuloksissa ja upotetaan:
komponentit
Sinun on usein kehitettävä komponentteja tai asettelutiedosto. Esimerkiksi komponentti, joka hahmontaa navigointipalkin. Olemme vain käyttäneet sivukansiota tähän mennessä. Entä jos komponenttiasi ei ole tarkoitettu reittisivuksi?
Et halua käyttäjän siirtyvän sivulle, kuten localhost/navbar. Jos sijoitat Navbar.js-komponentin sivut-kansioon, niin tapahtuu. Mitä tilanteessa pitäisi tehdä?
Tallenna kaikki "ei sivu" -komponentit erilliseen kansioon. Useimmat Next.js-projektit käyttävät nimimerkkiä "komponentit", ja tämä kansio luodaan projektisi juurikansioon.
Pään komponentti
Ensimmäinen sivulataus suoritetaan Next.js:n avulla palvelinpuolella. Se tekee tämän muokkaamalla sivusi HTML-koodia. Otsikkoosa sisältyy hintaan.
Next.js Head -komponenttia käytetään otsikkoosion tunnisteiden, kuten otsikon ja metan, antamiseen. Head-komponenttia käytetään tässä Layout-komponentin esimerkissä.
Luo 404 -sivua ei löydy
On mahdollista tehdä oma 404-virhesivu. Voit halutessasi muokata viestiä tai lisätä oman sivusi suunnittelun. Luo sivut-kansioon 404.js-tiedosto.
Kun tapahtuu 404-virhe, Next.js uudelleenohjaa automaattisesti tälle sivulle. Tässä on esimerkki henkilökohtaisesta 404-sivusta:
Tietojen nouto palvelinpuolelta
Sen sijaan, että lataat tietoja asiakaspuolelta, Next.js antaa sinun suorittaa alustavan tietopopulaation, mikä tarkoittaa, että sivu lähetetään palvelimelta jo täytetyillä tiedoilla.
Sinulla on kaksi vaihtoehtoa palvelinpuolen tiedonhaun toteuttamiseen:
- Tiedot tulee hakea jokaisesta pyynnöstä.
- Saat tiedot vain kerran koko rakennusprosessin ajan (staattinen työmaa)
Hae tiedot jokaisesta pyynnöstä
GetServerSideProps-menetelmää käytetään kunkin pyynnön hahmontamiseen palvelinpuolella. Tämä toiminto voidaan sisällyttää komponenttitiedoston loppuun. Next.js täyttää automaattisesti komponenttirekvisiittasi getServerSideProps-objektilla, jos tämä toiminto on komponenttitiedostossasi.
Hae tiedot rakennusvaiheessa
GetStaticProps-menetelmää käytetään renderöimään palvelinpuolen rakennusaikana. Tämä toiminto voidaan sisällyttää komponenttitiedoston loppuun. Tämä menetelmä suorittaa palvelinkoodin ja lähettää GET-pyynnön palvelimelle, mutta vain kerran, kun projektimme on valmis.
Miksi sinun pitäisi oppia Next.js?
Yksi syy tähän on se, että Next.js on rakennettu Reactin päälle, joka on etupään kehitystyökalupaketti käyttöliittymien luominen ne ovat suosikkivalintani verkkosovellusten suunnittelussa.
Mutta se ei riittäisi, jos Next.js ei olisi hyvä siinä, mitä se teki… eikö niin?
Joten mitä se tarkalleen tekee?
Meidän on ensin määriteltävä muutama käsite, jotta voimme ymmärtää sen. Next.js nousi suosioon, koska se ratkaisi monien verkkokehittäjien ongelman asiakaspuolen verkkosovelluksissa (selaimessa). Näillä yhden sivun sovelluksilla (SPA:lla) oli parempi kokemus, koska niiden ei tarvinnut käyttäjän ladata sivua uudelleen ja ne mahdollistivat enemmän vuorovaikutusta.
Koska suurin osa tällaisen sovelluksen materiaalista tulee kuitenkin näkyviin vasta, kun se suoritetaan selaimessa, indeksointirobottien on vaikea ymmärtää tällaisen sovelluksen tekstisisältöä.
Tämän seurauksena monet SPA:t jäivät suosiostaan huolimatta suurelta osin anonyymeiksi suurille hakukoneille, kuten Googlelle. Next.js sisältää nyt tehokkaamman sisäänrakennetun mekanismin React-komponenttien palvelinpuolen renderöintiin (SSR).
Next.js:n avulla kehittäjät voivat rakentaa JavaScript-koodia palvelimelle rakennusprosessin aikana ja tarjota käyttäjälle indeksoitavan perus-HTML-koodin.
Plussat
- Erinomainen käyttökokemukseen
- Erinomainen SEO:lle
- Rakenna supernopea staattinen verkkosivusto, joka toimii kuin dynaaminen
- Joustavuutta käyttöliittymän ja UX:n rakentamisessa.
- Monia kehitysetuja
- Suuri yhteisön tuki
MIINUKSET
- Verkkosivustoilla tai sovelluksilla on tietty aika rakentaa tai kehittää.
- Tiettyihin tehtäviin Next.js ei ole riittävä. Kehittäjien tulee pystyä rakentamaan dynaamisia reittejä Node.js-työkalujen avulla.
Yhteenveto
Kuten näet, Next.js yksinkertaistaa React-sovelluskehitystä ja antaa sinun keskittyä tärkeimpään – sovelluslogiikkaan ja käyttöliittymään. Se sisältää kaiken, mitä tarvitaan nykyaikaisten, käyttöliittymärikkaiden ja API-pohjaisten sovellusten luomiseen.
Se sopii myös vain sisältöprojekteihin, kuten blogeihin ja yrityssivustoihin, koska se pystyy rakentamaan staattisia HTML-sivuja.
Nykyisillä versioilla Next.js ei vain ylläpitä korkeatasoista kehittäjäkokemusta, vaan tarjoaa myös työkaluja visuaalisen suorituskyvyn ja käyttökokemuksen parantamiseen, mikä varmistaa tälle kehykselle valoisan tulevaisuuden.
Jätä vastaus