Il framework React per la produzione web

Next.js è un framework web di sviluppo front-end React open source che abilita funzionalità come il rendering lato server e la generazione di siti web statici per applicazioni web basate su React. È un framework pronto per la produzione che consente agli sviluppatori di creare rapidamente siti Web JAMstack statici e dinamici ed è ampiamente utilizzato da molte grandi aziende. Next.js è uno dei tanti "toolchain" consigliati disponibili quando si avvia una nuova app React, che forniscono tutti un livello di astrazione per aiutare nelle attività comuni. Le app React tradizionali visualizzano tutto il loro contenuto nel browser lato client, Next.js viene utilizzato per estendere questa funzionalità per includere le applicazioni renderizzate sul lato server. Il copyright e i marchi di Next.js sono di proprietà di Vercel. Il 27 luglio 2020 è stata annunciata la versione 9.5 di Next.js, con l'aggiunta di nuove funzionalità tra cui la rigenerazione statica incrementale, le riscritture e il supporto del reindirizzamento.

Background

Next.js è un framework React che abilita diverse funzionalità extra, incluso il rendering lato server e la generazione di siti web statici. React è una libreria JavaScript che viene tradizionalmente utilizzata per creare applicazioni web renderizzate nel browser del client con Javascript. Gli sviluppatori tuttavia riconoscono diversi problemi con questa strategia, come non soddisfare gli utenti che non hanno accesso a javascript o lo hanno disabilitato, potenziali problemi di sicurezza, tempi di caricamento della pagina notevolmente estesi e può danneggiare l'ottimizzazione complessiva del motore di ricerca del sito. Framework come Next.js aggirano questi problemi consentendo il rendering di parte o di tutto il sito Web sul lato server prima di essere inviato al client. Next.js è uno dei componenti più popolari disponibili in React. È uno dei tanti "toolchain" consigliati disponibili quando si avvia una nuova app, che forniscono tutti uno strato di astrazione per aiutare nelle attività comuni. Next.js richiede Node.js e può essere inizializzato utilizzando Node Package Manager.

Google ha donato al progetto Next.js, contribuendo con 43 richieste pull nel 2019 in cui hanno aiutato a eliminare JavaScript inutilizzato, riducendo i tempi di overhead e aggiungendo metriche migliorate. A partire da marzo 2020, il framework è utilizzato da molti siti Web di grandi dimensioni, inclusi Netflix, Docker, GitHub, Uber e Starbucks. All'inizio del 2020, è stato annunciato che Vercel si era assicurato ventuno milioni di dollari in finanziamenti di serie A per supportare i miglioramenti al software. L'autore originale del framework, Guillermo Rauch, è attualmente il CEO di Vercel e lo sviluppatore principale del progetto è Tim Neutkens.

Storia dello sviluppo

Next.js è stato rilasciato per la prima volta come progetto open source su GitHub il 25 ottobre 2016. È stato originariamente sviluppato sulla base di sei principi: funzionalità out-of-the-box che non richiede configurazione, JavaScript ovunque, tutte le funzioni sono scritte in JavaScript, suddivisione automatica del codice e rendering del server, recupero dati configurabile, anticipazione delle richieste, e semplificando la distribuzione. Next.js 2.0 è stato annunciato a marzo 2017 e include diversi miglioramenti che hanno reso più facile lavorare con piccoli siti web. Ha anche aumentato l'efficienza di costruzione e migliorato la scalabilità della funzione di sostituzione del modulo a caldo. La versione 7.0 è stata rilasciata a settembre del 2018 con una migliore gestione degli errori e supporto per l'API di contesto di React per una migliore gestione dinamica del percorso. Questa è stata anche la prima versione ad essere aggiornata al webpack 4. La versione 8.0 è stata rilasciata a febbraio 2019 ed è stata la prima versione a offrire la distribuzione senza server di applicazioni, in cui il codice è suddiviso in funzioni lambda che vengono eseguite su richiesta. La versione ha anche ridotto il tempo e le risorse necessarie per le esportazioni statiche e ha migliorato le prestazioni di prefetch. La versione 9.3, annunciata a marzo 2020, includeva varie ottimizzazioni e il supporto globale dei moduli Sass e CSS. Il 27 luglio 2020 è stata annunciata la versione 9.5 di Next.js, che aggiunge nuove funzionalità tra cui rigenerazione statica incrementale, riscrittura e supporto di reindirizzamento.

Il 27 ottobre 2020 è stato presentato Next.js 10 con moltissime novità. Alla scrittura di questo articolo la versione stabile è v10.0.7.

Stile e funzionalità

Il framework Next.js utilizza l' architettura JAMstack, che distingue tra front-end e back-end e consente uno sviluppo front-end efficiente che è indipendente da qualsiasi API back-end. Il framework supporta CSS comuni così come Scss e Sass precompilati, CSS-in-JS e JSX con stile. Inoltre, è costruito con supporto TypeScript e bundle intelligente. Il framework si integra con Redux per la gestione dello stato e utilizza il linguaggio di query GraphQL per le chiamate API. Il software utilizza lo "store" di Redux per conservare le informazioni sullo stato dell'applicazione, che vengono aggiornate sequenzialmente per evitare conflitti di lettura-scrittura. Il transpiler open source Babel viene utilizzato per trasformare e compilare codice in JavaScript utilizzabile da un browser. Webpack, un altro strumento open source, viene utilizzato per raggruppare i moduli in seguito. Tutti questi strumenti vengono utilizzati con npm in un terminale.

La caratteristica principale di Next.js è l'utilizzo del rendering lato server per ridurre il carico sui browser web e fornire una maggiore sicurezza. Questo può essere fatto per qualsiasi parte dell'applicazione o dell'intero progetto, consentendo di selezionare le pagine ricche di contenuto per il rendering lato server. Può anche essere fatto solo per i visitatori per la prima volta, per ridurre il carico sui browser web che devono ancora scaricare nessuna delle risorse del sito. La funzione "hot reloading" rileva le modifiche man mano che vengono apportate e riproduce le pagine appropriate in modo che il server eviti il ​​riavvio. Ciò consente alle modifiche apportate al codice dell'applicazione di riflettersi immediatamente nel browser Web, sebbene alcuni browser richiedano l'aggiornamento della pagina. Il software utilizza il routing basato su pagina per comodità degli sviluppatori e include il supporto per il routing dinamico. Altre caratteristiche includono la sostituzione del modulo a caldo in modo che i moduli possano essere sostituiti in tempo reale, la suddivisione automatica del codice, che include solo il codice necessario per caricare la pagina, e il precaricamento della pagina per ridurre il tempo di caricamento.

Trovi qualche errore in questo contenuto? Scrivi un commento.