{"id":21995,"date":"2023-07-24T10:18:54","date_gmt":"2023-07-24T08:18:54","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=21995"},"modified":"2023-11-10T12:56:47","modified_gmt":"2023-11-10T11:56:47","slug":"ottimizzare-next-js-produzione","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/","title":{"rendered":"Come ottimizzare Next.js per andare in produzione"},"content":{"rendered":"\n<p>Next.js \u00e8 ormai considerato il framework per la costruzione del nuovo internet. Le sue funzionalit\u00e0 avanzate, la capacit\u00e0 di rendering lato server e l\u2019integrazione totale con <a href=\"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/react-tutto-sulla-library-javascript\/\" target=\"_blank\" aria-label=\"React  (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">React <\/a>lo hanno reso una soluzioni preferite dagli sviluppatori web. Allo stesso tempo, <strong>ottimizzare un\u2019applicazione Next.js per andare in produzione richiede del lavoro.<\/strong> Solo cos\u00ec si possono raggiungere prestazioni di alto livello, tempi di caricamento ridotti e garantire un\u2019ottima esperienza utente.<\/p>\n\n\n\n<p>In questa guida, esplorerai le strategie pi\u00f9 efficaci e i migliori tip per deployare Next.js in produzione!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"le-7-best-practice-da-seguire-prima-di-deployare-next.js-in-produzione\">Le 7 best practice da seguire prima di deployare Next.js in produzione<\/h2>\n\n\n\n<p>Esaminiamo ora le best practice pi\u00f9 rilevanti per ottimizzare Next.js per l\u2019ambiente di produzione.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"sfrutta-le-funzionalit\u00e0-di-ottimizzazione-incorporate-in-next.js\">1. Sfruttare le funzionalit\u00e0 di ottimizzazione incorporate in Next.js<\/h3>\n\n\n\n<p>Next.js offre delle feature di ottimizzazione avanzate per migliorare le prestazioni della tua applicazione di produzione. Tutto ci\u00f2 che devi fare per sfruttarle \u00e8 integrarle nel tuo progetto, come spiegato nella documentazione. Queste feature includono:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/optimizing\/images\">Ottimizzazione delle immagini<\/a>:&nbsp;<code>next\/image<\/code>&nbsp;espone un componente&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/api-reference\/components\/image\"><code>&lt;Image&gt;<\/code><\/a>&nbsp;che estende l\u2019elemento HTML&nbsp;<code>&lt;img&gt;<\/code>&nbsp;tradizionale offrendo l\u2019ottimizzazione automatica delle immagini. In dettaglio, consente a Next.js di:\n<ul class=\"wp-block-list\">\n<li>Servire immagini nelle dimensioni ottimali in base al dispositivo dell\u2019utente.<\/li>\n\n\n\n<li>Convertirle automaticamente in formati di immagine moderni come WebP e AVIF.<\/li>\n\n\n\n<li>Evitare errori di&nbsp;<a href=\"https:\/\/web.dev\/cls\/?sjid=15952579353748225174-NA\">layout shift<\/a>&nbsp;durante il caricamento delle immagini nel frontend.<\/li>\n\n\n\n<li>Caricarle solo quando entrano nel viewport, utilizzando il caricamento ritardato nativo del browser.<\/li>\n\n\n\n<li>Ridimensionare le immagini su richiesta, anche per file remoti.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/optimizing\/fonts\">Ottimizzazione dei font<\/a>:&nbsp;<code>next\/font<\/code>&nbsp;ottimizza 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.<\/li>\n\n\n\n<li><a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/optimizing\/scripts\">Ottimizzazione degli script<\/a>:&nbsp;<code>next\/script<\/code>&nbsp;offre un componente&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/api-reference\/components\/script\"><code>&lt;Script&gt;<\/code><\/a>&nbsp;che estende la tradizionale etichetta HTML&nbsp;<code>&lt;script&gt;<\/code>, consentendo il caricamento degli script JavaScript solo una volta per pi\u00f9 pagine.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"configura-la-cache-e-usa-lincremental-static-regeneration-ove-possibile\">2. Abilitare la cache e usare l\u2019Incremental Static Regeneration ove possibile<\/h3>\n\n\n\n<p>Next.js tratta i file all\u2019interno della cartella&nbsp;<code>\/public<\/code>&nbsp;come risorse statiche. Ad esempio, se archivi un file immagine&nbsp;<code>logo.png<\/code>&nbsp;in&nbsp;<code>\/public<\/code>, puoi poi farvi riferimento nel tuo codice come&nbsp;<code>\/logo.png<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Image<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"\/logo.png\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Logo dell'azienda\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"200\"<\/span> <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"200\"<\/span> \/&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Solitamente,&nbsp;<code>\/public<\/code>&nbsp;contiene immagini statiche, JavaScript, CSS e altri file multimediali. Cachare queste risorse \u00e8 un ottimo modo per migliorare i tempi di risposta e ridurre il numero di richieste necessarie per renderizzare una pagina.<\/p>\n\n\n\n<p>Ecco perch\u00e9, come comportamento predefinito, Next.js aggiunge il seguente header in produzione per tali risorse:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">Cache-Control: <span class=\"hljs-keyword\">public<\/span>, max-age=<span class=\"hljs-number\">31536000<\/span>, immutable<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>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\u2019interno di&nbsp;<code>\/public<\/code>.<\/p>\n\n\n\n<p>Next.js fornisce anche la configurazione&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/api-reference\/components\/image#minimumcachettl\"><code>minimumCacheTTL<\/code><\/a>&nbsp;per specificare il TTL (<a href=\"https:\/\/it.wikipedia.org\/wiki\/Time_to_live\">Time To Live<\/a>) in secondi per la memorizzazione nella cache delle immagini ottimizzate tramite&nbsp;<code>&lt;Image&gt;<\/code>. Impostalo in&nbsp;<code>next.config.js<\/code>&nbsp;come segue:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ next.config.js<\/span>\n\n<span class=\"hljs-built_in\">module<\/span>.exports = {  \n  <span class=\"hljs-attr\">images<\/span>: {\n    <span class=\"hljs-comment\">\/\/ cache delle immagini ottimizzate per 60 secondi <\/span>\n    <span class=\"hljs-attr\">minimumCacheTTL<\/span>: <span class=\"hljs-number\">60<\/span>,  \n  },\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Allo stesso modo, Next.js pu\u00f2 memorizzare nella cache le pagine staticamente generate tramite l\u2019<a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/data-fetching\/incremental-static-regeneration\">Incremental Static Regeneration<\/a>&nbsp;(ISR). Grazie a questa funzionalit\u00e0, \u00e8 possibile creare o aggiornare nuove pagine statiche dopo che l\u2019applicazione \u00e8 stata buidata.<\/p>\n\n\n\n<p>Per abilitare l\u2019ISR, setta l\u2019opzione&nbsp;<code>revalidate<\/code>&nbsp;in&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/data-fetching\/get-static-props\"><code>getStaticProps()<\/code><\/a>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">getStaticProps<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-comment\">\/\/ ... <\/span>\n  <span class=\"hljs-keyword\">return<\/span> {\n    <span class=\"hljs-attr\">props<\/span>: {\n      <span class=\"hljs-comment\">\/\/ ...<\/span>\n    },\n    <span class=\"hljs-comment\">\/\/ Next.js rigenerer\u00e0 questa pagina <\/span>\n    <span class=\"hljs-comment\">\/\/ quando arriva una richiesta, al massimo una volta<\/span>\n    <span class=\"hljs-comment\">\/\/ ogni 10 secondi<\/span>\n    <span class=\"hljs-attr\">revalidate<\/span>: <span class=\"hljs-number\">10<\/span>, \n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Ecco come funziona l\u2019ISR:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Il sito mostra inizialmente la pagina pre-renderizzata generata al momento della compilazione.<\/li>\n\n\n\n<li>Entro 10 secondi, continuer\u00e0 a visualizzare la pagina iniziale.<\/li>\n\n\n\n<li>Quando arriva una richiesta dopo 10 secondi dall\u2019ultima rigenerazione, il framework avvia una rigenerazione in background della pagina.<\/li>\n<\/ol>\n\n\n\n<p>Nota che un\u2019app di produzione Next.js rigenera solo le pagine statiche effettivamente visitate dagli utenti, cos\u00ec da risparmiare risorse.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Lettura consigliata: <a href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sito-multilingua-in-next-js\/\" class=\"ek-link\">Come creare un sito multilingua in Next.js con next-i18next<\/a><\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"integra-uno-tool-di-analytics-o-apm\">3. Integrare uno tool di Analytics e\/o APM<\/h3>\n\n\n\n<p>Una volta che un sito Next.js \u00e8 in produzione, \u00e8 necessario monitorarne le prestazioni. In particolare, devi avere un sistema in atto per tenere sott\u2019occhio le visualizzazioni delle pagine e per poter ottenere informazioni sul traffico ricevuto dal sito.<\/p>\n\n\n\n<p>Quando si effettua il deployment su Vercel, \u00e8 possibile farlo con&nbsp;<a href=\"https:\/\/nextjs.org\/analytics\">Next.js Speed Insights<\/a>. Questo strumento consente di analizzare e misurare le prestazioni delle pagine dell\u2019applicazione utilizzando diverse metriche. Per abilitarlo:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Attiva l\u2019opzione \u201cWeb Analytics\u201d nel Pannello di Controllo di Vercel.<\/li>\n\n\n\n<li>Aggiungi il pacchetto&nbsp;<code>@vercel\/analytics<\/code>&nbsp;alle dipendenze del tuo progetto con&nbsp;<code>npm i @vercel\/analytics<\/code>.<\/li>\n\n\n\n<li>Utilizza il componente&nbsp;<code>&lt;Analytics \/&gt;<\/code>&nbsp;per inserire lo script di analytics nella tua app.<\/li>\n\n\n\n<li>Effettua il deployment della tua app su Vercel, e i dati inizieranno a fluire nella vista Analytics.<\/li>\n<\/ol>\n\n\n\n<p>Allo stesso modo, \u00e8 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 \u00e8 esattamente ci\u00f2 di cui si occupa l\u2019<a href=\"https:\/\/en.wikipedia.org\/wiki\/Application_performance_management\">Application Performance Monitoring<\/a>&nbsp;(APM).<\/p>\n\n\n\n<p>Alcune delle librerie APM pi\u00f9 popolari per Next.js sono&nbsp;<a href=\"https:\/\/sentry.io\/welcome\/\">Sentry<\/a>,&nbsp;<a href=\"https:\/\/newrelic.com\/\">New Relic<\/a>&nbsp;e&nbsp;<a href=\"https:\/\/www.appsignal.com\/\">AppSignal<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"configura-un-sistema-di-logging\">4. Configurare un sistema di logging<\/h3>\n\n\n\n<p>Per tenere traccia di ci\u00f2 che accade in un\u2019app Next.js in produzione, \u00e8 necessario aggiungere dei log al tuo codice. Il modo pi\u00f9 semplice per loggare messaggi sia sul client che sul server \u00e8 utilizzare i metodi esposti dall\u2019oggetto JavaScript&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/console\"><code>console<\/code><\/a>. I pi\u00f9 popolari sono:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>console.clear()<\/code>: Svuota la console del browser.<\/li>\n\n\n\n<li><code>console.log()<\/code>: Logga informazioni generali.<\/li>\n\n\n\n<li><code>console.debug()<\/code>: Logga un messaggio di debug nella console del browser e un messaggio normale sul server.<\/li>\n\n\n\n<li><code>console.error()<\/code>: Logga un messaggio di errore.<\/li>\n\n\n\n<li><code>console.warn()<\/code>: Logga un messaggio di warning nella console del browser o un messaggio di errore sul server.<\/li>\n\n\n\n<li><code>console.time()<\/code>: Avvia un timer che pu\u00f2 essere utilizzato per calcolare la durata di un\u2019operazione.<\/li>\n\n\n\n<li><code>console.timeEnd()<\/code>: Arresta il timer e stampa la durata dell\u2019operazione.<\/li>\n<\/ul>\n\n\n\n<p>Se invece preferisci una soluzione pi\u00f9 strutturata, Next.js raccomanda&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/pino\"><code>pino<\/code><\/a>, una libreria JavaScript di logging che \u00e8 veloce e leggera.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"gestisci-gli-errori-con-una-pagina-personalizzata-per-i-500-e-400\">5. Gestire gli errori 500 e 400 con pagine personalizzate<\/h3>\n\n\n\n<p>Come qualsiasi altra applicazione, i siti Next.js sono soggetti a errori. Uno degli aspetti pi\u00f9 importanti della gestione degli errori \u00e8 presentare agli utenti messaggi di errore significativi per informarli di cosa \u00e8 successo. Quando si verifica un errore nel frontend o nel backend, Next.js mostra questa pagina statica 500:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i.stack.imgur.com\/mCKBj.png\" alt=\"La pagina di errore 500 di default in Next.js\"\/><figcaption class=\"wp-element-caption\">La pagina di errore 500 di default in Next.js <\/figcaption><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Se sei una applicazione che usa il Pages Routing, crea un file&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/routing\/custom-error#500-page\"><code>500.js<\/code><\/a>&nbsp;sotto&nbsp;<code>\/pages<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ pages\/500.js<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Custom500Page<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{  \n  <span class=\"hljs-comment\">\/\/ il tuo componente di pagina 500 personalizzata...<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Questo componente rappresenta la pagina frontend che verr\u00e0 mostrati agli utenti in caso di errore.<\/p>\n\n\n\n<p>Se utilizzi l\u2019App Router, crea una pagina&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/file-conventions\/error\"><code>error.js<\/code><\/a>&nbsp;sotto&nbsp;<code>\/app<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ app\/error.js<\/span>\n\n<span class=\"hljs-string\">'use client'<\/span> <span class=\"hljs-comment\">\/\/ i componenti di errore devono essere componenti client<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">CustomErrorPage<\/span>(<span class=\"hljs-params\">{\n  error,\n  reset,\n}<\/span>) <\/span>{\n  <span class=\"hljs-comment\">\/\/ il tuo componente di pagina di errore personalizzata...<\/span>\n} <\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Nota che questo deve essere un&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/getting-started\/react-essentials#client-components\">client component<\/a>.<\/p>\n\n\n\n<p>Next.js supporta anche una pagina statica 404, che viene visualizzata:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Quando l\u2019oggetto restituito da&nbsp;<code>getStaticProps()<\/code>&nbsp;o&nbsp;<code>getServerSideProps()<\/code>&nbsp;contiene&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/api-reference\/functions\/get-static-props#notfound\"><code>notFound: true<\/code><\/a>, in un\u2019app basata su Pages Router.<\/li>\n\n\n\n<li>Quando la funzione&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/functions\/not-found\"><code>notFound()<\/code><\/a>&nbsp;viene chiamata in un\u2019app basata su App Router.<\/li>\n<\/ul>\n\n\n\n<p>Anche in questo caso, la pagina 404 predefinita non \u00e8 delle migliori:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/paper-attachments.dropboxusercontent.com\/s_00431EA03AE410CA9AB6591F0C48C3AB8C3E8DDCAB00BC10C6DD5A4F443DE9B3_1689936763434_image.png\" alt=\"La pagina di errore 404 di default in Next.js\"\/><figcaption class=\"wp-element-caption\">La pagina di errore 404 di default in Next.js<\/figcaption><\/figure>\n\n\n\n<p>Per personalizzarla, se utilizzi il Pages Router, crea un file&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/routing\/custom-error#404-page\"><code>404.js<\/code><\/a>&nbsp;sotto&nbsp;<code>\/pages<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ pages\/404.js<\/span>\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Custom404Page<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-comment\">\/\/ il tuo componente di pagina di errore 404 personalizzata...<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Se utilizzi l\u2019App Router, definisci un file&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/file-conventions\/not-found\"><code>not-found.js<\/code><\/a>&nbsp;sotto&nbsp;<code>\/app<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ app\/not-found.js<\/span>\n  \n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">NotFoundPage<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-comment\">\/\/ il tuo componente di pagina di errore 404 personalizzata...<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"riduci-le-dimensioni-del-bundle-di-build\">6. Ridurre le dimensioni del bundle di build<\/h3>\n\n\n\n<p>Produrre un bundle ridotto \u00e8 meglio poich\u00e9 i client impiegheranno meno tempo e banda per scaricare e renderizzare l\u2019applicazione Next.js di produzione.<\/p>\n\n\n\n<p>Durante il processo di&nbsp;<code>next build<\/code>, Next.js genera un bundle JavaScript ottimizzato per ogni pagina. L\u2019obiettivo \u00e8 cercare di ridurre questi bundle al minimo preservandone la funzionalit\u00e0. A tal fine, puoi utilizzare i&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/optimizing\/lazy-loading\">dynamic import<\/a>&nbsp;tramite&nbsp;<code>next\/dynamic<\/code>&nbsp;per caricare in modo lazy le risorse JavaScript. Questo meccanismo consente di posticipare il caricamento di componenti o librerie specifiche fino a quando l\u2019utente non esegue una particolare operazione sulla pagina.<\/p>\n\n\n\n<p>Per analizzare il bundle prodotto da Next.js e ottenere indicazioni su come ridurne le sue dimensioni, puoi utilizzare i seguenti strumenti:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/vercel\/next.js\/tree\/canary\/packages\/next-bundle-analyzer\">Webpack Bundle Analyzer<\/a>: Per esplorare visivamente le dimensioni dei file di output di webpack in un treemap interattivo.<\/li>\n\n\n\n<li><a href=\"https:\/\/packagephobia.com\/\">Package Phobia<\/a>: Per analizzare il costo derivante dall\u2019aggiunta di una nuova dipendenza al tuo progetto.<\/li>\n\n\n\n<li><a href=\"https:\/\/bundlephobia.com\/\">Bundle Phobia<\/a>: Per analizzare quanto una dipendenza aumenter\u00e0 la dimensione del bundle.<\/li>\n\n\n\n<li><a href=\"https:\/\/bundlejs.com\/\">bundlejs<\/a>: Per eseguire rapidamente il bundle e la minificazione del progetto nel tuo browser.<\/li>\n\n\n\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=wix.vscode-import-cost\">Import Cost<\/a>: Per visualizzare all\u2019interno di Visual Studio Code la dimensione di qualsiasi pacchetto importato.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ottimizza-le-prestazioni-seo-delle-pagine-con-lighthouse\">7. Ottimizzare le prestazioni SEO delle pagine con Lighthouse<\/h3>\n\n\n\n<p>L\u2019obiettivo principale della maggior parte dei siti Next.js \u00e8 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&nbsp;<a href=\"https:\/\/web.dev\/vitals\/\">Core Web Vitals<\/a>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Largest Contentful Paint (LCP)<\/strong>: Misura il tempo necessario affinch\u00e9 il contenuto principale di una pagina diventi visibile agli utenti.<\/li>\n\n\n\n<li><strong>First Input Delay (FID)<\/strong>: Valuta il ritardo tra la prima interazione dell\u2019utente e la risposta del browser.<\/li>\n\n\n\n<li><strong>Cumulative Layout Shift (CLS)<\/strong>: Valuta la stabilit\u00e0 visiva di una pagina misurando il numero di spostamenti inattesi del layout che potrebbero infastidire gli utenti.<\/li>\n<\/ul>\n\n\n\n<p>Quest metriche permettono a Google di capire l\u2019esperienza utente offerta dal tuo sito e definirne il posizionamento nei risultati di ricerca.<\/p>\n\n\n\n<p>Il migliore tool per ottimizzare questi indicatori \u00e8&nbsp;<a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\/\">Google Lighthouse<\/a>, uno strumento open-source incorporato in Chrome che pu\u00f2 essere eseguito su qualsiasi pagina web per verificarme le sue prestazioni lato SEO.<\/p>\n\n\n\n<p>Per ottimizzare Next.js per andare produzione, devi buildare il progetto, avviarlo, aprirlo in modalit\u00e0 incognito nel browser e avviare Lighthouse su ciascuna pagina. Questo fornir\u00e0 indicazioni e migliori pratiche per migliorare le prestazioni del sito, l\u2019accessibilit\u00e0 e l\u2019ottimizzazione SEO.<\/p>\n\n\n\n<div class=\"wp-block-uagb-separator uagb-block-0128d285\"><div class=\"wp-block-uagb-separator__inner\" style=\"--my-background-image:\"><\/div><\/div>\n\n\n\n<p><em><strong>Leggi anche: <a href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/librerie-react-per-potenziare-la-tua-capacita-di-ui-design\/\" target=\"_blank\" aria-label=\"Librerie di componenti react per potenziare la tua capacit\u00e0 di UI design (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Librerie di componenti react per potenziare la tua capacit\u00e0 di UI design<\/a><\/strong><\/em><\/p>\n\n\n\n<div class=\"wp-block-uagb-separator uagb-block-a9efc121\"><div class=\"wp-block-uagb-separator__inner\" style=\"--my-background-image:\"><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusioni\">Conclusioni<\/h2>\n\n\n\n<p>In questo articolo, abbiamo esaminato cosa fare per rendere un\u2019applicazione Next.js pronta per andare in produzione. Come hai visto qui, questo comporta l\u2019abilitazione della cache, l\u2019utilizzo delle <strong>funzionalit\u00e0 avanzate di Next.js<\/strong> e la messa in piedi di un sistema di logging e monitoraggio delle prestazioni.<\/p>\n\n\n\n<p>Attraverso diversi esempi e suggerimenti, hai avuto l\u2019opportunit\u00e0 di vedere come <strong>costruire una applicazione Next.js affidabile.<\/strong> Il deployment di un sito in produzione non \u00e8 mai stato cos\u00ec facile!<\/p>\n\n\n\n<p>Grazie per aver letto la guida! Speriamo che tu abbia trovato questo articolo utile!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Next.js \u00e8 ormai considerato il framework per la costruzione del nuovo internet. Le sue funzionalit\u00e0 avanzate, la capacit\u00e0 di rendering lato server e l\u2019integrazione totale con React lo hanno reso una soluzioni preferite dagli sviluppatori web. Allo stesso tempo, ottimizzare un\u2019applicazione Next.js per andare in produzione richiede del lavoro. Solo cos\u00ec si possono raggiungere prestazioni&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/\">Read more<\/a><\/p>\n","protected":false},"author":160,"featured_media":22007,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[10265],"tags":[11475,10471],"collections":[],"class_list":{"0":"post-21995","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend-it","8":"tag-nextjs-it","9":"tag-react-it","10":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Ottimizzare Next.js per produzione: una guida completa<\/title>\n<meta name=\"description\" content=\"Leggi questo articolo per scoprire come ottimizzare Next.js, ridurre i tempi di caricamento e garantire un&#039;ottima esperienza utente.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come ottimizzare Next.js per andare in produzione\" \/>\n<meta property=\"og:description\" content=\"Leggi questo articolo per scoprire come ottimizzare Next.js, ridurre i tempi di caricamento e garantire un&#039;ottima esperienza utente.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-24T08:18:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-10T11:56:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1322\" \/>\n\t<meta property=\"og:image:height\" content=\"793\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Antonello Zanini\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Antonello Zanini\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/\"},\"author\":{\"name\":\"Antonello Zanini\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a\"},\"headline\":\"Come ottimizzare Next.js per andare in produzione\",\"datePublished\":\"2023-07-24T08:18:54+00:00\",\"dateModified\":\"2023-11-10T11:56:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/\"},\"wordCount\":1704,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min.jpg\",\"keywords\":[\"NextJS\",\"React\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/\",\"name\":\"Ottimizzare Next.js per produzione: una guida completa\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min.jpg\",\"datePublished\":\"2023-07-24T08:18:54+00:00\",\"dateModified\":\"2023-11-10T11:56:47+00:00\",\"description\":\"Leggi questo articolo per scoprire come ottimizzare Next.js, ridurre i tempi di caricamento e garantire un'ottima esperienza utente.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min.jpg\",\"width\":1322,\"height\":793,\"caption\":\"How to optimize Next.JS for production. Boost performance and user experience with this guide.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come ottimizzare Next.js per andare in produzione\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a\",\"name\":\"Antonello Zanini\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g\",\"caption\":\"Antonello Zanini\"},\"description\":\"I'm a software engineer, but I prefer to call myself a Technology Bishop. Spreading knowledge through writing is my mission.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/antonello-zanini?originalSubdomain=it\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ottimizzare Next.js per produzione: una guida completa","description":"Leggi questo articolo per scoprire come ottimizzare Next.js, ridurre i tempi di caricamento e garantire un'ottima esperienza utente.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/","og_locale":"en_US","og_type":"article","og_title":"Come ottimizzare Next.js per andare in produzione","og_description":"Leggi questo articolo per scoprire come ottimizzare Next.js, ridurre i tempi di caricamento e garantire un'ottima esperienza utente.","og_url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2023-07-24T08:18:54+00:00","article_modified_time":"2023-11-10T11:56:47+00:00","og_image":[{"width":1322,"height":793,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min.jpg","type":"image\/jpeg"}],"author":"Antonello Zanini","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Antonello Zanini","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/"},"author":{"name":"Antonello Zanini","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a"},"headline":"Come ottimizzare Next.js per andare in produzione","datePublished":"2023-07-24T08:18:54+00:00","dateModified":"2023-11-10T11:56:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/"},"wordCount":1704,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min.jpg","keywords":["NextJS","React"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/","url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/","name":"Ottimizzare Next.js per produzione: una guida completa","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min.jpg","datePublished":"2023-07-24T08:18:54+00:00","dateModified":"2023-11-10T11:56:47+00:00","description":"Leggi questo articolo per scoprire come ottimizzare Next.js, ridurre i tempi di caricamento e garantire un'ottima esperienza utente.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min.jpg","width":1322,"height":793,"caption":"How to optimize Next.JS for production. Boost performance and user experience with this guide."},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ottimizzare-next-js-produzione\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/"},{"@type":"ListItem","position":3,"name":"Come ottimizzare Next.js per andare in produzione"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a","name":"Antonello Zanini","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g","caption":"Antonello Zanini"},"description":"I'm a software engineer, but I prefer to call myself a Technology Bishop. Spreading knowledge through writing is my mission.","sameAs":["https:\/\/www.linkedin.com\/in\/antonello-zanini?originalSubdomain=it"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min-600x600.jpg","author_info":{"display_name":"Antonello Zanini","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min.jpg",1322,793,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min-300x180.jpg",300,180,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min-768x461.jpg",768,461,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min-1024x614.jpg",1024,614,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min.jpg",1322,793,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min.jpg",1322,793,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min.jpg",100,60,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Antonello Zanini","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/"},"uagb_comment_info":0,"uagb_excerpt":"Next.js \u00e8 ormai considerato il framework per la costruzione del nuovo internet. Le sue funzionalit\u00e0 avanzate, la capacit\u00e0 di rendering lato server e l\u2019integrazione totale con React lo hanno reso una soluzioni preferite dagli sviluppatori web. Allo stesso tempo, ottimizzare un\u2019applicazione Next.js per andare in produzione richiede del lavoro. Solo cos\u00ec si possono raggiungere prestazioni&#8230;&hellip;","lang":"it","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/21995","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/160"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=21995"}],"version-history":[{"count":3,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/21995\/revisions"}],"predecessor-version":[{"id":24480,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/21995\/revisions\/24480"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/22007"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=21995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=21995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=21995"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=21995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}