Next.js e lo stato attuale dello sviluppo web con React

Avviare un nuovo progetto può essere un’esperienza entusiasmante ma anche estenuante. È entusiasmante perché possiamo ricominciare da zero, fare meglio ed evitare gli errori del passato. È estenuante perché dobbiamo prendere molte decisioni tecniche e scegliere lo strumento giusto per il lavoro, in un’infinita raccolta di pacchetti npm, repository GitHub, progetti della community e modelli di progetto.

Più decisioni riusciamo a evitare sull’architettura tecnica, più possiamo concentrarci sulla creazione di funzionalità, sulla realizzazione di ottimi prodotti e su iterazioni più rapide.

React da solo non basta#

Se vogliamo creare un sito web con React, per avviare un progetto avremo bisogno di più della sola libreria React. Dovremo quindi occuparci del routing delle pagine, del rendering lato server, delle ottimizzazioni dei siti statici e delle risorse, del bundling e così via.

Per fortuna, altri hanno già percorso questa strada e oggi abbiamo soluzioni di partenza complete per siti web e applicazioni web basati su React.

Starter React e difficoltà nel prendere decisioni#

La documentazione ufficiale di React menziona tre principali framework di partenza per creare un nuovo progetto React. Sono Create React App, Next.js, e Gatsby.

Dobbiamo conoscere tre framework diversi basati su React, ciascuno con convenzioni, strumenti e peculiarità proprie? Come decidiamo qual è lo strumento giusto per ogni progetto? Non possiamo usarne uno come soluzione predefinita nel 99% dei casi?

Sì, possiamo. Nella sua versione attuale (la 12), Next.js può essere la soluzione predefinita per praticamente qualsiasi sito web basato su React.

Che cos'è Next.js?#

Next.js è un framework React con un'architettura software solida costruita attorno a React. Ha un approccio piuttosto prescrittivo e integra già nell'architettura molte decisioni tecniche. Di conseguenza, molte operazioni complesse funzionano fin da subito.

Se necessario, puoi intervenire sui meccanismi interni e modificare alcune impostazioni, ma l'esperienza di sviluppo e le prestazioni offerte dalla configurazione iniziale sono così buone che probabilmente preferirai non farlo.

Possiamo dire lo stesso di Create React App e Gatsby. Tuttavia, Create React App si affida a numerosi pacchetti open source di terze parti per funzionare, mentre Gatsby è fortemente incentrato su un solo caso d'uso: la generazione di siti statici. Certo, al momento Gatsby offre un supporto migliore per la generazione di siti statici, ma con Next.js possiamo ottenere funzionalità simili.

A cosa serve Next.js?#

Con Next.js possiamo creare siti web e applicazioni web con React. Next.js offre la possibilità di:

• distribuire un'applicazione React a pagina singola, con suddivisione del codice e caricamento dinamico di contenuti aggiuntivi integrati
• eseguire il rendering dei contenuti sul server
• creare siti statici con funzionalità simili a Gatsby
• essere la struttura di un'applicazione front-end complessa e personalizzata, come TeleportHQ (approfondiremo l'argomento più avanti)

Considerare Next.js in modo strategico#

Quando valutiamo i rischi legati all'adozione di nuove tecnologie dal punto di vista aziendale, consideriamo quanto siano diffuse, chi se ne occupa, le loro prospettive di crescita e molti altri aspetti.

Next.js si trova in un'eccellente posizione strategica:

• Vercel gli offre un supporto solido e costante, poiché Next.js è fondamentale per far crescere con successo la sua attività nel cloud.
• È presente da abbastanza anni da aver raggiunto un livello di stabilità e maturità che ne favorisce la rapida adozione e gli consente di rispondere a un'ampia gamma di esigenze e problemi quotidiani.
• È sottoposto a manutenzione e sviluppo attivi e, a ogni nuova versione, amplia le possibilità offerte dalle tecnologie web.
• L'esperienza di sviluppo è così valida che ha portato alla creazione di Nuxt, un framework derivato che si basa su Vue.js anziché su React e si rivolge allo stesso pubblico di Next.

Inoltre, il suo equilibrio tra una progettazione architetturale rigorosa e ben definita e punti di estensione flessibili consente anche agli sviluppatori meno esperti di creare progetti da zero senza compromettere produttività e prestazioni.

Per lo stesso motivo, è un ottimo candidato per l'automazione con strumenti low-code/no-code. Generare automaticamente un intero sito è più semplice quando la struttura è definita e supportata dal framework che lo gestisce.

Usare Next.js#

La documentazione di Next.js è eccellente e rielaborare le decine di pagine di contenuti in un articolo riassuntivo non renderebbe giustizia a Next.js. Vedremo invece brevemente come configurare il progetto e indicheremo le pagine di documentazione più adatte.

Questa sezione mostrerà come funziona Next.js e si concentrerà sui suoi punti di forza. Non è certamente un tutorial passo dopo passo.

Configurazione del progetto#

Avviare un nuovo progetto Next.js è semplicissimo. Per prima cosa, abbiamo a disposizione il comando create-next-app per inizializzare tutto. Il supporto a TypeScript è soddisfacente e può essere attivato durante la configurazione del progetto o in un secondo momento.

Routing e pagine#

Il sistema di routing è uno degli aspetti più opinabili di Next.js. La struttura delle cartelle determina gli URL supportati e la risoluzione delle pagine quando si accede a tali URL. Le pagine si trovano in pages oppure src/page.

Il bello di questa funzionalità è che funziona con il rendering lato server, con la generazione di siti statici e anche con il routing lato client. Impariamo una sola API e una sola convenzione, da usare in tutti i casi.

Inoltre, ogni pagina ha il proprio bundle JavaScript, quindi 1000 pagine con componenti e funzionalità diverse non faranno aumentare le dimensioni di ogni singola pagina.

Il funzionamento delle pagine in Next.js offre grandi possibilità. Ogni pagina è come un punto di ingresso dell'applicazione. Le pagine definiscono le proprie dipendenze dai dati e indicano se recuperarli durante l'esecuzione sul server o lato client, oppure se fornirli in modo statico e generare il risultato come HTML statico.

Stili e CSS#

È integrato il supporto per il CSS di base e per i CSS Modules.

Poiché Next.js usa webpack internamente per creare il bundle dell'applicazione, è possibile aggiungere ai progetti Next.js qualsiasi framework CSS compatibile con React. Inoltre, i framework più diffusi, come Tailwind, offrono guide per usarli nei progetti Next.js.

Dato che lavoriamo con componenti React e creiamo bundle di risorse usando i tradizionali strumenti di bundling, l'esperienza di sviluppo CSS è la stessa di qualsiasi altro progetto React.

Prestazioni#

Uno dei principali fattori distintivi di Next rispetto agli altri framework è la velocità dei siti realizzati con questo framework. Le prestazioni sono garantite da un sistema di bundling e routing delle pagine con scelte predefinite e da ottimizzazioni integrate per ogni pagina, basate sulle funzionalità utilizzate. Per esempio, una pagina che non definisce mai alcun prop lato server verrà gestita diversamente da una che invece li definisce.

Grazie alla collaborazione con Google, è nato il componente Next/Image , che integra fin da subito le migliori pratiche per l’ottimizzazione delle immagini e il caricamento differito. Questo componente è un gradito cambiamento rispetto all’integrazione improvvisata di componenti di terze parti nel nucleo di un progetto. Sebbene sia essenziale, l’ottimizzazione delle immagini viene spesso trascurata dagli sviluppatori di framework, lasciando gli sviluppatori dei progetti a dover ricorrere a soluzioni di terze parti, che comportano ulteriori decisioni, troppe alternative e opzioni complesse tra cui scegliere.

È anche possibile creare un sito statico esportabile che esclude completamente le funzionalità lato server e genera solo contenuti statici, che possiamo ospitare su una CDN come HTML, CSS e JS.

Commercio elettronico#

I negozi online sono un ambito in cui prestazioni, velocità di caricamento delle pagine e fluidità della navigazione sono fondamentali. Ridurre di un secondo il tempo di caricamento della pagina di destinazione di un sito di e-commerce può generare un notevole aumento dei ricavi.

Ci aspettiamo che le future versioni di Next.js introducano altre funzionalità per questo ambito, contribuendo così a far progredire il web. Il loro progetto open source Next.js e-commerce merita una menzione.

Il futuro dello sviluppo web con React#

Le prestazioni continueranno a migliorare e la tecnologia che le rende possibili diventerà sempre più complessa a ogni nuovo passo avanti.

Framework come Next.js continueranno a evolversi e a integrare molte di queste nuove funzionalità dietro le quinte. Gli sviluppatori si concentreranno maggiormente sulla realizzazione delle funzionalità effettive dei prodotti, senza doversi preoccupare dei dettagli tecnici della complessa architettura su cui gira il loro codice.

Man mano che nel normale ciclo di sviluppo si espone sempre meno complessità, diventa più facile immaginare l’automazione e trovarle applicazioni pratiche.

Ad esempio, semplificare le complessità della creazione della struttura di una pagina, offrire un flusso di lavoro visivo per raggiungere questi obiettivi senza scrivere codice per i componenti React che la compongono o combinare codice personalizzato e modifiche visive saranno ottimi complementi per tecnologie come Next.js

TeleportHQ, una piattaforma low-code gratuita con collaborazione in tempo reale#

TeleportHQ è una piattaforma low-code gratuita per semplificare il processo di sviluppo e aumentare la produttività. Offre funzionalità low-code con un'interfaccia utente visiva, componenti riutilizzabili, un plugin per importare da Figma e l'esportazione di codice pulito per Next.js e altri 9 framework JavaScript.

Lavorando con TeleportHQ, potrai passare rapidamente dal prototipo di design al codice pronto per la distribuzione, per qualsiasi progetto. Crea siti web statici, app web o per dispositivi mobili ed esporta il codice nel framework di sviluppo che preferisci.