Nextjs za sve - s nekim osnovnim znanjem o Reactu

Uz neko osnovno znanje o Reactu i JavaScriptu, bit ćete na putu

Next.js je JavaScript okvir koji je stvorio Zeit. Omogućuje vam izradu generiranja na strani poslužitelja i statičkih web aplikacija pomoću React-a. To je izvrstan alat za izgradnju vaše sljedeće web stranice. Ima mnoge sjajne značajke i prednosti, što Nextjs mogu učiniti vašom prvom opcijom za izgradnju vaše sljedeće web aplikacije.

Ne trebate nikakvu konfiguraciju webpacka ili slično da biste počeli koristiti Next.js. Dolazi sa svojom konfiguracijom. Sve što trebate je pokrenuti npm run devi početi graditi svoju aplikaciju?.

U ovom ćemo članku istražiti sjajne značajke i trikove Next.js-a i kako s njim započeti izgradnju sljedeće web stranice.

Ovaj post pretpostavlja da imate neko osnovno znanje o Reactu i JavaScriptu.

Evo nekoliko izvrsnih web stranica napravljenih pomoću Next.js:

  • Sintaksa.fm
  • npmjs
  • materijal-ui.io
  • expo.io
  • codemenitor.io

Čak sam i Nextjs koristio za izradu svoje osobne web stranice saidhayani.me - izvorni kod na GitHubu možete ovdje.

Početak rada sa Next.js

Da biste započeli s Next.js, na vašem računalu morate imati instaliran node.js i to je sve. Next.js je poput bilo koje druge aplikacije node.js - za instaliranje ovisnosti trebaju vam npm ili Yarn.

Krenimo i stvorimo projekt Next.js.

Prvo, moramo stvoriti mapu i dati joj ime po našem izboru. Nazvat ću to nextjs-app.

To lako možete učiniti pomoću ovog naredbenog retka:

mkdir nextjs-app

Nakon stvaranja mape nextjs-app, otvorite je na terminalu. Pokrenite npm init za stvaranje package.json datoteke.

Dalje, moramo instalirati naše ovisnosti.

Instaliranje Next.js

  • pomoću pređe, tip
yarn add next
  • pomoću npm, upišite:
npm i next --save

Tada moramo instalirati React jer Next.js koristi React. Prvi redak u nastavku koristi pređu za instalaciju.

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

Nakon toga morate stvoriti dvije potrebne mape: pagesi static. Next.js neće raditi bez njih !!

mkdir pages static

Vi mora imati ovu strukturu nakon pokretanja ove naredbe:

nextjs-app -pages -static -package.json

A onda jednostavno možete pokrenuti npm next devi otvoriti //localhost:3000/ u pregledniku.

NotFoundStranica će se pojaviti, jer nemamo nikakvu stranicu još!

Pa kreirajmo homestranicu i ulaznu točku index.js.

touch index.js home.js

A onda možete napisati normalnu komponentu React. Kao što sam gore rekao, Next.js je za izgradnju React aplikacija.

Evo kako home.jsizgleda naš izgled:

I ovdje je naša index.jsdatoteka:

Next.js ima značajku ponovnog učitavanja uživo. Sve što trebate je samo promijeniti i spremiti, a Next.js automatski će sastaviti i ponovo učitati aplikaciju za vas.

Napomena : Next.js je poput bilo kojeg drugog alata za prikazivanje na strani poslužitelja koji nam je potreban za definiranje zadane stranice naše aplikacije, u našem slučaju je index.js.

Ovu promjenu vidjet ćete u pregledniku nakon pokretanja npm next dev:

Čestitamo! Upravo smo stvorili aplikaciju Next.js s nekoliko jednostavnih koraka. Ove upute za stvaranje aplikacije Next.js opisane su u službenim dokumentima Next.js.

Moja alternativa

Obično ne koristim ovaj način. Umjesto toga koristim CLI create-next-app koji će sve te stvari umjesto mene učiniti u jednom retku.

npx create-next-app my-app

Ovdje možete pogledati dokumentaciju da biste istražili više značajki.

Stvorite prilagođene konfiguracije za Next.js

Ponekad biste mogli dodati neke dodatne ovisnosti ili pakete u svoju aplikaciju Next.js.

Next.js daje vam mogućnost prilagodbe vaše konfiguracije pomoću next-config.jsdatoteke.

Na primjer, možda ćete htjeti dodati sass podršku u svoju aplikaciju. U ovom slučaju morate koristiti paket next-sass i morate ga dodati u next-config.jsdatoteku kao u donjem primjeru:

Prvo instalirajte next-sass:

yarn add @zeit/next-sass

Zatim ga uključite u next-config.jsdatoteku:

A zatim možete stvoriti napisati svoj sass kôd i uvesti ga u svoju komponentu:

Uvoz sass datoteke u našu komponentu:

I evo rezultata:

Wow, nije li bilo tako jednostavno dodati sass podršku u aplikaciju Next.js?

U ovom smo trenutku upravo pokrili dio za instalaciju i konfiguraciju. Sada razgovarajmo o značajkama Next.js-a!

Značajke

Next.js dolazi s hrpom izvrsnih značajki poput prikaza na strani poslužitelja, usmjerivača i lijenog učitavanja.

Prikaz na strani poslužitelja

Next.js prema zadanim postavkama izvodi generiranje na strani poslužitelja. To vašu aplikaciju čini optimiziranom za tražilice. Također, možete integrirati bilo koji međuprodukt kao što je express.js ili Hapi.js, a možete pokrenuti bilo koju bazu podataka poput MongoDB ili MySQL.

Govoreći o optimizaciji tražilice, Next.js dolazi s Headkomponentom koja vam omogućuje dodavanje i izradu dinamičkih metatagova . To je moja omiljena značajka - možete izrađivati ​​prilagođene i dinamičke metaoznake. Oni omogućuju indeksiranje vaše web stranice pomoću tražilica poput Googlea. Evo primjera Headkomponente:

A Headkomponentu možete uvesti i koristiti na bilo kojoj drugoj stranici:

Super!

Napomena : S Next.js ne trebate uvoziti React jer Next.js to čini umjesto vas.

Generiranje statične web stranice s Next.js

Kao i generiranje na strani poslužitelja, i dalje možete kompajlirati i izvesti svoju aplikaciju kao HTML statično web mjesto i rasporediti ga na statičkom web hostingu poput GitHub stranice ili netlify. Ovdje u službenim dokumentima možete saznati više o tome kako napraviti statično web mjesto s Next.jsom.

Usmjerivači

Ovo je još jedna od sjajnih značajki Next.js. Kada koristite aplikaciju create-response-obično, obično morate instalirati response-router i stvoriti njegovu prilagođenu konfiguraciju.

Next.js dolazi sa vlastitim usmjerivačima s nula konfiguracija. Ne trebaju vam nikakve dodatne konfiguracije usmjerivača. Samo stvorite svoju stranicu unutar pagesmape i Next.js će se pobrinuti za sve konfiguracije usmjeravanja.

Krenimo i stvorimo prilagođenu navigaciju kako bi sve bilo jasno!

Za navigaciju između stranica, Next.js ima Linkmetodu upravljanja navigacijom.

Stvorimo blog.jsi contact.jsstranice:

blog.js

I evo contact.jsstranice:

I sada moramo biti u mogućnosti kretati se između tih stranica?

Wow to tako lako i super strašno.

Lijeno utovar

Lijeno učitavanje čini vašu aplikaciju boljim korisničkim iskustvom. Ponekad se stranici može učitati vrijeme. Korisnik može napustiti vašu aplikaciju ako učitavanje traje više od 30 sekundi.

Način da se to izbjegne je korištenje nekog trika koji korisniku ukazuje na to da se stranica učitava, na primjer prikazivanjem okretača. Lijeno učitavanje ili razdvajanje koda jedna je od značajki koja vam omogućuje rješavanje i kontroliranje sporog učitavanja tako da na svoju stranicu učitavate samo potreban kôd.

Next.js dolazi sa vlastitom metodom podjele koda. Pruža nam metodu koja se naziva dynamicza učitavanje naše komponente, kao u donjem primjeru:

Izvorni kod ovih primjera možete pronaći na GitHubu

To je sve. Nadam se da je to dovoljno i nadam se da vam ovaj članak daje jasnu ideju o Next.js-u i njegovim značajkama. O ostalim značajkama možete saznati u službenim dokumentima.

Ako imate još nekih dodataka ovom postu, možete ostaviti komentar ispod, a ako vam se sviđa ovaj post, molimo pritisnite clap? i podijeliti.

Raspravljati na Twitteru ?.

Inače, nedavno sam surađivao s jakom skupinom softverskih inženjera za jednu od svojih mobilnih aplikacija. Organizacija je bila izvrsna, a proizvod je isporučen vrlo brzo, puno brže od ostalih tvrtki i slobodnjaka s kojima sam radio i mislim da ih iskreno mogu preporučiti za druge vani projekte. Pošaljite mi e-mail ako želite stupiti u kontakt - [email protected]