Table di cuntinutu[Piattà][Mostra]
Quandu sceglite una biblioteca di software o un framework, l'esperienza di u sviluppatore hè generalmente presa in contu.
Quandu mencionu "esperienza di sviluppatore", mi riferite à cumu i sviluppatori facenu veramente u travagliu. I sviluppatori sceglienu biblioteche o frameworks chì sò piacevuli à aduprà.
Questu hè unu di i mutivi primari perchè avemu avà i biblioteche è i quadri più populari. Cum'è sviluppatori, ùn avemu micca da principià da zero quandu ci sò strumenti esistenti creati per aiutà à noi cù i nostri compiti.
Frameworks sò pezzi di software chì sò creati è utilizati da i sviluppatori per custruisce applicazioni, è NextJS hè unu di elli.
In questu post, andemu nantu à Nextjs, e so caratteristiche chjave, è cumu pudemu usà per custruisce una applicazione. Andemu ghjustu in.
Cosa hè Next.js?
Next.js hè un framework JavaScript per custruisce rapidamente è facilmente pagine web statiche è applicazioni in linea basate in React. Permette di cuncepisce grandi app Web per una varietà di piattaforme, cumprese Windows, Linux è Mac.
Duvete esse familiarizatu cù u framework Next.js si avete una familiarità minima cù reagisce è vulete sapè più nantu à l'ecosistema di reazione.
Ancu s'è Next.js vene cun tuttu ciò chì avete bisognu per inizià, pudete selezziunate trà NPM è Yarn, JavaScript è TypeScript, CSS è SCSS, esportazione statica è implementazione senza server.
Features
- U routing hè fattu in autumàticu - Ùn avete bisognu di cunfigurà nunda perchè ogni URL hè mappatu à u sistema di filesystem, à i schedari in u cartulare di e pagine (avete opzioni di persunalizazione, sicuru).
- Componenti di un Unicu File - Hè simplice per aghjunghje stili scoped à u cumpunente usendu styled-jsx, chì hè totalmente integratu è pruduttu da a stessa squadra.
- Reloading a Hot Code - Quandu Next.js detecta una mudificazione salvata à u discu, ricarica a pagina.
- Componenti Dinamici - Pudete carica dinamicamente moduli JavaScript è React Components.
- Esportazioni statiche - Next.js permette di esportà un situ cumpletamente staticu da a vostra app cù u prossimu cumandamentu di l'esportazione.
- Compatibilità cù l'ambiente - Next.js si integra perfettamente cù l'ecosistema JavaScript, Node è React.
- Split Codici automaticamente - Solu e biblioteche è JavaScript chì sò necessarii sò usati per rende e pagine. Invece di creà un unicu schedariu JavaScript chì cuntene tuttu u codice di l'app, Next.js divide in modu intelligente l'app in parechje risorse.
Cumu creà una applicazione next.js?
stallanu
Pudete aduprà u cumandimu node npx per installà è custruisce un prughjettu Next.js.
Questu generarà un cartulare è tutti i schedarii, cunfigurazioni è altri elementi necessarii per eseguisce un prughjettu Next.js.
Pudete lancià l'app una volta chì hè stata generata.
Pagine & Routing
Per trattà e rotte cù Next.js, ùn avemu micca bisognu di impiegà un framework di routing. Routing cù Next.js hè una brisa per stallà. Quandu utilizate u cumandamentu create-next-app per custruisce una nova app Next.js, l'app crea un cartulare chjamatu "pagine" per automaticamente.
Stu cartulare "pagine" hè induve mantene e vostre rotte. In u risultatu, ogni file di cumpunenti reagisce in u subdirectory serà trattatu cum'è una strada separata.
Per esempiu, se u cartulare cuntene questi schedari:
- index.js
- circa.js
- aricles.js
Stu schedariu serà trasfurmatu automaticamente in trè manere:
- A pagina index localhost/index
- A pagina circa localhost/circa
- A pagina di blog localhost / articuli
Un esempiu di una pagina about.js hè mostratu quì sottu. Nunda hè furnitu nantu à a pagina, cum'è pudete vede. Hè solu un cumpunente funziunale standard di React.
Rutes
Per fà rotte nidificate, prima deve stabilisce una subcartula. Per esempiu: pagine / articuli. Crea u vostru cumpunente di reazione "contact.js" in quellu cartulare, è generà a pagina localhost/articles/contact.
Se mette un schedariu in pages/articles.js è un altru in pages/articles/index.js. I dui riflettenu u listessu percorsu localhost/blog. In questa situazione, Next.js solu rende u schedariu article.js. E rotte dinamiche, in quale ogni post di blog hà u so propiu percorsu:
- localhost/blog/primu articulu
- localhost/blog/-second-article
Utilizendu a notazione di parentesi, pudete definisce una ruta dinamica in Next.js. Per esempiu: pages/article/[slug].js
Link Routes
Avete avà finitu a vostra prima strada. Pensu chì vi dumandate cumu cunnette e pagine à queste rotte. Avete bisognu di 'next/link' per fà.
Eccu un esempiu di una pagina di casa chì include un ligame à a pagina About:
Se vulete stilà u ligame, utilizate a sintassi seguente:
Redirect Routes
E se avete bisognu di furzà una redirezzione à una certa pagina? Per esempiu, quandu un buttone hè pressatu? Pudete fà questu utilizendu 'router.push':
SEO
E pagine in l'applicazioni web necessitanu elementi meta (testa) in più di dati in u corpu HTML. Questu averebbe bisognu di l'installazione di un requisitu extra chjamatu React Helmet in una React Application.
Pudemu aduprà u cumpunente Head da next/head in Next per aghjunghje facilmente metadati à e nostre pagine web chì saranu affissate in i risultati di ricerca è incrustate:
Elvetia
Avete spessu bisognu di sviluppà cumpunenti o un schedariu di layout. Per esempiu, un cumpunente chì rende a barra di navigazione. Avemu solu usatu u cartulare di e pagine finu à avà. E se u vostru cumpunente ùn hè micca pensatu à esse una pagina di rotta?
Ùn vulete micca chì l'utilizatore navigà à una pagina cum'è un host local/navbar. Se mette u componente Navbar.js in u cartulare di e pagine, hè ciò chì succede. Chì duvete fà in a situazione?
Simply almacenà tutti i vostri cumpunenti "micca una pagina" in un cartulare separatu. A maiò parte di i prughjetti Next.js utilizanu u moniker "cumpunenti", è questu cartulare hè generatu in u cartulare radicali di u vostru prughjettu.
Cumpunente di a testa
A carica iniziale di a pagina hè resa da Next.js in u latu di u servitore. Face questu mudificà l'HTML di a vostra pagina. A sezione di l'intestazione hè inclusa.
U cumpunente Next.js Head hè utilizatu per dà tags di sezione di l'intestazione cum'è titulu è meta. U cumpunente Head hè utilizatu in questu esempiu di un cumpunente Layout.
Crea a pagina 404 micca trovu
Hè pussibule di fà a vostra propria pagina d'errore 404. Puderete vulete persunalizà u messagiu o aghjunghje u vostru propiu disignu di pagina. In u cartulare di e pagine, crea u schedariu 404.js.
Quandu si verifica un errore 404, Next.js redirigerà automaticamente à sta pagina. Eccu un esempiu di una pagina 404 persunalizata:
Recuperazione di dati da u latu di u servitore
Invece di scaricà dati nantu à u latu di u cliente, Next.js permette di cunducerà una populazione di dati iniziale, chì implica l'inviu di a pagina cù e dati digià populati da u servitore.
Avete duie scelte per implementà a ricerca di dati da u servitore:
- I dati duveranu esse pigliati nantu à ogni dumanda.
- Ottene dati solu una volta in tuttu u prucessu di custruzzione (situ staticu)
Pigliate dati nantu à ogni dumanda
U metudu getServerSideProps hè utilizatu per rende ogni dumanda da u servitore. Sta funzione pò esse inclusa à a fine di u vostru schedariu di cumpunenti. Next.js pupularà automaticamente i vostri pruposti di cumpunenti cù l'ughjettu getServerSideProps se sta funzione hè presente in u vostru schedariu di cumpunenti.
Pigliate e dati in tempu di creazione
U metudu getStaticProps hè utilizatu per rende u latu di u servitore in tempu di creazione. Sta funzione pò esse inclusa à a fine di u vostru schedariu di cumpunenti. Stu metudu corre u codice di u servitore è manda una dumanda GET à u servitore, ma solu una volta quandu u nostru prughjettu hè finitu.
Perchè duvete amparà Next.js?
Unu di i mutivi di questu hè chì Next.js hè custruitu nantu à React, un kit di strumenti di sviluppu front-end per creazione di l'interfaccia d'utilizatore chì sò a mo scelta preferita per cuncepisce app web.
Ma ùn saria micca abbastanza se Next.js ùn era micca bonu in ciò chì hà fattu ... nò?
Allora, chì face esattamente?
Prima ci vole à definisce uni pochi di cuncetti per capiscenu. Next.js hà guadagnatu pupularità perchè risolve un prublema chì parechji sviluppatori web avianu cù l'applicazioni web di u cliente (in u navigatore). Queste Applicazioni Single-Page (SPA) anu avutu una sperienza megliu postu chì ùn anu micca bisognu di l'utilizatore per ricaricà a pagina è permettenu più interattività.
In ogni casu, perchè a maiò parte di u materiale in una app cum'è questu diventa visibile solu quandu hè realizatu in u navigatore, i crawlers web anu difficiule di capiscenu u cuntenutu di testu di una tale app.
In u risultatu, malgradu a so popularità, assai SPA sò stati largamente anonimi à i grandi motori di ricerca cum'è Google. Next.js include avà un mecanismu integratu più robustu per a rendering di u servitore (SSR) di cumpunenti React.
Next.js permette à i sviluppatori di custruisce codice JavaScript nantu à u servitore durante u prucessu di creazione è furnisce HTML basicu, indexable à l'utilizatori.
Runzinu
- Grande per l'esperienza d'utilizatore
- Grande per SEO
- Custruite un situ web staticu super-veloce chì si cumporta cum'è una dinamica
- Flessibilità in a creazione di UI è UX.
- Parechji vantaghji di sviluppu
- Gran sustegnu di a cumunità
Cons
- I siti web o l'applicazioni anu una certa quantità di tempu per custruisce o sviluppà.
- Per certi compiti, Next.js hè inadegwatu. I sviluppatori anu da pudè custruisce rotte dinamiche cù l'arnesi Node.js.
cunchiusioni
Comu pudete vede, Next.js simplificheghja u sviluppu di l'app React è vi permette di fucalizza nantu à ciò chì importa più - a vostra logica di app è UI. Include tuttu ciò chì hè necessariu per creà applicazioni cuntempuranee, ricche di frontend è API.
Hè ancu appruvatu per i prughjetti solu di cuntenutu, cum'è i blog è i siti web di l'affari, per via di a so capacità di custruisce pagine HTML statiche.
Cù l'edizioni attuali, Next.js ùn solu mantene un altu livellu di sperienza di sviluppatore, ma dà ancu strumenti per aumentà u rendiment visuale è l'esperienza di l'utilizatori, assicurendu un futuru luminoso per stu framework.
Lascia un Audiolibro