Prestazioni per impostazione predefinita con Next.js

Next.js si occupa di molte ottimizzazioni nell'app React, così non dovrai farlo tu

Houssein Girdeh

Next.js è un framework React guidato con una serie di ottimizzazioni del rendimento. L'idea principale alla base del framework è garantire che le applicazioni si avviino e rimangano il più possibile prestazionali, includendo queste funzionalità per impostazione predefinita.

Questa introduzione tratta brevemente tante funzionalità offerte dal framework a livello generale. Le altre guide di questa raccolta analizzeranno le funzionalità in maggiore dettaglio.

Cosa imparerai a fare?

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 ed efficiente.

È possibile aggiungere molte ottimizzazioni ai siti di React in generale che funzionano anche per le applicazioni create con Next.js. Questi aspetti non saranno trattati poiché ci occuperemo di ciò che Next.js specifica. Per scoprire di più sulle ottimizzazioni generali di React, consulta la nostra raccolta React.

Qual è la differenza tra Next.js e React?

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

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

Sebbene siano presenti alcune ottimizzazioni predefinite integrate in CRA, lo strumento mira a fornire una configurazione semplice e immediata. Agli sviluppatori viene data la possibilità di decidere se espulire e modificare le configurazioni autonomamente.

Next.js, che può essere utilizzato anche per creare una nuova applicazione React, ha un approccio diverso. Fornisce immediatamente una serie di ottimizzazioni comuni che molti sviluppatori vorrebbero avere, ma trovano difficili da configurare, ad esempio:

  • Rendering lato server
  • Suddivisione automatica del codice
  • Precaricamento percorso
  • 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 della directory di una nuova app Next.js.

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

Nota che viene creata una directory pages/ con un solo file: index.jsx. Next.js segue un approccio di routing del file system, in cui ogni pagina all'interno di questa directory viene pubblicata come percorso separato. La creazione di un nuovo file in questa directory, ad esempio about.js, creerà automaticamente una nuova route (/about).

I componenti possono 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, il che offre 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 Rete in DevTools, puoi vedere che la richiesta iniziale del documento restituisce una pagina completamente visualizzata 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 in base ai diversi casi d'uso.

Passaggi successivi

Pun intenzionato Ұ

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