Next.js è ormai considerato il framework per la costruzione del nuovo internet. Le sue funzionalità avanzate, la capacità di rendering lato server e l’integrazione totale con React lo hanno reso una soluzioni preferite dagli sviluppatori web. Allo stesso tempo, ottimizzare un’applicazione Next.js per andare in produzione richiede del lavoro. Solo così si possono raggiungere prestazioni di alto livello, tempi di caricamento ridotti e garantire un’ottima esperienza utente.
In questa guida, esplorerai le strategie più efficaci e i migliori tip per deployare Next.js in produzione!
Le 7 best practice da seguire prima di deployare Next.js in produzione
Esaminiamo ora le best practice più rilevanti per ottimizzare Next.js per l’ambiente di produzione.
1. Sfruttare le funzionalità di ottimizzazione incorporate in Next.js
Next.js offre delle feature di ottimizzazione avanzate per migliorare le prestazioni della tua applicazione di produzione. Tutto ciò che devi fare per sfruttarle è integrarle nel tuo progetto, come spiegato nella documentazione. Queste feature includono:
- Ottimizzazione delle immagini:
next/imageespone un componente<Image>che estende l’elemento HTML<img>tradizionale offrendo l’ottimizzazione automatica delle immagini. In dettaglio, consente a Next.js di:- Servire immagini nelle dimensioni ottimali in base al dispositivo dell’utente.
- Convertirle automaticamente in formati di immagine moderni come WebP e AVIF.
- Evitare errori di layout shift durante il caricamento delle immagini nel frontend.
- Caricarle solo quando entrano nel viewport, utilizzando il caricamento ritardato nativo del browser.
- Ridimensionare le immagini su richiesta, anche per file remoti.
- Ottimizzazione dei font:
next/fontottimizza i font locali ed evita richieste di rete esterne per migliorare la privacy e le prestazioni. A partire dalla versione 13, Next.js supporta anche il self-hosting di qualsiasi font di Google, per evitare di effettuare richieste HTTP per recuperare i file dei font remotamente. - Ottimizzazione degli script:
next/scriptoffre un componente<Script>che estende la tradizionale etichetta HTML<script>, consentendo il caricamento degli script JavaScript solo una volta per più pagine.
2. Abilitare la cache e usare l’Incremental Static Regeneration ove possibile
Next.js tratta i file all’interno della cartella /public come risorse statiche. Ad esempio, se archivi un file immagine logo.png in /public, puoi poi farvi riferimento nel tuo codice come /logo.png:
<Image src="/logo.png" alt="Logo dell'azienda" width="200" height="200" />Code language: HTML, XML (xml)Solitamente, /public contiene immagini statiche, JavaScript, CSS e altri file multimediali. Cachare queste risorse è un ottimo modo per migliorare i tempi di risposta e ridurre il numero di richieste necessarie per renderizzare una pagina.
Ecco perché, come comportamento predefinito, Next.js aggiunge il seguente header in produzione per tali risorse:
Cache-Control: public, max-age=31536000, immutableCode language: PHP (php)Questa istruzione dice al browser di memorizzare nella cache questi file per un anno. Pertanto, se il tuo sito Next.js utilizza delle risorsa statiche, dovresti scaricarle e posizionarle all’interno di /public.
Next.js fornisce anche la configurazione minimumCacheTTL per specificare il TTL (Time To Live) in secondi per la memorizzazione nella cache delle immagini ottimizzate tramite <Image>. Impostalo in next.config.js come segue:
// next.config.js
module.exports = {
images: {
// cache delle immagini ottimizzate per 60 secondi
minimumCacheTTL: 60,
},
}Code language: JavaScript (javascript)Allo stesso modo, Next.js può memorizzare nella cache le pagine staticamente generate tramite l’Incremental Static Regeneration (ISR). Grazie a questa funzionalità, è possibile creare o aggiornare nuove pagine statiche dopo che l’applicazione è stata buidata.
Per abilitare l’ISR, setta l’opzione revalidate in getStaticProps():
export async function getStaticProps() {
// ...
return {
props: {
// ...
},
// Next.js rigenererà questa pagina
// quando arriva una richiesta, al massimo una volta
// ogni 10 secondi
revalidate: 10,
}
}Code language: JavaScript (javascript)Ecco come funziona l’ISR:
- Il sito mostra inizialmente la pagina pre-renderizzata generata al momento della compilazione.
- Entro 10 secondi, continuerà a visualizzare la pagina iniziale.
- Quando arriva una richiesta dopo 10 secondi dall’ultima rigenerazione, il framework avvia una rigenerazione in background della pagina.
Nota che un’app di produzione Next.js rigenera solo le pagine statiche effettivamente visitate dagli utenti, così da risparmiare risorse.
Lettura consigliata: Come creare un sito multilingua in Next.js con next-i18next
3. Integrare uno tool di Analytics e/o APM
Una volta che un sito Next.js è in produzione, è necessario monitorarne le prestazioni. In particolare, devi avere un sistema in atto per tenere sott’occhio le visualizzazioni delle pagine e per poter ottenere informazioni sul traffico ricevuto dal sito.
Quando si effettua il deployment su Vercel, è possibile farlo con Next.js Speed Insights. Questo strumento consente di analizzare e misurare le prestazioni delle pagine dell’applicazione utilizzando diverse metriche. Per abilitarlo:
- Attiva l’opzione “Web Analytics” nel Pannello di Controllo di Vercel.
- Aggiungi il pacchetto
@vercel/analyticsalle dipendenze del tuo progetto connpm i @vercel/analytics. - Utilizza il componente
<Analytics />per inserire lo script di analytics nella tua app. - Effettua il deployment della tua app su Vercel, e i dati inizieranno a fluire nella vista Analytics.
Allo stesso modo, è necessario un servizio che monitori le prestazioni del sito, ti notifichi quando qualcosa va storto o il sito va offline, e raccolga informazioni su bug e errori di runtime. Questo è esattamente ciò di cui si occupa l’Application Performance Monitoring (APM).
Alcune delle librerie APM più popolari per Next.js sono Sentry, New Relic e AppSignal.
4. Configurare un sistema di logging
Per tenere traccia di ciò che accade in un’app Next.js in produzione, è necessario aggiungere dei log al tuo codice. Il modo più semplice per loggare messaggi sia sul client che sul server è utilizzare i metodi esposti dall’oggetto JavaScript console. I più popolari sono:
console.clear(): Svuota la console del browser.console.log(): Logga informazioni generali.console.debug(): Logga un messaggio di debug nella console del browser e un messaggio normale sul server.console.error(): Logga un messaggio di errore.console.warn(): Logga un messaggio di warning nella console del browser o un messaggio di errore sul server.console.time(): Avvia un timer che può essere utilizzato per calcolare la durata di un’operazione.console.timeEnd(): Arresta il timer e stampa la durata dell’operazione.
Se invece preferisci una soluzione più strutturata, Next.js raccomanda pino, una libreria JavaScript di logging che è veloce e leggera.
5. Gestire gli errori 500 e 400 con pagine personalizzate
Come qualsiasi altra applicazione, i siti Next.js sono soggetti a errori. Uno degli aspetti più importanti della gestione degli errori è presentare agli utenti messaggi di errore significativi per informarli di cosa è successo. Quando si verifica un errore nel frontend o nel backend, Next.js mostra questa pagina statica 500:
Come puoi vedere, non fornisce alcuna informazione significativa e potrebbe risultare in una cattiva esperienza utente per i visitatori. Per questo motivo, Next.js supporta pagine personalizzate 500.
Se sei una applicazione che usa il Pages Routing, crea un file 500.js sotto /pages:
// pages/500.js
export default function Custom500Page() {
// il tuo componente di pagina 500 personalizzata...
}Code language: JavaScript (javascript)Questo componente rappresenta la pagina frontend che verrà mostrati agli utenti in caso di errore.
Se utilizzi l’App Router, crea una pagina error.js sotto /app:
// app/error.js
'use client' // i componenti di errore devono essere componenti client
export default function CustomErrorPage({
error,
reset,
}) {
// il tuo componente di pagina di errore personalizzata...
} Code language: JavaScript (javascript)Nota che questo deve essere un client component.
Next.js supporta anche una pagina statica 404, che viene visualizzata:
- Quando l’oggetto restituito da
getStaticProps()ogetServerSideProps()contienenotFound: true, in un’app basata su Pages Router. - Quando la funzione
notFound()viene chiamata in un’app basata su App Router.
Anche in questo caso, la pagina 404 predefinita non è delle migliori:
Per personalizzarla, se utilizzi il Pages Router, crea un file 404.js sotto /pages:
// pages/404.js
export default function Custom404Page() {
// il tuo componente di pagina di errore 404 personalizzata...
}Code language: JavaScript (javascript)Se utilizzi l’App Router, definisci un file not-found.js sotto /app:
// app/not-found.js
export default function NotFoundPage() {
// il tuo componente di pagina di errore 404 personalizzata...
}Code language: JavaScript (javascript)6. Ridurre le dimensioni del bundle di build
Produrre un bundle ridotto è meglio poiché i client impiegheranno meno tempo e banda per scaricare e renderizzare l’applicazione Next.js di produzione.
Durante il processo di next build, Next.js genera un bundle JavaScript ottimizzato per ogni pagina. L’obiettivo è cercare di ridurre questi bundle al minimo preservandone la funzionalità. A tal fine, puoi utilizzare i dynamic import tramite next/dynamic per caricare in modo lazy le risorse JavaScript. Questo meccanismo consente di posticipare il caricamento di componenti o librerie specifiche fino a quando l’utente non esegue una particolare operazione sulla pagina.
Per analizzare il bundle prodotto da Next.js e ottenere indicazioni su come ridurne le sue dimensioni, puoi utilizzare i seguenti strumenti:
- Webpack Bundle Analyzer: Per esplorare visivamente le dimensioni dei file di output di webpack in un treemap interattivo.
- Package Phobia: Per analizzare il costo derivante dall’aggiunta di una nuova dipendenza al tuo progetto.
- Bundle Phobia: Per analizzare quanto una dipendenza aumenterà la dimensione del bundle.
- bundlejs: Per eseguire rapidamente il bundle e la minificazione del progetto nel tuo browser.
- Import Cost: Per visualizzare all’interno di Visual Studio Code la dimensione di qualsiasi pacchetto importato.
7. Ottimizzare le prestazioni SEO delle pagine con Lighthouse
L’obiettivo principale della maggior parte dei siti Next.js è ottenere ottimi risultati per la SEO. Google ha cambiato radicalmente il suo approccio alla valutazione della SEO nel tempo, e ora si concentra principalmente sui Core Web Vitals:
- Largest Contentful Paint (LCP): Misura il tempo necessario affinché il contenuto principale di una pagina diventi visibile agli utenti.
- First Input Delay (FID): Valuta il ritardo tra la prima interazione dell’utente e la risposta del browser.
- Cumulative Layout Shift (CLS): Valuta la stabilità visiva di una pagina misurando il numero di spostamenti inattesi del layout che potrebbero infastidire gli utenti.
Quest metriche permettono a Google di capire l’esperienza utente offerta dal tuo sito e definirne il posizionamento nei risultati di ricerca.
Il migliore tool per ottimizzare questi indicatori è Google Lighthouse, uno strumento open-source incorporato in Chrome che può essere eseguito su qualsiasi pagina web per verificarme le sue prestazioni lato SEO.
Per ottimizzare Next.js per andare produzione, devi buildare il progetto, avviarlo, aprirlo in modalità incognito nel browser e avviare Lighthouse su ciascuna pagina. Questo fornirà indicazioni e migliori pratiche per migliorare le prestazioni del sito, l’accessibilità e l’ottimizzazione SEO.
Leggi anche: Librerie di componenti react per potenziare la tua capacità di UI design
Conclusioni
In questo articolo, abbiamo esaminato cosa fare per rendere un’applicazione Next.js pronta per andare in produzione. Come hai visto qui, questo comporta l’abilitazione della cache, l’utilizzo delle funzionalità avanzate di Next.js e la messa in piedi di un sistema di logging e monitoraggio delle prestazioni.
Attraverso diversi esempi e suggerimenti, hai avuto l’opportunità di vedere come costruire una applicazione Next.js affidabile. Il deployment di un sito in produzione non è mai stato così facile!
Grazie per aver letto la guida! Speriamo che tu abbia trovato questo articolo utile!
