Next.js si occupa di molte ottimizzazioni nella tua app React, così non devi farlo tu
Next.js è un framework React con un'opinione ben precisa e una serie di ottimizzazioni delle prestazioni integrate. L'idea principale alla base del framework è garantire che le applicazioni vengano avviate e rimangano il più performanti possibile includendo queste funzionalità per impostazione predefinita.
Questa introduzione illustrerà brevemente molte funzionalità fornite dal framework a un livello generale. Le altre guide di questa raccolta esploreranno le funzionalità in modo più dettagliato.
Cosa imparerai?
Sebbene Next.js fornisca una serie di ottimizzazioni delle prestazioni per impostazione predefinita, queste guide mirano a spiegarle in modo più dettagliato e a mostrarti come utilizzarle per creare un'esperienza rapida e performante.
Esistono molte ottimizzazioni che possono essere aggiunte ai siti React in generale e che funzionerebbero anche per le applicazioni create con Next.js. Questi non verranno trattati, poiché l'attenzione è rivolta a ciò che Next.js fornisce in modo specifico. Per scoprire di più sulle ottimizzazioni generali di React, consulta la nostra raccolta di React.
In che modo Next.js è diverso da React?
React è una libreria che semplifica la creazione di interfacce utente utilizzando un approccio basato su componenti. Sebbene sia potente, React è specificamente una libreria UI. Molti sviluppatori includono strumenti aggiuntivi come un bundler di moduli (ad esempio webpack) e un transpiler (ad esempio Babel) per avere una toolchain di build completa.
Nella raccolta React, abbiamo adottato l'approccio di utilizzare Create React App (CRA) per creare rapidamente app React. CRA semplifica la configurazione di un'applicazione React fornendo una toolchain di build completa con un singolo comando.
Sebbene in CRA siano integrate alcune ottimizzazioni predefinite, lo strumento mira a fornire una configurazione semplice e diretta. La scelta di decidere se espellere e modificare le configurazioni in autonomia spetta agli sviluppatori.
Next.js, che può essere utilizzato anche per creare una nuova applicazione React, adotta un approccio diverso. Fornisce immediatamente una serie di ottimizzazioni comuni che molti sviluppatori vorrebbero avere, ma che trovano difficili da configurare, ad esempio:
- Rendering lato server
- Suddivisione automatica del codice
- Prefetching dei percorsi
- Routing del file system
- Stile CSS-in-JS (
styled-jsx)
Configurazione
Per creare una nuova applicazione Next.js, esegui questo comando:
npx create-next-app new-app
Quindi, vai alla directory e avvia il server di sviluppo:
cd new-app
npm run dev
Il seguente codice incorporato mostra la struttura delle directory di una nuova app Next.js.
- Fai clic su Remixa per modificare per rendere il progetto modificabile.
- Per visualizzare l'anteprima del sito, premi Visualizza app, quindi premi Schermo intero
.
Nota che viene creata una directory pages/ con un singolo file: index.jsx. Next.js segue un approccio di routing del file system, in cui ogni pagina di questa directory viene pubblicata come route separata. La creazione di un nuovo file in questa directory, ad esempio about.js, creerà automaticamente una nuova route (/about).
I componenti possono anche essere creati e utilizzati come qualsiasi altra applicazione React. È già stata creata una directory components/ con un singolo componente, nav.js, che è già importato in index.js. Per impostazione predefinita, ogni importazione utilizzata in Next.js viene recuperata solo quando viene caricata la pagina, offrendo i vantaggi della suddivisione automatica del codice.
Inoltre, ogni caricamento pagina iniziale in Next.js viene eseguito lato server. Se apri il riquadro Rete in DevTools, puoi vedere che la richiesta iniziale del documento restituisce una pagina con rendering lato server completo.
Queste sono solo alcune delle numerose funzionalità fornite automaticamente da Next.js. Molti sono personalizzabili e possono essere modificati per diversi casi d'uso.
Passaggi successivi
Gioco di parole intenzionale 😛
Ogni altra guida di questa raccolta esplorerà in dettaglio una funzionalità specifica di Next.js:
- Precaricamento dei percorsi per velocizzare la navigazione nelle pagine
- Pubblicazione di pagine ibride e solo AMP per un caricamento più rapido dai motori di ricerca
- Suddivisione del codice dei componenti con importazioni dinamiche per ridurre l'impatto di JavaScript