Sisukord[Peida][Näita]
Tarkvarateegi või raamistiku valimisel võetakse tavaliselt arvesse arendaja kogemust.
Kui mainin "arendaja kogemust", pean silmas seda, kuidas arendajad tegelikult tööd teevad. Arendajad valivad raamatukogud või raamistikud, mida on meeldiv kasutada.
See on üks peamisi põhjuseid, miks meil on nüüd kõige populaarsemad raamatukogud ja raamistikud. Arendajatena ei pea me alustama nullist, kui meie ülesannete täitmiseks on loodud olemasolevad tööriistad.
Raamistikud on tarkvara osad, mille arendajad loovad ja kasutavad rakenduste loomiseks ning NextJS on üks neist.
Selles postituses käsitleme Nextjs'i, selle põhifunktsioone ja seda, kuidas seda rakenduse koostamiseks kasutada. Hüppame kohe sisse.
Mis on Next.js?
Järgmine.js on JavaScripti raamistik staatiliste veebilehtede ja React-põhiste võrgurakenduste kiireks ja hõlpsaks koostamiseks. See võimaldab teil luua suurepäraseid veebirakendusi erinevatele platvormidele, sealhulgas Windowsile, Linuxile ja Macile.
Peaksite olema tuttav raamistikuga Next.js, kui tunnete reacti minimaalselt ja soovite reacti ökosüsteemi kohta rohkem teada saada.
Kuigi Next.js sisaldab kõike, mida vajate alustamiseks, saate valida NPM-i ja lõnga, JavaScripti ja TypeScripti, CSS-i ja SCSS-i, staatilise ekspordi ja serverita juurutamise vahel.
FUNKTSIOONID
- Marsruutimine toimub automaatselt – te ei pea midagi konfigureerima, sest mis tahes URL on seotud failisüsteemiga, lehtede kaustas olevate failidega (muidugi on teil kohandamisvalikud).
- Üksiku faili komponendid – komponendile ulatuvaid stiile on lihtne lisada styled-jsx-i abil, mis on täielikult integreeritud ja mille toodab sama meeskond.
- Kuumkoodi uuesti laadimine – kui Next.js tuvastab kettale salvestatud muudatuse, laadib see lehe uuesti.
- Dünaamilised komponendid – saate dünaamiliselt laadida JavaScripti mooduleid ja reageerimiskomponente.
- Staatiline eksport – Next.js võimaldab järgmise ekspordikäsuga eksportida oma rakendusest täiesti staatilise saidi.
- Ühilduvus keskkonnaga – Next.js integreerub sujuvalt JavaScripti, Node ja Reacti ökosüsteemidega.
- Koodide automaatne poolitamine – lehtede renderdamiseks kasutatakse ainult vajalikke teeke ja JavaScripti. Selle asemel, et luua üks JavaScripti fail, mis sisaldab kogu rakenduse koodi, jagab Next.js rakenduse nutikalt paljudeks ressurssideks.
Kuidas luua next.js rakendust?
paigaldamine
Projekti Next.js installimiseks ja koostamiseks saate kasutada käsku node npx.
See loob kausta ja kõik failid, konfiguratsioonid ja muud Next.js projekti käitamiseks vajalikud üksused.
Rakenduse saate käivitada, kui see on loodud.
Lehed ja marsruutimine
Marsruutide haldamiseks Next.js-iga ei pea me kasutama marsruutimisraamistikku. Marsruutimine rakendusega Next.js on seadistamine imelihtne. Kui kasutate uue rakenduse Next.js koostamiseks käsku create-next-app, loob rakendus vaikimisi kausta nimega 'pages'.
See lehekülgede kaust on koht, kus hoiate oma marsruute. Selle tulemusel käsitletakse iga alamkataloogi reageerivate komponentide faili eraldi marsruudina.
Näiteks kui kaust sisaldab neid faile:
- index.js
- about.js
- aricles.js
See fail teisendatakse automaatselt kolmel viisil:
- Registrileht localhost/indeks
- Teave leht localhost/about
- Blogi leht localhost/articles
Allpool on toodud lehe about.js näide. Nagu näete, pole lehe kohta midagi ette nähtud. See on lihtsalt standardne Reacti funktsionaalne komponent.
Routes
Pesastatud marsruutide loomiseks peate esmalt looma alamkausta. Näiteks: lehed/artiklid. Looge selles kaustas reageerimiskomponent "contact.js" ja see loob lehe localhost/articles/contact.
Kui paned ühe faili kausta pages/articles.js ja teise kausta pages/articles/index.js. Mõlemad peegeldavad sama teed localhost/blog. Sellises olukorras renderdab Next.js lihtsalt faili article.js. Kuidas on lood dünaamiliste marsruutidega, kus igal ajaveebi postitusel on oma tee:
- localhost/blog/first-artikkel
- localhost/blog/-teine-artikkel
Sulgude tähistust kasutades saate failis Next.js määratleda dünaamilise marsruudi. Näiteks: pages/article/[slug].js
Link Marsruudid
Olete nüüd oma esimese marsruudi läbinud. Arvan, et küsite, kuidas lehti nende marsruutidega ühendada. Selleks vajate "järgmine/link".
Siin on näide avalehest, mis sisaldab linki lehele Teave:
Kui soovite lingi stiili muuta, kasutage järgmist süntaksit:
Suuna marsruudid ümber
Mida teha, kui teil on vaja sundida ümbersuunamist teatud lehele? Näiteks kui nuppu vajutatakse? Seda saate teha, kasutades käsku ruuter.push:
SEO
Veebirakenduste lehed nõuavad lisaks HTML-i kehas sisalduvatele andmetele ka meta (head) elemente. Selleks on vaja Reacti rakenduses paigaldada lisanõue nimega React Helmet.
Saame kasutada komponenti Head alates next/head in Next, et hõlpsasti lisada oma veebilehtedele metaandmeid, mis kuvatakse otsingutulemustes ja manustatakse:
Kompkletis
Peate sageli välja töötama komponente või küljendusfaili. Näiteks komponent, mis renderdab navigeerimisriba. Oleme siiani kasutanud lehtede kausta. Mis siis, kui teie komponent ei ole mõeldud marsruudileheks?
Te ei soovi, et kasutaja navigeeriks lehele, näiteks localhost/navbar. Kui asetate komponendi Navbar.js lehtede kausta, see juhtubki. Mida peaksite antud olukorras tegema?
Lihtsalt salvestage kõik oma "mitte leht" komponendid eraldi kausta. Enamik Next.js projekte kasutab varjunime "komponendid" ja see kaust luuakse teie projekti juurkaustas.
Pea komponent
Lehe esmase laadimise renderdab serveripoolne Next.js. See teeb seda teie lehe HTML-i muutmisega. Päise osa on kaasas.
Komponenti Next.js Head kasutatakse päise jaotise siltide (nt pealkiri ja meta) andmiseks. Selles paigutuskomponendi näites kasutatakse komponenti Head.
Loo 404 lehte ei leitud
On võimalik luua oma 404 vealeht. Võib-olla soovite sõnumit kohandada või lisada oma lehe kujunduse. Looge lehtede kaustas fail 404.js.
Kui ilmneb tõrge 404, suunab Next.js automaatselt sellele lehele. Siin on näide isikupärastatud 404-lehest:
Andmete toomine serveri poolelt
Selle asemel, et andmeid kliendi poolelt alla laadida, võimaldab Next.js teha algandmete populatsiooni, mis tähendab, et leht saadetakse serverist juba sisestatud andmetega.
Serveripoolse andmete toomise rakendamiseks on teil kaks võimalust.
- Andmed tuleks hankida iga päringu korral.
- Hankige andmeid ainult üks kord kogu ehitusprotsessi jooksul (staatiline koht)
Tooge andmeid iga päringu kohta
Iga päringu serveripoolseks renderdamiseks kasutatakse meetodit getServerSideProps. Selle funktsiooni saab lisada teie komponendifaili lõppu. Next.js täidab teie komponentide rekvisiidid automaatselt objektiga getServerSideProps, kui see funktsioon on teie komponendifailis olemas.
Andmete toomine ehitamise ajal
Meetodit getStaticProps kasutatakse serveripoolseks renderdamiseks ehitamise ajal. Selle funktsiooni saab lisada teie komponendifaili lõppu. See meetod käivitab serveri koodi ja saadab serverile GET-päringu, kuid ainult üks kord, kui meie projekt on lõppenud.
Miks peaksite Next.js-i õppima?
Selle üks põhjusi on see, et Next.js on üles ehitatud Reactile, mis on esiotsa arendustööriistade komplekt kasutajaliideste loomine need on minu lemmikvalik veebirakenduste kujundamiseks.
Kuid sellest ei piisa, kui Next.js poleks selles hea, mida ta tegi… eks?
Niisiis, mida see täpselt teeb?
Selle mõistmiseks peame kõigepealt määratlema mõned mõisted. Next.js saavutas populaarsuse, kuna see lahendas probleemi, mis paljudel veebiarendajatel oli kliendipoolsete veebirakendustega (brauseris). Nendel ühelehelistel rakendustel (SPA-d) oli parem kasutuskogemus, kuna nad ei vajanud, et kasutaja lehte uuesti laadiks ja võimaldasid rohkem interaktiivsust.
Kuna aga suurem osa sellise rakenduse materjalist muutub nähtavaks alles siis, kui seda tehakse brauseris, on veebiroomajatel raske sellise rakenduse tekstisisu mõista.
Selle tulemusel jäid paljud SPA-d vaatamata oma populaarsusele suurtele otsingumootoritele nagu Google suures osas anonüümseks. Next.js sisaldab nüüd tugevamat sisseehitatud mehhanismi Reacti komponentide serveripoolseks renderdamiseks (SSR).
Next.js võimaldab arendajatel koostamisprotsessi ajal luua serveris JavaScripti koodi ja pakkuda kasutajale lihtsat, indekseeritavat HTML-i.
Plusse
- Suurepärane kasutajakogemuse jaoks
- Suurepärane SEO jaoks
- Looge ülikiire staatiline veebisait, mis käitub nagu dünaamiline
- Paindlikkus kasutajaliidese ja UX-i loomisel.
- Palju arengueeliseid
- Suur kogukonna tugi
Miinused
- Veebisaitidel või rakendustel on loomiseks või arendamiseks teatud aeg.
- Teatud ülesannete jaoks on Next.js ebapiisav. Arendajad peaksid saama Node.js tööriistade abil dünaamilisi marsruute koostada.
Järeldus
Nagu näete, lihtsustab Next.js Reacti rakenduste arendamist ja võimaldab teil keskenduda kõige olulisemale – teie rakenduse loogikale ja kasutajaliidesele. See sisaldab kõike, mis on vajalik kaasaegsete, esiosa rikaste ja API-toega rakenduste loomiseks.
See sobib ka ainult sisuprojektide jaoks, nagu ajaveebid ja ettevõtte veebisaidid, kuna see suudab luua staatilisi HTML-lehti.
Praeguste väljaannetega ei säilita Next.js mitte ainult arendajakogemuse kõrget taset, vaid pakub ka tööriistu visuaalse jõudluse ja kasutajakogemuse suurendamiseks, tagades sellele raamistikule helge tuleviku.
Jäta vastus