Nextjs kaikille - perustietä Reactista

React- ja JavaScript-perustietojen avulla olet matkalla

Next.js on Zeitin luoma JavaScript-kehys. Sen avulla voit rakentaa palvelinpuolen renderointia ja staattisia verkkosovelluksia React-sovelluksella. Se on loistava työkalu seuraavan verkkosivustosi rakentamiseen. Siinä on monia hienoja ominaisuuksia ja etuja, mikä voi tehdä Nextjsistä ensimmäisen vaihtoehdon seuraavan verkkosovelluksen rakentamiseen.

Et tarvitse mitään verkkopaketin tai vastaavan kokoonpanoa aloittaaksesi Next.js: n käytön. Se tulee kokoonpanoonsa. Tarvitset vain juosta npm run devja aloittaa sovelluksesi rakentamisen?

Tässä artikkelissa aiomme tutkia Next.js: n hienoja ominaisuuksia ja temppuja sekä kuinka aloittaa seuraavan verkkosivustosi rakentaminen sen avulla.

Tässä viestissä oletetaan, että sinulla on perustietoja Reactista ja JavaScriptistä.

Tässä on joitain upeita verkkosivustoja, jotka on rakennettu Next.js: n avulla:

• Syntaxt.fm
• npmjs
• material-ui.io
• expo.io
• codemenitor.io

Käytin jopa Nextjsiä henkilökohtaisen verkkosivustoni saidhayani.me rakentamiseen - saat lähdekoodin GitHubista täältä.

Next.js: n käytön aloittaminen

Aloittaaksesi Next.js: llä, tietokoneellasi on oltava asennettuna node.js, ja siinä kaikki. Next.js on kuin mikä tahansa muu node.js-sovellus - riippuvuuksien asentamiseen tarvitaan npm tai Lanka.

Aloitetaan ja luodaan Next.js-projekti.

Ensinnäkin meidän on luotava kansio ja annettava sille haluamasi nimi. Annan sen nimeksi nextjs-app.

Voit tehdä sen helposti tällä komentorivillä:

mkdir nextjs-app

Kun olet luonut seuraavanjs-app-kansion, avaa se päätelaitteessa. Suorita npm init luomaan package.json tiedosto.

Seuraavaksi meidän on asennettava riippuvuutemme.

Next.js: n asentaminen

• kirjoita Lanka

yarn add next

• käyttämällä npm, kirjoita:

npm i next --save

Sitten meidän on asennettava React, koska Next.js käyttää Reactia. Alla olevassa ensimmäisessä rivissä käytetään lankaa asennuksessa.

yarn add react react-dom

// with npm

npm i react react-dom --save

Sen jälkeen sinun on luotava kaksi tarvittavaa kansiota: pagesja static. Next.js ei toimi ilman niitä!

mkdir pages static

Sinulla on oltava tämä rakenne, kun olet suorittanut nämä komennot:

nextjs-app -pages -static -package.json

Ja sitten yksinkertaisesti voit suorittaa npm next devja avata //localhost:3000/ sitten selaimesi.

NotFoundSivu näkyy, koska meillä ei ole mitään sivua vielä!

Joten luodaan homesivu ja lähtökohta index.js.

touch index.js home.js

Ja sitten voit kirjoittaa normaalin React-komponentin. Kuten edellä sanoin, Next.js on tarkoitettu React-sovellusten rakentamiseen.

Tältä home.jsnäyttää:

Ja tässä on index.jstiedostomme:

Next.js: llä on live-latausominaisuus. Sinun tarvitsee vain muuttaa ja tallentaa, ja Next.js kääntää ja lataa sovelluksen automaattisesti puolestasi.

Huomaa : Next.js on kuin mikä tahansa muu palvelinpuolen renderöintityökalu, joka meidän on määritettävä sovelluksemme oletussivu index.js.

Näet tämän muutoksen selaimessa suorituksen jälkeen npm next dev:

Onnittelut! Olemme juuri luoneet Next.js-sovelluksen muutamalla yksinkertaisella vaiheella. Nämä Next.js-sovelluksen luomisen ohjeet kuvataan Next.js: n virallisissa asiakirjoissa.

Vaihtoehtoni

En yleensä käytä tätä tapaa. Käytän sen sijaan create-next-app CLI: tä, joka tekee kaikki nämä asiat minulle yhdellä rivillä.

npx create-next-app my-app

Voit tutustua täällä oleviin asiakirjoihin tutkiakseen muita ominaisuuksia.

Luo mukautetut kokoonpanot Next.js: lle

Joskus haluat ehkä lisätä joitain lisäriippuvuuksia tai paketteja Next.js-sovellukseesi.

Next.js antaa sinulle mahdollisuuden mukauttaa kokoonpanoa next-config.jstiedostolla.

Voit esimerkiksi lisätä sovellukseesi sass-tuen. Tässä tapauksessa sinun on käytettävä next-sass-pakettia ja sinun on lisättävä se next-config.jstiedostoon alla olevan esimerkin mukaisesti:

Asenna ensin next-sass:

yarn add @zeit/next-sass

Sitten sisällytä se next-config.jstiedostoon:

Ja sitten voit luoda kirjoita sass-koodisi ja tuoda sen komponenttiin:

Sass-tiedoston tuominen komponenttiin:

Ja tässä on tulos:

Vau, eikö ollut niin helppoa lisätä sass-tukea Next.js-sovellukseen?

Tässä vaiheessa käsiteltiin vain asennus- ja kokoonpano-osaa. Puhutaan nyt Next.js: n ominaisuuksista!

Ominaisuudet

Next.js sisältää joukon upeita ominaisuuksia, kuten palvelinpuolen renderointi, reitittimet ja laiska lataus.

Palvelinpuolen renderointi

Next.js suorittaa oletusarvoisesti palvelinpuolen hahmonnuksen. Tämä tekee sovelluksestasi optimoidun hakukoneille. Voit myös integroida minkä tahansa väliohjelmiston, kuten express.js tai Hapi.js, ja voit suorittaa minkä tahansa tietokannan, kuten MongoDB tai MySQL.

Hakukoneoptimoinnista puhuen Next.js sisältää Headkomponentin, jonka avulla voit lisätä ja tehdä dynaamisia sisällönkuvauskenttiä. Se on suosikkini ominaisuus - voit tehdä mukautettuja ja dynaamisia sisällönkuvauskenttiä. Nämä tekevät sivustostasi indeksoitavan hakukoneet, kuten Google. Tässä on esimerkki Headkomponentista:

Ja voit tuoda ja käyttää Headkomponenttia millä tahansa muulla sivulla:

Mahtava!

Huomaa : Next.js: n kanssa sinun ei tarvitse tuoda Reactia, koska Next.js tekee tämän puolestasi.

Staattisen verkkosivuston luominen Next.js: n avulla

Palvelinpuolen hahmonnuksen lisäksi voit silti kääntää ja viedä sovelluksesi staattisena HTML-verkkosivustona ja ottaa sen käyttöön staattisella verkkosivustolla, kuten GitHub-sivu tai netlify. Voit oppia lisää staattisen verkkosivuston luomisesta Next.js: n avulla täältä virallisista asiakirjoista.

Reitittimet

Tämä on toinen Next.js: n hienoista ominaisuuksista. Kun käytät create-reagoi-sovellusta, sinun on yleensä asennettava reagoiva reititin ja luotava sen mukautettu kokoonpano.

Next.js: llä on omat reitittimet, joilla ei ole asetuksia. Et tarvitse ylimääräisiä reitittimien kokoonpanoja. Luo vain sivusi pageskansioon ja Next.js hoitaa kaikki reititysmääritykset.

Mennään eteenpäin ja luodaan mukautettu navigointi, jotta kaikki on selvää!

Sivujen välillä liikkumiseen Next.js: llä on Linktapa hallita navigointia.

Luodaan blog.jsja contact.jssivut:

blog.js

Ja tässä on contact.jssivu:

Ja nyt meidän on pystyttävä siirtymään näiden sivujen välillä?

Vau niin helppoa ja erittäin mahtavaa.

Laiska lastaus

Likainen lataaminen tekee sovelluksestasi paremman käyttökokemuksen. Joskus sivun lataaminen voi kestää jonkin aikaa. Käyttäjä voi hylätä sovelluksesi, jos lataaminen kestää yli 30 sekuntia.

Tapa välttää tämä on käyttää jotakin temppua osoittamaan käyttäjälle, että sivu latautuu, esimerkiksi näyttämällä kiekkoa. Laiska lataus tai koodin jakaminen on yksi ominaisuuksista, joiden avulla voit käsitellä ja hallita hidasta latausta, joten lataat vain tarvittavan koodin sivullesi.

Next.js: llä on oma koodinjakomenetelmä. Se tarjoaa meille kutsutun menetelmän dynamickomponenttimme lataamiseksi, kuten alla olevassa esimerkissä:

Löydät näiden esimerkkien lähdekoodin GitHubista

Siinä kaikki. Toivon, että se riittää ja toivon, että tämä artikkeli antaa sinulle selkeän kuvan Next.js: stä ja sen ominaisuuksista. Voit oppia lisää muista ominaisuuksista virallisissa asiakirjoissa.

Jos sinulla on muita lisäyksiä tähän viestiin, voit jättää kommentin alla ja jos pidät tästä viestistä, napsauta taputtaa? ja jaa.

Keskustele Twitterissä ?.

Muuten, olen äskettäin työskennellyt vahvan ohjelmistoinsinöörien ryhmän kanssa yhdessä mobiilisovelluksissani. Organisaatio oli loistava, ja tuote toimitettiin erittäin nopeasti, paljon nopeammin kuin muut yritykset ja freelancerit, joiden kanssa olen työskennellyt, ja uskon voivani suositella heitä rehellisesti muihin siellä oleviin projekteihin. Ammu minulle sähköpostia, jos haluat ottaa yhteyttä - [email protected]