Nextjs kõigile - mõningate React põhiteadmistega

Reactori ja JavaScripti põhiteadmiste olemasolul olete teel

Next.js on Zeiti loodud JavaScripti raamistik. See võimaldab teil Reacti abil luua serveripoolseid renderdamis- ja staatilisi veebirakendusi. See on suurepärane vahend järgmise veebisaidi loomiseks. Sellel on palju suurepäraseid funktsioone ja eeliseid, mis võivad muuta Nextjsist teie järgmise veebirakenduse loomise esimese võimaluse.

Järgmise.js kasutamise alustamiseks pole vaja veebipaki vms seadistusi. See on varustatud oma konfiguratsiooniga. Vaja on ainult käivitada npm run devja hakata oma rakendust üles ehitama?

Selles artiklis uurime Next.js suurepäraseid funktsioone ja nippe ning kuidas sellega oma järgmist veebisaiti üles ehitada.

Selles postituses eeldatakse, et teil on mõned React ja JavaScripti põhiteadmised.

Siin on mõned suurepärased veebisaidid, mis on loodud Next.js abil:

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

Kasutasin Nextjsi abil isegi oma isiklikku veebisaiti saidhayani.me - lähtekoodi saate siit GitHubist.

Next.js-ga alustamine

Next.js-iga alustamiseks peab teie arvutisse olema installitud node.js ja see on kõik. Next.js on nagu iga teine ​​node.js rakendus - sõltuvuste installimiseks vajate npm või lõnga.

Alustame ja loome projekti Next.js.

Esiteks peame looma kausta ja andma sellele oma valitud nime. Ma panen sellele nime nextjs-app.

Selle käsurea abil saate seda hõlpsalt teha:

mkdir nextjs-app

Pärast järgmise kausta-rakenduse kausta loomist avage see terminalis. Käivitage faili npm init loomiseks package.json .

Järgmisena peame oma sõltuvused installima.

Next.js installimine

  • kasutades lõnga, tippige
yarn add next
  • kasutades npm, tippige:
npm i next --save

Siis peame installima Reacti, kuna Next.js kasutab Reactit. Allpool olev esimene rida kasutab installimiseks lõnga.

yarn add react react-dom
// with npm
npm i react react-dom --save

Pärast seda peate looma kaks vajalikku kausta: pagesja static. Next.js ei tööta ilma nendeta !!

mkdir pages static

Sa peab olema selle struktuuri pärast kasutate neid käske:

nextjs-app -pages -static -package.json

Ja siis saate lihtsalt oma brauseris käivitada npm next devja seejärel avada //localhost:3000/ .

NotFoundLeht ilmub, sest meil ei ole ühtegi lehte veel!

Nii et loome homelehe ja sisestuspunkti index.js.

touch index.js home.js

Ja siis saate kirjutada tavalise Reacti komponendi. Nagu ma eespool ütlesin, on Next.js mõeldud rakenduste React loomiseks.

Meie home.jsvälimus näeb välja järgmine:

Ja siin on meie index.jsfail:

Next.js-l on reaalajas laadimise funktsioon. Kõik, mida peate tegema, on lihtsalt muutmine ja salvestamine ning Next.js kompileerib ja laadib teie jaoks rakenduse automaatselt uuesti.

Märkus : Next.js on nagu iga teine ​​serveripoolne renderdustööriist, mida peame määratlema oma rakenduse vaikelehe, meie juhtum on index.js.

Pärast käivitamist näete brauseris seda muudatust npm next dev:

Palju õnne! Lõime just mõne lihtsa sammuga järgmise rakenduse Next.js. Neid rakenduse Next.js loomise juhiseid kirjeldatakse Next.js ametlikes dokumentides.

Minu alternatiiv

Tavaliselt ma seda viisi ei kasuta. Ma kasutan selle asemel rakenduse create-next-app CLI, mis teeb minu jaoks kõik need asjad ühes reas.

npx create-next-app my-app

Lisafunktsioonide uurimiseks saate tutvuda dokumentatsiooniga siin.

Looge Next.js jaoks kohandatud konfiguratsioonid

Mõnikord võiksite oma rakendusse Next.js lisada täiendavaid sõltuvusi või pakette.

Next.js annab teile võimaluse kohandada oma konfiguratsiooni next-config.jsfaili abil.

Näiteks võiksite lisada rakendusele sass-toe. Sel juhul peate kasutama next-sass paketti ja peate selle next-config.jsfaili lisama nagu allpool toodud näites:

Esiteks installige next-sass:

yarn add @zeit/next-sass

Seejärel lisage see next-config.jsfaili:

Ja siis saate luua, kirjutage oma sass-kood ja importige see oma komponenti:

Sass-faili importimine meie komponenti:

Ja siin on tulemus:

Kas ei olnud nii lihtne lisada rakendusele Next.js sass-tuge?

Siinkohal käsitlesime lihtsalt installimise ja seadistamise osa. Räägime nüüd Next.js funktsioonidest!

Funktsioonid

Next.js sisaldab hulgaliselt suurepäraseid funktsioone, nagu serveripoolne renderdamine, ruuterid ja laisk laadimine.

Serveripoolne renderdamine

Next.js teostab vaikimisi serveripoolset renderdamist. See muudab teie rakenduse otsingumootorite jaoks optimeerituks. Samuti saate integreerida mis tahes vahevara, näiteks express.js või Hapi.js, ja saate käitada mis tahes andmebaasi, näiteks MongoDB või MySQL.

Rääkides otsingumootori optimeerimisest, on Next.js kaasas Headkomponent, mis võimaldab teil lisada ja teha dünaamilisi metasilte. See on minu lemmikfunktsioon - saate teha kohandatud ja dünaamilisi metasilte. Need võimaldavad teie veebisaiti indekseerida otsingumootorites nagu Google. Siin on näide Headkomponendist:

Ja saate Headkomponendi importida ja kasutada mis tahes muul lehel:

Vinge!

Märkus . Kui kasutate Next.js, ei pea te Reactit importima, kuna Next.js teeb seda teie eest.

Staatilise veebisaidi genereerimine Next.js abil

Lisaks serveripoolsele renderdamisele saate ikkagi oma rakenduse HTML-staatilise veebisaidina kompileerida ja eksportida ning juurutada staatilisele veebisaidile, nagu GitHubi leht või netlify. Siit saate ametlikes dokumentides lisateavet staatilise veebisaidi loomise kohta koos Next.js-iga.

Ruuterid

See on Next.js-i üks suurepäraseid omadusi. Rakenduse loomine-reageerimine kasutamisel peate tavaliselt installima reageerimisruuteri ja looma selle kohandatud konfiguratsiooni.

Next.js on varustatud oma nulliga konfigureerimata ruuteritega. Teil pole vaja ruuterite täiendavat konfiguratsiooni. Looge lihtsalt oma leht pageskausta sisse ja Next.js hoolitseb kogu marsruudi konfiguratsiooni eest.

Läheme edasi ja loome kohandatud navigeerimise, et kõik oleks selge!

Lehtede vahel navigeerimiseks on Next.js-l Linkmeetod navigeerimise haldamiseks.

Loome blog.jsja contact.jslehed:

blog.js

Ja siin on contact.jsleht:

Ja nüüd peame saama nende lehtede vahel navigeerida?

Vat see on nii lihtne ja super vinge.

Laisk laadimine

Laisk laadimine muudab teie rakenduse parema kasutuskogemuse pakkumiseks. Mõnikord võib lehe laadimine aega võtta. Kasutaja võib teie rakenduse hüljata, kui laadimine võtab kauem kui 30 sekundit.

Selle vältimiseks on kasutada mõnda trikki kasutajale lehe laadimise näitamiseks, näiteks spinneri kuvamisega. Laisk laadimine või koodi jagamine on üks funktsioonidest, mis võimaldavad teil aeglase laadimisega toime tulla ja seda kontrollida, nii et laadite oma lehele ainult vajaliku koodi.

Next.js on varustatud oma koodide jagamise meetodiga. See pakub meile dynamickomponendi laadimiseks meetodit, mida nimetatakse allpool toodud näites:

Nende näidete lähtekoodi leiate GitHubist

See on kõik. Loodan, et sellest piisab ja loodan, et see artikkel annab teile selge ettekujutuse Next.js-ist ja selle funktsioonidest. Teiste funktsioonide kohta saate lisateavet ametlikest dokumentidest.

Kui teil on sellele postitusele muid täiendusi, võite jätta kommentaari allpool ja kui see postitus teile meeldib, vajutage klapi? ja jagada.

Arutlege Twitteris ?.

Muide, olen hiljuti teinud koostööd ühe oma mobiilirakenduse jaoks tugeva tarkvarainseneride rühmaga. Korraldus oli suurepärane ja toode tarniti väga kiiresti, palju kiiremini kui teised ettevõtted ja vabakutselised töötajad, kellega ma olen koostööd teinud, ja ma arvan, et saan neid ausalt soovitada ka teiste sealsete projektide jaoks. Kui soovite ühendust võtta, tulistage mulle e-kiri - [email protected]