Cu câteva cunoștințe de bază despre React și JavaScript, veți fi pe drum

Next.js este un cadru JavaScript creat de Zeit. Vă permite să creați randare pe partea de server și aplicații web statice folosind React. Este un instrument excelent pentru a vă construi următorul site web. Are multe caracteristici și avantaje extraordinare, ceea ce poate face din Nextjs prima opțiune pentru construirea următoarei aplicații web.

Nu aveți nevoie de nicio configurație pentru webpack sau similar pentru a începe să utilizați Next.js. Vine cu configurația sa. Tot ce ai nevoie este să fugi npm run dev și începeți să vă construiți aplicația?

În acest articol, vom explora caracteristicile și trucurile extraordinare ale Next.js și cum să începeți să vă construiți următorul site web cu acesta.

Această postare presupune că aveți cunoștințe de bază despre React și JavaScript.

Iată câteva site-uri web grozave create cu Next.js:

Am folosit chiar Nextjs pentru a-mi construi site-ul personal saidhayani.me – puteți obține codul sursă pe GitHub aici.

Noțiuni de bază cu Next.js

Pentru a începe cu Next.js, trebuie să aveți node.js instalat în mașina dvs. și atât. Next.js este ca orice altă aplicație node.js – aveți nevoie de npm sau Yarn pentru a instala dependențe.

Să începem și să creăm un proiect Next.js.

În primul rând, trebuie să creăm un folder și să-i dăm un nume la alegere. O voi numi nextjs-app.

Puteți face acest lucru cu ușurință cu această linie de comandă:

Nextjs pentru toata lumea cu unele cunostinte de baza
mkdir nextjs-app

După crearea folderului nextjs-app, deschideți-l pe terminal. Alerga npm init pentru a crea package.json fişier.

Apoi, trebuie să ne instalăm dependențele.

Instalarea Next.js

  • folosind Yarn, tastați
yarn add next
  • folosind npm, tastați:
npm i next --save

Apoi trebuie să instalăm React deoarece Next.js folosește React. Prima linie de mai jos folosește Yarn pentru instalare.

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

După aceea, trebuie să creați două foldere necesare: pages și static . Next.js nu va funcționa fără ele !!

1611604149 108 Nextjs pentru toata lumea cu unele cunostinte de baza
mkdir pages static

Tu trebuie sa au această structură după executarea acestor comenzi:

nextjs-app  -pages  -static  -package.json

Și apoi pur și simplu puteți alerga npm next dev și apoi deschideți http://localhost:3000/ în browserul dvs.

NotFound pagina va apărea pentru că încă nu avem nicio pagină!

1611604149 175 Nextjs pentru toata lumea cu unele cunostinte de baza

Deci, să creăm un home pagină și un punct de intrare index.js.

1611604149 238 Nextjs pentru toata lumea cu unele cunostinte de baza
touch index.js home.js

Și apoi puteți scrie o componentă normală React. După cum am spus mai sus, Next.js este destinat construirii aplicațiilor React.

Iată ce este al nostru home.js se pare ca:

1611604149 449 Nextjs pentru toata lumea cu unele cunostinte de baza

Și aici este al nostru index.js fişier:

1611604150 693 Nextjs pentru toata lumea cu unele cunostinte de baza

Next.js are o funcție de reîncărcare live. Tot ce trebuie să faceți este să schimbați și să salvați, iar Next.js va compila și reîncărca aplicația automat pentru dvs.

Notă: Next.js este ca orice alt instrument de redare pe partea de server de care avem nevoie pentru a defini pagina implicită a aplicației noastre, în cazul nostru este index.js.

Această schimbare o veți vedea în browser după ce rulați npm next dev:

1611604150 662 Nextjs pentru toata lumea cu unele cunostinte de baza

Felicitări! Tocmai am creat o aplicație Next.js cu câțiva pași simpli. Aceste instrucțiuni pentru a crea o aplicație Next.js sunt descrise în documente oficiale ale Next.js .

Alternativa mea

De obicei nu folosesc așa. Eu folosesc creați-următoarea-aplicație În schimb, CLI va face toate aceste lucruri pentru mine într-o singură linie.

npx create-next-app my-app
1611604150 72 Nextjs pentru toata lumea cu unele cunostinte de baza

Puteți consulta documentația aici pentru a explora mai multe caracteristici.

Creați configurații personalizate pentru Next.js

Uneori, poate doriți să adăugați câteva dependențe sau pachete suplimentare la aplicația dvs. Next.js.

Next.js vă oferă opțiunea de a vă personaliza configurația utilizând un next-config.js fişier.

De exemplu, poate doriți să adăugați asistență sass la aplicația dvs. În acest caz trebuie să utilizați next-sass pachet și trebuie să-l adăugați la next-config.js ca în exemplul de mai jos:

Mai întâi, instalați next-sass:

1611604150 905 Nextjs pentru toata lumea cu unele cunostinte de baza
yarn add @zeit/next-sass

Apoi includeți-l în interiorul next-config.js fişier:

1611604151 291 Nextjs pentru toata lumea cu unele cunostinte de baza

Și apoi puteți să creați codul sass și să îl importați în componenta dvs.:

1611604151 19 Nextjs pentru toata lumea cu unele cunostinte de baza

Importul fișierului sass în componenta noastră:

1611604151 88 Nextjs pentru toata lumea cu unele cunostinte de baza

Și iată rezultatul:

1611604151 849 Nextjs pentru toata lumea cu unele cunostinte de baza

Uau, nu a fost asta super ușor pentru a adăuga asistență sass la aplicația Next.js?

În acest moment, tocmai am acoperit partea de instalare și configurare. Acum să vorbim despre caracteristicile Next.js!

Caracteristicile

Next.js vine cu o grămadă de caracteristici extraordinare, cum ar fi redarea de pe server, routerele și încărcarea leneșă.

Redare pe partea de server

Next.js efectuează în mod implicit redarea pe partea de server. Acest lucru face ca aplicația dvs. să fie optimizată pentru motoarele de căutare. De asemenea, puteți integra orice middleware precum express.js sau Hapi.js, și puteți rula orice bază de date, cum ar fi MongoDB sau MySQL.

Apropo de optimizarea motorului de căutare, Next.js vine cu un Head componentă care vă permite să adăugați și să creați metaetichete dinamice. Este caracteristica mea preferată – puteți crea metaetichete dinamice și personalizate. Acestea fac ca site-ul dvs. web să poată fi indexat de motoarele de căutare precum Google. Iată un exemplu de Head componentă:

1611604152 991 Nextjs pentru toata lumea cu unele cunostinte de baza

Și puteți importa și utilizaHead componentă în orice altă pagină:

1611604152 911 Nextjs pentru toata lumea cu unele cunostinte de baza

Minunat!

Notă: Cu Next.js tu nu trebuie să importați React deoarece Next.js face acest lucru pentru dvs.

Generarea unui site web static cu Next.js

Pe lângă redarea de pe server, puteți totuși să compilați și să exportați aplicația dvs. ca site web static HTML și să o implementați pe un site web găzduit, cum ar fi o pagină GitHub sau netlify. Puteți afla mai multe despre cum să creați un site web static cu Next.js aici în documentele oficiale.

Routere

Aceasta este încă una dintre caracteristicile extraordinare ale Next.js. Când utilizați creați-reacționați-aplicație, de obicei trebuie să instalați react-router și creați configurația personalizată.

Next.js vine cu propriile routere cu zero configuri. Nu aveți nevoie de nicio configurație suplimentară a routerelor. Creați-vă pagina în interiorul pages folder și Next.js se vor ocupa de toate configurațiile de rutare.

Să mergem mai departe și să creăm o navigare personalizată pentru a clarifica totul!

Pentru a naviga între pagini, Next.js are Link metoda de gestionare a navigării.

1611604153 200 Nextjs pentru toata lumea cu unele cunostinte de baza

Să creăm blog.js și contact.js pagini:

blog.js

1611604153 840 Nextjs pentru toata lumea cu unele cunostinte de baza

Și aici este contact.js pagină:

1611604153 66 Nextjs pentru toata lumea cu unele cunostinte de baza

Și acum trebuie să putem naviga între acele pagini?

Nextjs pentru toata lumea cu unele cunostinte de baza

Uau atât de ușor și super minunat.

Încărcare leneșă

Încărcarea leneșă face ca aplicația dvs. să ofere o experiență de utilizare mai bună. Uneori, pagina poate dura timp pentru încărcare. Utilizatorul vă poate abandona aplicația dacă încărcarea durează mai mult de 30 de secunde.

Modul de a evita acest lucru este de a folosi un truc pentru a indica utilizatorului că pagina se încarcă, de exemplu prin afișarea unui filator. Încărcarea leneșă sau împărțirea codului este una dintre caracteristicile care vă permit să faceți față și să controlați încărcarea lentă, astfel încât să încărcați doar codul necesar în pagina dvs.

Next.js vine cu propria sa metodă de divizare a codului. Ne oferă o metodă, numită dynamic, pentru a încărca componenta noastră, ca în exemplul de mai jos:

1611604154 964 Nextjs pentru toata lumea cu unele cunostinte de baza

Puteți găsi codul sursă al acestor exemple pe GitHub

Asta e tot. Sper că este suficient și sper că acest articol vă va oferi o idee clară despre Next.js și caracteristicile sale. Puteți afla mai multe despre alte caracteristici în documente oficiale.

Dacă aveți alte adăugiri la această postare, puteți lăsa un comentariu mai jos și, dacă vă place această postare, vă rugăm să apăsați clap? și împărtășește.

Discutați pe Stare de nervozitate?

Apropo, am lucrat recent cu un grup puternic de ingineri software pentru una dintre aplicațiile mele mobile. Organizația a fost grozavă, iar produsul a fost livrat foarte repede, mult mai rapid decât alte firme și freelanceri cu care am lucrat și cred că pot să le recomand sincer pentru alte proiecte. Trimiteți-mi un e-mail dacă doriți să luați legătura – said@devsdata.com.