Pregled sadržaja[Sakriti][Pokazati]
Prilikom odabira softverske biblioteke ili okvira obično se uzima u obzir iskustvo programera.
Kad spominjem "iskustvo programera", mislim na to kako programeri zapravo obavljaju posao. Programeri biraju biblioteke ili okvire koji su ugodni za korištenje.
Ovo je jedan od primarnih razloga zašto sada imamo najpopularnije biblioteke i okvire. Kao programeri, ne moramo početi od nule ako postoje postojeći alati stvoreni da nam pomognu u našim zadacima.
Frameworks su dijelovi softvera koji su kreirali i koristili programeri za izradu aplikacija, a NextJS je jedan od njih.
U ovom ćemo postu proći kroz Nextjs, njegove ključne značajke i kako ga možemo koristiti za izradu aplikacije. Uskočimo odmah.
Što je Next.js?
Dalje.js je JavaScript okvir za brzu i jednostavnu izradu statičnih web stranica i online aplikacija temeljenih na Reactu. Omogućuje vam da dizajnirate sjajne web aplikacije za razne platforme, uključujući Windows, Linux i Mac.
Trebali biste biti upoznati s okvirom Next.js ako ste minimalno upoznati s reactom i želite naučiti više o react ekosustavu.
Iako Next.js dolazi sa svime što vam je potrebno za početak, možete birati između NPM-a i Yarna, JavaScripta i TypeScripta, CSS-a i SCSS-a, statičkog izvoza i implementacije bez poslužitelja.
Značajke
- Usmjeravanje se vrši automatski – Ne morate ništa konfigurirati jer se svaki URL preslikava na datotečni sustav, na datoteke u mapi stranica (naravno, imate mogućnosti prilagođavanja).
- Komponente jedne datoteke – jednostavno je dodati stilove ograničene na komponentu koristeći styled-jsx, koji je potpuno integriran i proizveden od strane istog tima.
- Ponovno učitavanje vrućeg koda – kada Next.js otkrije modifikaciju spremljenu na disk, ponovno učitava stranicu.
- Dinamičke komponente – možete dinamički učitati JavaScript module i React komponente.
- Statički izvozi – Next.js vam omogućuje izvoz potpuno statične web-lokacije iz vaše aplikacije pomoću sljedeće naredbe za izvoz.
- Kompatibilnost s okruženjem – Next.js se besprijekorno integrira s ekosustavima JavaScript, Node i React.
- Automatsko dijeljenje kodova – samo biblioteke i JavaScript koji su potrebni koriste se za prikazivanje stranica. Umjesto stvaranja jedne JavaScript datoteke koja sadrži sav kod aplikacije, Next.js inteligentno dijeli aplikaciju na mnoge resurse.
Kako napraviti next.js aplikaciju?
Montaža
Možete koristiti naredbu node npx za instaliranje i izgradnju Next.js projekta.
Ovo će generirati mapu i sve datoteke, konfiguracije i druge stavke potrebne za pokretanje Next.js projekta.
Aplikaciju možete pokrenuti nakon što je generirana.
Stranice i usmjeravanje
Da bismo upravljali rutama s Next.js, ne moramo koristiti okvir za usmjeravanje. Usmjeravanje s Next.js jednostavno je postaviti. Kada koristite naredbu create-next-app za izradu nove aplikacije Next.js, aplikacija prema zadanim postavkama stvara mapu pod nazivom 'pages'.
Ova mapa 'stranica' mjesto je gdje održavate svoje rute. Kao rezultat toga, svaka datoteka komponenti reakcije u poddirektoriju bit će tretirana kao zasebna ruta.
Na primjer, ako mapa sadrži te datoteke:
- index.js
- about.js
- aricles.js
Ova će se datoteka automatski transformirati na tri načina:
- Indeksna stranica localhost/index
- Stranica o stranici localhost/about
- Stranica bloga localhost/articles
Primjer about.js stranice prikazan je u nastavku. Ništa nije navedeno o stranici, kao što vidite. To je jednostavno standardna React funkcionalna komponenta.
Rute
Da biste napravili ugniježđene rute, prvo morate uspostaviti podmapu. Na primjer: stranice/članci. Napravite svoju 'contact.js' reakcijsku komponentu unutar te mape i ona će generirati stranicu localhost/articles/contact.
Ako stavite jednu datoteku u pages/articles.js, a drugu u pages/articles/index.js. Oba odražavaju isti put localhost/blog. U ovoj situaciji, Next.js će samo prikazati datoteku article.js. Što je s dinamičkim rutama, u kojima svaki post na blogu ima svoju putanju:
- lokalni host/blog/prvi-članak
- lokalni host/blog/-drugi-članak
Koristeći zapis u zagradama, možete definirati dinamičku rutu u Next.js. Na primjer: pages/article/[slug].js
Link rute
Sada ste završili svoju prvu rutu. Pretpostavljam da pitate kako povezati stranice s tim rutama. Za to će vam trebati 'sljedeća/veza'.
Evo primjera početne stranice koja uključuje vezu na stranicu O:
Ako želite stilizirati vezu, koristite sljedeću sintaksu:
Preusmjeravanje ruta
Što ako morate prisilno preusmjeriti na određenu stranicu? Na primjer, kada se pritisne gumb? To možete postići korištenjem 'router.push':
SEO
Stranice u web aplikacijama zahtijevaju meta (head) elemente uz podatke unutar HTML tijela. To će zahtijevati instalaciju dodatnog zahtjeva pod nazivom React Helmet u React aplikaciji.
Možemo koristiti komponentu Head iz next/head in Next za jednostavno dodavanje metapodataka na naše web-stranice koje će se prikazivati u rezultatima pretraživanja i ugrađenim:
Komponente
Često ćete morati razviti komponente ili datoteku izgleda. Na primjer, komponenta koja prikazuje navigacijsku traku. Do sada smo samo koristili mapu stranica. Što ako vaša komponenta nije zamišljena kao stranica rute?
Ne želite da korisnik ide na stranicu kao što je localhost/navbar. Ako stavite Navbar.js komponentu u mapu stranica, to će se dogoditi. Što biste trebali učiniti u toj situaciji?
Jednostavno pohranite sve komponente koje nisu stranica u zasebnu mapu. Većina Next.js projekata koristi nadimak 'components', a ova se mapa generira u korijenskoj mapi vašeg projekta.
Komponenta glave
Početno učitavanje stranice renderira Next.js na strani poslužitelja. To čini izmjenom HTML-a vaše stranice. Dio zaglavlja je uključen.
Komponenta Next.js Head koristi se za davanje oznaka odjeljka zaglavlja kao što su naslov i meta. Komponenta Head koristi se u ovom primjeru komponente Layout.
Stranica Create 404 nije pronađena
Izvedivo je napraviti vlastitu stranicu s greškom 404. Možda želite prilagoditi poruku ili dodati vlastiti dizajn stranice. U mapi stranica stvorite datoteku 404.js.
Kada se pojavi pogreška 404, Next.js će automatski preusmjeriti na ovu stranicu. Evo primjera personalizirane stranice 404:
Dohvaćanje podataka sa strane poslužitelja
Umjesto preuzimanja podataka na strani klijenta, Next.js vam omogućuje provođenje početne popunjavanja podataka, što podrazumijeva slanje stranice s podacima koji su već popunjeni s poslužitelja.
Imate dva izbora za implementaciju dohvaćanja podataka sa strane poslužitelja:
- Podaci se trebaju dohvatiti na svaki zahtjev.
- Dohvatite podatke samo jednom tijekom procesa izgradnje (statična stranica)
Dohvaćanje podataka za svaki zahtjev
Metoda getServerSideProps koristi se za iscrtavanje svakog zahtjeva na strani poslužitelja. Ova se funkcija može uključiti na kraju vaše datoteke komponente. Next.js će automatski popuniti rekvizite vaše komponente objektom getServerSideProps ako je ta funkcija prisutna u datoteci vaše komponente.
Dohvaćanje podataka tijekom izgradnje
Metoda getStaticProps koristi se za iscrtavanje na strani poslužitelja u vrijeme izgradnje. Ova se funkcija može uključiti na kraju vaše datoteke komponente. Ova metoda pokreće kod poslužitelja i šalje GET zahtjev poslužitelju, ali samo jednom kada je naš projekt gotov.
Zašto biste trebali naučiti Next.js?
Jedan od razloga za to je taj što je Next.js izgrađen na temelju Reacta, front-end razvojnog alata za stvaranje korisničkih sučelja koje su moj omiljeni izbor za dizajniranje web aplikacija.
Ali to ne bi bilo dovoljno da Next.js nije dobar u onome što radi… zar ne?
Dakle, što točno radi?
Prvo moramo definirati nekoliko pojmova kako bismo to razumjeli. Next.js je stekao popularnost jer je riješio problem koji su mnogi web programeri imali s web aplikacijama na strani klijenta (u pregledniku). Ove aplikacije s jednom stranom (SPA) imale su bolje iskustvo jer nisu trebale da korisnik ponovno učitava stranicu i omogućile su više interaktivnosti.
Međutim, budući da većina materijala u aplikaciji kao što je ova postaje vidljiva samo kada se izvodi u pregledniku, alati za indeksiranje weba teško razumiju tekstualni sadržaj takve aplikacije.
Kao rezultat toga, unatoč svojoj popularnosti, mnogi SPA-ovi ostali su uglavnom anonimni velikim tražilicama kao što je Google. Next.js sada uključuje robusniji ugrađeni mehanizam za renderiranje React komponenti na strani poslužitelja (SSR).
Next.js omogućuje razvojnim programerima da konstruiraju JavaScript kod na poslužitelju tijekom procesa izgradnje i daju korisniku osnovni HTML koji se može indeksirati.
Prozodija
- Izvrsno za korisničko iskustvo
- Izvrstan za SEO
- Izgradite superbrzu statičnu web stranicu koja se ponaša kao dinamična
- Fleksibilnost u izgradnji UI & UX.
- Mnoge razvojne prednosti
- Velika podrška zajednice
Cons
- Web stranice ili aplikacije imaju određeno vrijeme za izradu ili razvoj.
- Za određene zadatke, Next.js je neadekvatan. Programeri bi trebali moći konstruirati dinamičke rute pomoću alata Node.js.
Zaključak
Kao što vidite, Next.js pojednostavljuje razvoj React aplikacije i omogućuje vam da se usredotočite na ono što je najvažnije – logiku vaše aplikacije i korisničko sučelje. Uključuje sve što je potrebno za stvaranje suvremenih aplikacija koje se temelje na API-ju i bogate sučeljem.
Također je prikladan za projekte koji se bave samo sadržajem, kao što su blogovi i poslovne web stranice, zbog svoje sposobnosti izrade statičnih HTML stranica.
Uz trenutna izdanja, Next.js ne samo da održava visoku razinu iskustva programera, već također daje alate za povećanje vizualnih performansi i korisničkog iskustva, osiguravajući svijetlu budućnost za ovaj okvir.
Ostavi odgovor