Šta je Next.js?

Uvod u Next.js

Programeri obično uživaju u radu sa JavaScript aplikacijama izgrađenim na React-u sve dok ne shvate da postoji nekoliko manjih problema na strani klijenta kada je u pitanju prikazivanje delova sadržaja na stranici.

U većini slučajeva, stranicama je prosto potrebno malo više vremena da se učitaju, jer DOM mora da se generiše u brauzeru, a pre nego što se sadržaj učita, mora da se učita i sav JS dok aplikacija takođe treba da se pokrene da bi se utvrdilo šta bi trebalo da bude prikazano na stranici. Iako ovo nije tako veliki problem, neki developeri bi ovo smatrali nedostatkom ovog framework-a.

Sa SEO strane, pretraživači su takođe sve bolji kada je u pitanju indeksiranje i pokretanje JS aplikacija, a takođe, optimizacija se poboljšava kada veb lokacija pošalje sadržaj, umesto da pretraživači to sami shvate.

Da bi prevazišao ove probleme, Next.js koristi prikazivanje na strani servera ili statičko generisanje veb stranica (prerenderovanje stranicaza vreme izrade/kompajliranja).

Iako ovo malo poboljšava SEO, neće značajnije doprineti optimizaciji vebsajta.

Karakteristike Next.js-a

Kao što smo već spomenuli, framework dolazi sa nizom korisnih karakteristika, a u ovom odeljku ćemo razmotriti one najzapaženije.

Renderovanje na strani servera

Ovo je podrazumevana funkcija Next.js-a koja pomaže da optimizujete vašu veb aplikaciju za pretraživače.

Zahvaljujući funkcijama prikazivanja na strani servera, moguće su i druge integracije, kao u slučajevima express.js i/ili Hapi.js. Takođe, možete pokretati baze podataka MySQL ili MongoDB.

S druge strane, to se može uraditi i sa Express API i sa React-om.

Budući da smo na temi optimizacije za pretraživače, vredi napomenuti da framework dolazi sa namenskom komponentom Head koja omogućava programerima da koriste i kreiraju dinamičke metaoznake.

Takođe, SSR generiše lokaciju na serveru svaki put kada korisnik poseti stranicu. U ovom slučaju, korisnik dobija gotov HTML šablon koji se može indeksirati. Iako je ovo zaista korisna funkcija, najvažnija je onda kada ne možete da koristite SSG - na primer, u situacijama kada je dobrorangiranje u pretrazi glavni prioritet, a podaci u veb aplikaciji se često menjaju.

Generisanje statičkih veb lokacija

Ovo je još jedna korisna funkcija, osim prikazivanja na strani servera. Developeri mogu jednostavno da kompajliraju i eksportuju veb aplikacije kao statične HTML veb lokacije i da ih primene na hosting stranici kao što je GitHub, na primer.

Takođe, kada se generiše HTML, generišu se i JSON datoteke koje se kasnije koriste za aplikacije sa jednom stranicom (SPA), tako da ih ne treba naknadno preuzimati.

S druge strane, ne mogu se samo HTML stranice generisati kao statičke, već se Next.js može pokrenuti na serveru, koji se može konfigurisati, a naknadno kreirane stranice mogu se kreirati i grupisati sa drugim stranicama, kao i učiniti da se određene stranice regenerišu (inkrementalna statička regeneracija), tj. za kompajliranje u određenom intervalu. Na primer, stranica povlači podatke iz CMS-a, developer nešto izmeni u sistemu upravljanja sadržajem i potom želi da se te promene prikažu na veb lokaciji, umesto da kompajliraju celu aplikaciju, mogu da naprave samo jednu stranicu za kompajliranje, odnosno regeneraciju.

Ruteri

Još jedna odlična karakteristika Next.js-a. Ovaj framework dolazi sa svojim ruterima i bez konfiguracija, što znači da developeri ne moraju da se dodatno muče. Potrebno je da samo kreiraju svoju stranicu u namenskom folderu Next.js i framework će obaviti ostatak posla sa rutama koje se kreiraju na osnovu datoteka i direktorijuma.

Lazy loading / podela koda

Ova funkcija pomaže u pružanju boljeg ukupnog korisničkog iskustva. Kao što znate, ponekad je za učitavanje stranica potrebno malo više vremena nego obično. Problem sa ovim je što je više vremena potrebno za prikazivanje traženih informacija, veća je šansa da korisnici napuste lokaciju.

Da bi zaobišao ovaj problem, Next koristi lenjo učitavanje (lazy load) ili podelu koda po hijerarhiji, tako što samo učitava osnovni kod na stranicu.

Uz Next.js, stranice se generišu samo sa osnovnim JavaScript-om i bibliotekama. Umesto da generiše celokupnu JS datoteku i kod aplikacije, Next.js rastavlja aplikaciju na nekoliko različitih resursa, učitavajući samo JavaScript neophodan za tu namensku stranicu.

Next.js ovo omogućuje analizom uvezenih resursa i takođe će uključiti određenu biblioteku u paket.

Ovaj postupak osigurava da učitavanje prve stranice bude što brže sa budućim učitavanjima stranica, a klijentu šalje samo neophodni JS.

Na kraju, često korišćeni uvoz takođe će biti premešten u glavni JS paket ako se koristi na najmanje polovini ukupnog broja stranica veb lokacija.

Hot Code Reloading

Next.js će ponovo učitati stranicu kada otkrije promene koje su sačuvane na disku.

Komponente pojedinačnih datoteka i styled-jsx

Kada developeri raspravljaju o osnovnim karakteristikama Next.js-a, potrebno je spomenuti styled-jsx, CSS sistem specijalno kreiran za ovaj framework, koji omogućava developerima da sve prednosti CSS-a iskoriste direktno u JS datotekama.

CSS sistem se može pohvaliti određenim prednostima, a jedna od njih je ekonomsko generisanje CSS-a. Naime, styled-jsx generiše samo CSS koji se trenutno koristi i automatski ga uklanja kada se komponenta više ne koristi. To znači da developeri nikada neće morati da imaju posla sa nepotrebnim CSS-om.

Kompatibilnost ekosistema

Next.js je u potpunosti kompatibilan sa velikom većinom Node, React i JS ekosistema.

Prefetching

Komponenta „link“ (koja povezuje stranice u aplikaciji) podržava takozvani „prefetch“, koji automatski unapred preuzima različite resurse stranica u pozadini, poput koda koji nedostaje zbog deljenja koda.

Dinamičke komponente

Next.js daje mogućnost dinamičkog uvoza React komponenti i JS modula. Ovo je važno ako biblioteka pokušava da pristupi DOM-u koji ne postoji na serveru. Dinamički uvezeni kod se ne izvršava na serveru, već samo na klijentskoj strani.

Podrška za TypeScript

Kako je Next.js napisan na TypeScript-u, dolazi sa velikom podrškom.

Instalacija i osnove

Pokretanje sistema Next.js prilično je jednostavan proces, s obzirom na to da developeri već imaju pokrenut NPM i NodeJS.

Da biste krenuli najlakšom rutom, u slučaju jednostavnih aplikacija, pomoću komande: npx create-next-app application-name može se koristiti za kreiranje aplikacije na samom početku. Ili ako neko želi šablon, onda će obično posetiti Next.js na Github-u i odabrati onaj koji im je potreban.

Kreiranje prilagođenih konfiguracija

Iako će osnovne karakteristike Next.js-a zadovoljiti većinu developera, oni uvek mogu dodati različite opcije za aplikaciju.

Next.js pruža developerima priliku da prilagode konfiguracije zahvaljujući datoteci next-config.js.

Na primer, ako žele da dodaju Sass podršku aplikaciji, mogu to da učine pomoću paketa next-sass zajedno sa datotekom next-config.js.

Next.js vs Create React App vs Gatsby

Sva tri su neverovatni alati i developeri ih mogu koristiti za značajno poboljšavanje performansi aplikacija. Svi oni rade sa React-om i dolaze sa sličnim apstraktnim veb paketima.

Aplikacija Create React pomalo zaostaje u odnosu na druge dve kada su u pitanju funkcije, jer neće mnogo pomoći u renderovanju na strani servera i bilo čemu što je povezano sa SEO-om ili brzinom.

A, sad - Gatsby i Next.js. Šta je bolja opcija?

Oba će pomoći u prikazivanju na strani servera, međutim, na različite načine.

Gatsby je više statički generator veb lokacija bez servera. To znači da nakon izrade veb lokacije developeri postavljaju krajnji proizvod na statičku hosting lokaciju.

Next.js, s druge strane, pruža pozadinu za odgovore i zahteve za prikazivanje na strani servera, omogućavajući programerima da grade dinamičke veb lokacije i raspoređuju na platformi kompatibilnoj sa Node.js. Framework takođe može da generiše i statičnu lokaciju, ali to nije njegova glavna karakteristika.

Next.js i budućnost React-a

Programeri koji su u toku sa najnovijim trendovima znaju da su Vue i React trenutno najpopularniji framework-ovi. Oni takođe znaju i to da je React, koji je doduše vrlo kvalitetan i koristan alat, ima i svoje nedostatke kada se koristi “out of the box”. Otuda je nastao Next.js, kao odličan alat za prevazilaženje React-ovih nedostataka.

„Problem“ sa React-om

Glavni problem React-a je što nikada nije dizajniran da bude okvir za sve potrebe developera. On je otpočeo kao biblioteka pregleda. Međutim, to je imalo loš efekat na veb razvoj koji je postao izuzetno popularan među developerima koji su počeli da kreiraju ogroman broj uslužnih programa kako bi React iz View okvira transformisali u nešto robusnije i kompletnije.

Ipak, problem ostaje: čak i sada, uz ogromnu podršku zajednice, kada developer želi da započne novi React projekat, putovanje će i dalje biti malo zamorno jer će morati da razmišljaju o stvarima poput:

• State management (iako zapravo nije problem od uvođenja Context API-ja sa React-om 16.3)
• Rešenja za rutiranje (još jedan lako otklonjiv problem čak i bez Next.js)

Uvođenjem Next.js-a, te praznine je puno lakše popuniti (barem većinu njih), a čitav proces razvoja postaje mnogo brži.

Next.js karakteristike

Kao što je već rečeno, Next.js je u osnovi okvir zasnovan na React-u, čineći ga framework-om za framework jer se bavi svim pitanjima koja proizilaze iz reakcija koje nedostaju karakteristike koje bi ga učinile punopravnom i robusnom razvojnom platformom.

Prednosti Next.js framework-a

Next.js je jasan pobednik među developerima, uglavnom zato što skraćuje vreme potrebno za rešavanje različitih problema pre započinjanja projekta zasnovanog na React-u. S druge strane, karakteristike framework-a daju vrednost kako profesionalcima tako i krajnjem korisniku.

Dakle, da rezimiramo najznačajnije prednosti platforme:

• Jednostavan za upotrebu – kada na računaru instalirate potrebne alate, započinjanje novog projekta sa Next.js je jednostavan i brz proces.
• Automatsko razdvajanje koda – već smo spomenuli ovu neverovatno sjajnu funkciju koja može da učini ili prekine uspeh veb stranice u svetu u kojem korisnici neće čekati duže od nekoliko sekundi da se stranica učita. Lagani snopovi koje funkcija koristi omogućavaju brzo učitavanje i nesmetano korisničko iskustvo.
• Prethodno dohvatanje – takođe prethodno obrađeno, funkcija preddohvatanja se uključuje tamo gde se razdvajanje koda završava kao Next.js omogućava lazy load optimizovanih snopova koda u pozadini pružajući još bolje korisničko iskustvo.
• Prikaz na strani servera – i ovo je već pomenuto. SSR omogućava developerima da šalju veb aplikaciju klijentima sa generisanim HTML-om. Tako korisnicima pruža početni prikaz aplikacije dok učitava kod u pozadini.
• Izveštavanje o greškama i HMR – zamena hot-modula postala je obavezna stvar u savremenom veb developmentu. HMR će ponovo stvoriti izmenjene module kad god se promeni kod umesto da ponovo učita celu aplikaciju. Ovo takođe omogućava Next.js-u da pokreće napredni razvojni proces, zajedno sa porukama o greškama, koje se mogu odmah prikazati kad god je kod neispravan. Bez obzira na to koliko je mala greška u kodu, okvir će odrediti ne samo datoteku već i liniju na kojoj se to dešava, čineći rešavanje problema i rešavanje grešaka lakim.
• Ruting – ova funkcija je takođe ranije pomenuta, međutim, takođe je vredno istaći da bi novopridošlicama moglo biti pomalo neobično što se Next.js oslanja više na konvencije nego na konfiguraciju. To znači da će se sve JS datoteke smeštene na stranice ili src / stranice preslikati na određenu URL adresu kojoj korisnici mogu jednostavno da pristupe iz pregledača.
• Povezivanje – okvir takođe sadrži ugrađeno rešenje za povezivanje kojem programeri mogu pristupiti u sledećem paketu / linku. Ova komponenta će pomoći povezivanju stranica na optimizovaniji način.
• Podrška za API – developeri će primetiti da Next.js nije samo front-end framework. Oni takođe mogu sa lakoćom da kreiraju pozadinske krajnje tačke. Kao i kod funkcije rutinga, svaka datoteka koja se nalazi u direktorijumu pages / api može se koristiti kao krajnja tačka kojoj korisnici mogu pristupiti iz brauzera.
• Statički generator stranica – Kao što je već istaknuto, ovaj okvir omogućava brzo generisanje statičkih stranica. SSG nema komunikaciju sa bazom kada korisnik poseti stranicu i ovo je prvo što vide kada pristupe.

Nedostaci Next.js-a

Istina je da nijedan okvir nije savršen. Za developere, framework koji će najviše koristiti uglavnom se svodi na lične preferencije, nužnost ili efikasnost. S obzirom na to, vremenom će primetiti da svaka platforma ima bar malo prostora za poboljšanje.

Što se tiče Nekxt.js-a, neki programeri su kritikovali funkcije state management-a, ili njen nedostatak. Ove tvrdnje mogu izgledati pomalo neosnovane, posebno nakon uvođenja kontekstualnog API-ja. S druge strane, developeri takođe mogu da koriste Apollo ili Redux da bi zaobišli ove probleme.

Drugi su napomenuli da ne postoji gotova podrška za CSS-in-JS tehnologiju. Iako je tačno da developeri mogu da koriste i SCSS i CSS od samog početka, međutim, tamo gde su u pitanju najnoviji stilski pristupi i modeli, dodavanje novog koda je neophodno. Iako ovo nije toliko veliki problem, nekima će dodatan rad biti naporan.

Jedan od glavnih problema je taj što kada se kreiraju statičke stranice i JSON datoteke, korisnik mora da preuzme obe (za određenu stranicu koju poseti, a ne za celu aplikaciju).

Zaključak

Sve u svemu, Next.js je zaista koristan framework koji dopunjuje React ili bar njegove praznine omogućavajući brži razvojni proces.

Za većinu developera, Nekxt.js će od samog početka obezbediti konfigurisano i radno razvojno okruženje za stvaranje širokog spektra različitih veb aplikacija, , uključujući i one posvećene izradi veb aplikacija.

Framework je sjajan za projekte gde postoji renderovanje na strani servera, statički generisane stranice, aplikacije na jednoj stranici i još mnogo toga. Zajedno sa API podrškom, Next.js se može koristi za kreiranje kompletnih stranica koristeći pozadinsku logiku.

Nedostaci uključuju izazove sa kojima se suočavaju statične stranice i JSON datoteke, kao i savremeni pristupi stilu, međutim, i njih je moguće zaobići uz malo dodatnog rada.