Prestazioni per impostazione predefinita con Next.js

Next.js si occupa di molte ottimizzazioni nella tua app React in modo che tu non debba

Houssein Djirdeh

Next.js è un framework React controllato che include una serie di ottimizzazioni delle prestazioni. L'idea principale alla base del framework è garantire che le applicazioni si avviino e mantengano le prestazioni più elevate possibili includendo queste funzionalità per impostazione predefinita.

Questa introduzione tratta brevemente di molte funzionalità fornite a livello generale dal framework. Le altre guide in questa raccolta esploreranno le funzionalità in modo più dettagliato.

Cosa imparerai?

Anche se Next.js offre una serie di ottimizzazioni delle prestazioni per impostazione predefinita, queste guide mirano a illustrarle in modo più dettagliato e a mostrarti come utilizzarle per creare un'esperienza veloce e performante.

Esistono molte ottimizzazioni che possono essere aggiunte ai siti di React in generale e che funzionerebbero anche per le applicazioni create con Next.js. Questi non verranno trattati poiché il focus è su ciò che offre specificatamente Next.js. Per scoprire di più sull'ottimizzazione generale delle reazioni, consulta la nostra raccolta delle reazioni.

Qual è la differenza tra Next.js e React?

React è una libreria che semplifica la creazione delle interfacce utente utilizzando un approccio basato su componenti. Sebbene sia potente, React è specificamente una libreria di UI. Molti sviluppatori includono strumenti aggiuntivi come un bundler di moduli (ad esempio webpack) e un transpiler (ad esempio Babel) per avere una catena di strumenti di build completa.

Nella raccolta React, abbiamo adottato l'approccio mediante Crea app React (CRA) per avviare rapidamente le app React. CRA elimina la seccatura di configurare un'applicazione React fornendo una toolchain di build completa con un singolo comando.

Sebbene esistano alcune ottimizzazioni predefinite integrate in CRA, lo strumento mira a fornire una configurazione semplice e immediata. Gli sviluppatori hanno la possibilità di decidere se espellere e modificare autonomamente le configurazioni.

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, ma che trovano difficili da configurare, ad esempio:

  • Rendering lato server
  • Suddivisione automatica del codice
  • Precaricamento delle route
  • Routing del file system
  • Stili CSS-in-JS (styled-jsx)

Configurazione

Per creare una nuova applicazione Next.js, esegui questo comando:

npx create-next-app new-app

Passa quindi alla directory e avvia il server di sviluppo:

cd new-app
npm run dev

L'incorporamento seguente mostra la struttura di directory di una nuova app Next.js.

  • Fai clic su Remixa per modificare per rendere modificabile il progetto.
  • Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero schermo intero.

Tieni presente 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 all'interno di questa directory viene servita come una 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à stato importato in index.js. Per impostazione predefinita, ogni importazione utilizzata in Next.js viene recuperata solo quando la pagina viene caricata, offrendo così i vantaggi della suddivisione automatica del codice.

Inoltre, ogni caricamento iniziale della pagina in Next.js viene eseguito con rendering lato server. Se apri il riquadro Network in DevTools, puoi vedere la richiesta iniziale per il documento che restituisce una pagina completamente sottoposta a rendering dal server.

La scheda Anteprima del riquadro Rete mostra che Next.js restituisce un codice HTML visivamente completo quando viene richiesta una pagina.
La scheda Anteprima del riquadro Network mostra che Next.js restituisce un codice HTML visivamente completo quando viene richiesta una pagina.

Queste sono solo alcune delle numerose funzionalità fornite automaticamente da Next.js. Molti sono personalizzabili e possono essere modificati per casi d'uso diversi.

Passaggi successivi

Si tratta di un gioco per progettato ⇢

Ogni altra guida di questa raccolta esplorerà in dettaglio una funzionalità di Next.js specifica: