Sadržaj[Sakrij][Prikaži]
Prilikom odabira softverske biblioteke ili okvira, obično se uzima u obzir iskustvo programera.
Kada spominjem „iskustvo programera“, mislim na to kako programeri zapravo rade posao. Programeri biraju biblioteke ili okvire koje je ugodno koristiti.
Ovo je jedan od primarnih razloga zašto sada imamo najpopularnije biblioteke i okvire. Kao programeri, ne moramo početi od nule kada postoje postojeći alati stvoreni da nam pomognu u našim zadacima.
Frameworks su dijelovi softvera koje kreiraju i koriste programeri za izradu aplikacija, a NextJS je jedan od njih.
U ovom postu ćemo proći kroz Nextjs, njegove ključne karakteristike i kako ga možemo koristiti za izradu aplikacije. Uskočimo odmah.
Šta je Next.js?
Next.js je JavaScript okvir za brzu i jednostavnu konstrukciju statičkih web stranica i online aplikacija baziranih na React-u. Omogućava vam da dizajnirate sjajne web aplikacije za različite platforme, uključujući Windows, Linux i Mac.
Trebali biste biti upoznati sa Next.js frameworkom ako ste minimalno upoznati s reactom i želite saznati više o react ekosistemu.
Iako Next.js dolazi sa svime što vam je potrebno za početak, možete birati između NPM-a i Yarn-a, JavaScript-a i TypeScript-a, CSS-a i SCSS-a, statičkog izvoza i implementacije bez servera.
Značajke
- Rutiranje se vrši automatski – ne morate ništa da konfigurišete jer je bilo koji URL mapiran na sistem datoteka, na fajlove u fascikli stranica (naravno, imate opcije prilagođavanja).
- Komponente jedne datoteke – Jednostavno je dodati stilove u opsegu komponenti 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 sačuvanu na disku, ponovo učitava stranicu.
- Dinamičke komponente – Možete dinamički učitavati JavaScript module i React komponente.
- Statički izvozi – Next.js vam omogućava da izvezete potpuno statičnu stranicu iz vaše aplikacije pomoću sljedeće naredbe za izvoz.
- Kompatibilnost sa okruženjem – Next.js se neprimetno integriše sa ekosistemima JavaScript, Node i React.
- Automatsko razdvajanje kodova – Za prikazivanje stranica koriste se samo biblioteke i JavaScript koji su potrebni. Umjesto kreiranja jedne JavaScript datoteke koja sadrži sav kod aplikacije, Next.js inteligentno dijeli aplikaciju na mnoge resurse.
Kako kreirati next.js aplikaciju?
instalacija
Možete koristiti naredbu node npx da instalirate i izgradite Next.js projekat.
Ovo će generirati fasciklu i sve datoteke, konfiguracije i druge stavke potrebne za pokretanje Next.js projekta.
Aplikaciju možete pokrenuti nakon što je generirana.
Stranice i usmjeravanje
Za rukovanje rutama sa Next.js, ne moramo koristiti okvir za rutiranje. Usmjeravanje pomoću Next.js je jednostavno za postavljanje. Kada koristite naredbu create-next-app za pravljenje nove Next.js aplikacije, aplikacija kreira fasciklu koja se podrazumevano zove 'pages'.
Ovaj folder 'stranice' je mjesto gdje održavate svoje rute. Kao rezultat toga, svaka datoteka komponenti reagovanja u poddirektorijumu će se tretirati kao zasebna ruta.
Na primjer, ako folder sadrži te datoteke:
- index.js
- about.js
- aricles.js
Ovaj fajl će se automatski transformisati na tri načina:
- Stranica indeksa localhost/index
- O stranici localhost/about
- Stranica bloga localhost/articles
Primjer stranice about.js prikazan je ispod. Kao što vidite, ništa nije navedeno o stranici. To je jednostavno standardna React funkcionalna komponenta.
rute
Da biste napravili ugniježđene rute, prvo morate uspostaviti podmapu. Na primjer: stranice/članci. Kreirajte svoju 'contact.js' komponentu reakcije unutar tog foldera 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 blog post ima svoju putanju:
- localhost/blog/first-article
- localhost/blog/-second-article
Koristeći notaciju u zagradama, možete definirati dinamičku rutu u Next.js. Na primjer: pages/article/[slug].js
Link Routes
Sada ste završili svoju prvu rutu. Pretpostavljam da pitate kako da povežete stranice sa tim rutama. Za to će vam trebati 'sljedeći/link'.
Evo primjera početne stranice koja uključuje vezu do stranice o stranici:
Ako želite stilizirati vezu, koristite sljedeću sintaksu:
Preusmjeravanje ruta
Što ako trebate prisilno preusmjeriti na određenu stranicu? Na primjer, kada se pritisne dugme? To možete postići korištenjem 'router.push':
SEO
Stranice u web aplikacijama zahtijevaju meta elemente (glavne) pored podataka unutar HTML tijela. Ovo će zahtijevati instalaciju dodatnog zahtjeva pod nazivom React Helmet u React aplikaciji.
Možemo koristiti komponentu Head iz next/head u Next da jednostavno dodamo metapodatke našim web stranicama koji će biti prikazani u rezultatima pretraživanja i ugrađenim:
komponente
Često ćete morati da razvijete komponente ili fajl rasporeda. Na primjer, komponenta koja prikazuje navigacijsku traku. Do sada smo koristili samo fasciklu stranica. Šta ako vaša komponenta nije namijenjena da bude stranica rute?
Ne želite da korisnik ide na stranicu kao što je localhost/navbar. Ako stavite komponentu Navbar.js u folder pages, to će se dogoditi. Šta učiniti u situaciji?
Jednostavno pohranite sve svoje komponente 'nije stranica' u poseban folder. Većina Next.js projekata koristi naziv 'komponente', a ovaj folder se generiše u osnovnom folderu vašeg projekta.
Glava komponenta
Početno učitavanje stranice prikazuje Next.js na strani servera. To radi modificiranjem HTML-a vaše stranice. Odjeljak zaglavlja je uključen.
Next.js komponenta Head se koristi za davanje oznaka odjeljka zaglavlja kao što su naslov i meta. Komponenta Head se koristi u ovom primjeru komponente Layout.
Kreiranje 404 stranice nije pronađeno
Moguće je napraviti svoju stranicu s greškom 404. Možda biste željeli prilagoditi poruku ili dodati vlastiti dizajn stranice. U fascikli pages kreirajte datoteku 404.js.
Kada dođe do greške 404, Next.js će automatski preusmjeriti na ovu stranicu. Evo primjera personalizirane 404 stranice:
Dohvaćanje podataka sa strane servera
Umjesto preuzimanja podataka na strani klijenta, Next.js vam omogućava da izvršite početnu populaciju podataka, što podrazumijeva slanje stranice sa podacima koji su već popunjeni sa servera.
Imate dva izbora za implementaciju preuzimanja podataka na strani servera:
- Podaci se trebaju dohvatiti na svaki zahtjev.
- Dobijte podatke samo jednom tokom procesa izgradnje (statična lokacija)
Dohvati podatke o svakom zahtjevu
Metoda getServerSideProps se koristi za prikazivanje svakog zahtjeva na strani servera. Ova funkcija može biti uključena na kraju datoteke komponente. Next.js će automatski popuniti rekvizite vaše komponente sa getServerSideProps objektom ako je ta funkcija prisutna u datoteci komponente.
Preuzmite podatke u vrijeme izrade
GetStaticProps metoda se koristi za prikazivanje na strani servera u vrijeme izgradnje. Ova funkcija može biti uključena na kraju datoteke komponente. Ova metoda pokreće serverski kod i šalje GET zahtjev serveru, ali samo jednom kada je naš projekat završen.
Zašto biste trebali naučiti Next.js?
Jedan od razloga za to je zato što je Next.js izgrađen na vrhu React-a, front-end razvojnog alata za kreiranje korisničkih interfejsa koji 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, šta tačno radi?
Moramo prvo definisati nekoliko koncepata da bismo to shvatili. Next.js je stekao popularnost jer je riješio problem koji su mnogi web programeri imali s web aplikacijama na strani klijenta (u pretraživaču). Ove aplikacije na jednoj stranici (SPA) imale su bolje iskustvo jer im nije bio potreban korisnik da ponovo učita stranicu i omogućile su više interaktivnosti.
Međutim, budući da većina materijala u aplikaciji poput ove postaje vidljiva samo kada se izvrši u pregledniku, web indekseri imaju teškoća u razumijevanju tekstualnog sadržaja takve aplikacije.
Kao rezultat toga, uprkos njihovoj popularnosti, mnogi SPA-ovi ostali su uglavnom anonimni za velike pretraživače kao što je Google. Next.js sada uključuje robusniji ugrađeni mehanizam za renderiranje na strani servera (SSR) React komponenti.
Next.js omogućava programerima da konstruišu JavaScript kod na serveru tokom procesa izgradnje i obezbede osnovni HTML koji se može indeksirati korisniku.
pros
- Odlično za korisničko iskustvo
- Odlično za SEO
- Napravite super-brzu statičku web stranicu koja se ponaša kao dinamička
- Fleksibilnost u izgradnji UI i UX-a.
- 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 biti u mogućnosti da konstruišu dinamičke rute koristeći Node.js alate.
zaključak
Kao što vidite, Next.js pojednostavljuje razvoj React aplikacije i omogućava vam da se fokusirate na ono što je najvažnije – logiku vaše aplikacije i korisničko sučelje. Uključuje sve što je potrebno za kreiranje savremenih aplikacija bogatih frontendom i API-ja.
Takođe je prikladan za projekte samo sa sadržajem, kao što su blogovi i poslovne web stranice, zbog svoje sposobnosti da izgradi statične HTML stranice.
Uz trenutna izdanja, Next.js ne samo da održava visok nivo iskustva programera, već daje i alate za povećanje vizuelnih performansi i korisničkog iskustva, osiguravajući svijetlu budućnost za ovaj okvir.
Ostavite odgovor