Cuprins[Ascunde][Spectacol]
Când alegeți o bibliotecă de software sau un cadru, de obicei se ia în considerare experiența dezvoltatorului.
Când menționez „experiența dezvoltatorului”, mă refer la modul în care dezvoltatorii fac de fapt munca. Dezvoltatorii aleg biblioteci sau cadre care sunt plăcute de utilizat.
Acesta este unul dintre motivele principale pentru care acum avem cele mai populare biblioteci și cadre. În calitate de dezvoltatori, nu trebuie să începem de la zero atunci când există instrumente existente create pentru a ne ajuta în sarcinile noastre.
Framework-urile sunt bucăți de software care sunt create și utilizate de dezvoltatori pentru a construi aplicații, iar NextJS este unul dintre ele.
În această postare, vom trece peste Nextjs, caracteristicile sale cheie și cum îl putem folosi pentru a construi o aplicație. Să sărim direct înăuntru.
Ce este Next.js?
Next.js este un cadru JavaScript pentru a construi rapid și ușor pagini web statice și aplicații online bazate pe React. Vă permite să proiectați aplicații web grozave pentru o varietate de platforme, inclusiv Windows, Linux și Mac.
Ar trebui să fiți familiarizat cu cadrul Next.js dacă aveți o familiaritate minimă cu react și doriți să aflați mai multe despre ecosistemul react.
Chiar dacă Next.js vine cu tot ce aveți nevoie pentru a începe, puteți selecta între NPM și Yarn, JavaScript și TypeScript, CSS și SCSS, export static și implementare fără server.
DESCRIERE
- Rutarea se face automat – nu trebuie să configurați nimic deoarece orice URL este mapat la sistemul de fișiere, la fișierele din folderul pagini (aveți opțiuni de personalizare, desigur).
- Componentele unui singur fișier – Este simplu să adăugați stiluri încadrate în componentă folosind styled-jsx, care este complet integrat și produs de aceeași echipă.
- Reîncărcarea unui cod fierbinte – Când Next.js detectează o modificare salvată pe disc, reîncarcă pagina.
- Componente dinamice – Puteți încărca dinamic module JavaScript și React Components.
- Exporturi statice – Next.js vă permite să exportați un site complet static din aplicația dvs. cu următoarea comandă de export.
- Compatibilitate cu mediul – Next.js se integrează perfect cu ecosistemele JavaScript, Node și React.
- Împărțirea automată a codurilor – Doar bibliotecile și JavaScript care sunt necesare sunt folosite pentru a reda paginile. În loc să creeze un singur fișier JavaScript care să conțină tot codul aplicației, Next.js împarte inteligent aplicația în mai multe resurse.
Cum se creează o aplicație next.js?
Instalare
Puteți utiliza comanda node npx pentru a instala și a construi un proiect Next.js.
Aceasta va genera un folder și toate fișierele, configurațiile și alte elemente necesare pentru a rula un proiect Next.js.
Puteți lansa aplicația odată ce aceasta a fost generată.
Pagini și rutare
Pentru a gestiona rutele cu Next.js, nu trebuie să folosim un cadru de rutare. Rutarea cu Next.js este ușor de configurat. Când utilizați comanda create-next-app pentru a crea o nouă aplicație Next.js, aplicația creează un folder numit „pagini” în mod implicit.
Acest folder „pagini” este locul în care vă întrețineți rutele. Ca rezultat, fiecare fișier de componente reacts din subdirector va fi tratat ca o rută separată.
De exemplu, dacă folderul conține acele fișiere:
- index.js
- despre.js
- aricles.js
Acest fișier va fi transformat automat în trei moduri:
- Pagina de index localhost/index
- Pagina despre localhost/despre
- Pagina de blog localhost/articole
Un exemplu de pagină about.js este prezentat mai jos. Nu este furnizat nimic despre pagină, după cum puteți vedea. Este pur și simplu o componentă funcțională standard React.
rute
Pentru a face rute imbricate, trebuie mai întâi să stabiliți un subdosar. De exemplu: pagini/articole. Creați componenta de reacție „contact.js” în acel folder și va genera pagina localhost/articles/contact.
Dacă pui un fișier în pages/articles.js și altul în pages/articles/index.js. Ambele reflectă aceeași cale localhost/blog. În această situație, Next.js va reda doar fișierul article.js. Ce zici de rutele dinamice, în care fiecare postare de blog are propriul său drum:
- localhost/blog/primul-articol
- localhost/blog/-al doilea articol
Folosind notația paranteze, puteți defini o rută dinamică în Next.js. De exemplu: pagini/articol/[slug].js
Link-uri rute
Acum ați terminat primul traseu. Bănuiesc că întrebați cum să conectați paginile la acele rute. Veți avea nevoie de „next/link” pentru a face acest lucru.
Iată un exemplu de pagină de pornire care include un link către pagina Despre:
Dacă doriți să stilați linkul, utilizați următoarea sintaxă:
Rute de redirecționare
Ce se întâmplă dacă trebuie să forțați o redirecționare către o anumită pagină? De exemplu, când este apăsat un buton? Puteți realiza acest lucru folosind „router.push”:
SEO
Paginile din aplicațiile web necesită elemente meta (cap) în plus față de datele din corpul HTML. Acest lucru va necesita instalarea unei cerințe suplimentare numite React Helmet într-o aplicație React.
Putem folosi componenta Head din next/head în Next pentru a adăuga cu ușurință metadate la paginile noastre web care vor fi afișate în rezultatele căutării și încorporate:
Componente
Va trebui frecvent să dezvoltați componente sau un fișier de aspect. De exemplu, o componentă care redă bara de navigare. Tocmai am folosit folderul de pagini până acum. Ce se întâmplă dacă componenta dvs. nu este menită să fie o pagină de rută?
Nu doriți ca utilizatorul să navigheze la o pagină, cum ar fi localhost/navbar. Dacă plasați componenta Navbar.js în folderul pagini, asta se va întâmpla. Ce ar trebui să faci în situație?
Pur și simplu stocați toate componentele dvs. „nu o pagină” într-un folder separat. Majoritatea proiectelor Next.js folosesc porecla „componente”, iar acest folder este generat în folderul rădăcină al proiectului dumneavoastră.
Componenta capului
Încărcarea inițială a paginii este redată de Next.js pe partea serverului. Face acest lucru modificând HTML-ul paginii dvs. Secțiunea antet este inclusă.
Componenta Next.js Head este folosită pentru a oferi etichete de secțiune antet, cum ar fi titlul și meta. Componenta Head este utilizată în acest exemplu de componentă Layout.
Creați pagina 404 nu a fost găsită
Este posibil să vă creați propria pagină de eroare 404. Poate doriți să personalizați mesajul sau să adăugați propriul design de pagină. În folderul pagini, creați fișierul 404.js.
Când apare o eroare 404, Next.js va redirecționa automat către această pagină. Iată un exemplu de pagină 404 personalizată:
Preluarea datelor de pe partea serverului
În loc să descărcați date pe partea clientului, Next.js vă permite să efectuați o populare inițială a datelor, ceea ce implică trimiterea paginii cu datele deja populate de pe server.
Aveți două opțiuni pentru a implementa preluarea datelor de pe partea serverului:
- Datele ar trebui preluate la fiecare cerere.
- Obțineți date o singură dată pe tot parcursul procesului de construcție (site static)
Preluați date pentru fiecare solicitare
Metoda getServerSideProps este folosită pentru a randa fiecare cerere pe partea de server. Această funcție poate fi inclusă la sfârșitul fișierului component. Next.js va popula automat elementele de recuzită ale componentelor dvs. cu obiectul getServerSideProps dacă această funcție este prezentă în fișierul dvs. de componentă.
Preluați date în timpul construirii
Metoda getStaticProps este folosită pentru a reda partea serverului în timpul construirii. Această funcție poate fi inclusă la sfârșitul fișierului component. Această metodă rulează codul serverului și trimite o cerere GET către server, dar o singură dată când proiectul nostru este terminat.
De ce ar trebui să înveți Next.js?
Unul dintre motive este că Next.js este construit pe React, un set de instrumente de dezvoltare front-end pentru crearea de interfețe cu utilizatorul acestea sunt alegerea mea preferată pentru proiectarea aplicațiilor web.
Dar nu ar fi suficient dacă Next.js nu ar fi fost bun la ceea ce a făcut... nu?
Deci, ce face mai exact?
Mai întâi trebuie să definim câteva concepte pentru a o înțelege. Next.js a câștigat popularitate deoarece a rezolvat o problemă pe care mulți dezvoltatori web au avut-o cu aplicațiile web la nivelul clientului (în browser). Aceste aplicații cu o singură pagină (SPA) au avut o experiență mai bună, deoarece nu au avut nevoie de utilizator să reîncarce pagina și au permis mai multă interactivitate.
Cu toate acestea, deoarece cea mai mare parte a materialului dintr-o astfel de aplicație devine vizibilă numai atunci când este efectuată în browser, crawlerele web au dificultăți în înțelegerea conținutului text al unei astfel de aplicații.
Drept urmare, în ciuda popularității lor, multe SPA-uri au rămas în mare parte anonime pentru marile motoare de căutare precum Google. Next.js include acum un mecanism încorporat mai robust pentru randarea pe server (SSR) a componentelor React.
Next.js permite dezvoltatorilor să construiască cod JavaScript pe server în timpul procesului de construire și să ofere utilizatorului HTML de bază, indexabil.
Pro-uri
- Excelent pentru experiența utilizatorului
- Excelent pentru SEO
- Creați un site web static super-rapid, care se comportă ca un dinamic
- Flexibilitate în construirea UI și UX.
- Multe avantaje de dezvoltare
- Mare sprijin comunitar
Contra
- Site-urile web sau aplicațiile au o anumită perioadă de timp pentru a fi construite sau dezvoltate.
- Pentru anumite sarcini, Next.js este inadecvat. Dezvoltatorii ar trebui să poată construi rute dinamice folosind instrumentele Node.js.
Concluzie
După cum puteți vedea, Next.js simplifică dezvoltarea aplicației React și vă permite să vă concentrați pe ceea ce contează cel mai mult – logica aplicației și interfața de utilizare. Include tot ceea ce este necesar pentru a crea aplicații moderne, bogate în frontend și bazate pe API.
Este, de asemenea, potrivit pentru proiectele de conținut, cum ar fi bloguri și site-uri web de afaceri, datorită capacității sale de a construi pagini HTML statice.
Cu edițiile actuale, Next.js nu numai că menține un nivel ridicat de experiență pentru dezvoltatori, ci oferă și instrumente pentru creșterea performanței vizuale și a experienței utilizatorului, asigurând un viitor strălucit pentru acest cadru.
Lasă un comentariu