{"id":21989,"date":"2023-07-24T10:14:41","date_gmt":"2023-07-24T08:14:41","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=21989"},"modified":"2023-07-24T16:43:13","modified_gmt":"2023-07-24T14:43:13","slug":"optimize-next-js-for-production","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/","title":{"rendered":"How To Optimize Next.js for Production"},"content":{"rendered":"\n<p>Next.js is now considered the framework for building the modern Internet. Its built-in features, server-side rendering capabilities, <strong>and seamless integration with <a href=\"https:\/\/www.codemotion.com\/magazine\/languages\/a-complete-introduction-to-the-react-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">React<\/a><\/strong><a href=\"https:\/\/www.codemotion.com\/magazine\/languages\/a-complete-introduction-to-the-react-library\/\" target=\"_blank\" rel=\"noreferrer noopener\"> <\/a>have made it a top 3 solution among developers. At the same time, tuning a Next.js production application requires some work to <strong>achieve high-level performance<\/strong>, short loading times, and an excellent user experience.<\/p>\n\n\n\n<p>In this guide, you will dig into the essential strategies and best practices to deploy Next.js to production!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"best-practices-to-follow-before-deploying-next.js-to-production\">7 Best Practices to Follow Before Deploying Next.js to Production<\/h2>\n\n\n\n<p>Let\u2019s explore the most important best practice to optimize Next.js for production.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"take-advantage-of-next.js-built-in-optimization-features\">1. Take Advantage of Next.js\u2019 Built-In Optimization Features<\/h3>\n\n\n\n<p>Next.js comes with built-in optimization features to take the performance of your production application to the next level. All you have to do to leverage them is to integrate them into your project, as explained in the documentation. These include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/optimizing\/images\">Image Optimization<\/a>:&nbsp;<code>next\/image<\/code>&nbsp;exposes an&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/api-reference\/components\/image\"><code>&lt;Image&gt;<\/code><\/a>&nbsp;component that extends the traditional HTML&nbsp;<code>&lt;img&gt;<\/code>&nbsp;element with automatic image optimization capabilities. In detail, it allows Next.js to:\n<ul class=\"wp-block-list\">\n<li>Serve images in the best size depending on the user\u2019s device.<\/li>\n\n\n\n<li>Automatically convert them to modern image formats like WebP and AVIF.<\/li>\n\n\n\n<li>Prevent&nbsp;<a href=\"https:\/\/web.dev\/cls\/?sjid=15952579353748225174-NA\">layout shift<\/a>&nbsp;errors when loading images in the frontend.<\/li>\n\n\n\n<li>Load them only when they enter the viewport, using native browser lazy loading.<\/li>\n\n\n\n<li>Resize images on-demand, even for remote files.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/optimizing\/fonts\">Font Optimization<\/a>:&nbsp;<code>next\/font<\/code>&nbsp;optimizes local fonts and removes external network requests for improved privacy and performance. As of Next.js 13, it supports self-hosting on any Google Font to avoid making requests to retrieve font files from Google.<\/li>\n\n\n\n<li><a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/optimizing\/scripts\">Script Optimization<\/a>:&nbsp;<code>next\/script<\/code>&nbsp;offers a&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/api-reference\/components\/script\"><code>&lt;Script&gt;<\/code><\/a>&nbsp;component that extends the traditional HTML&nbsp;<code>&lt;script&gt;<\/code>&nbsp;tag by allowing JavaScript scripts to be loaded only once across multiple pages.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"configure-caching-and-use-incremental-static-regeneration-whenever-possible\">2. Configure Caching and Use Incremental Static Regeneration Whenever Possible<\/h3>\n\n\n\n<p>Next.js treats file inside the&nbsp;<code>\/public<\/code>&nbsp;folder as static assets. For example, if you store a&nbsp;<code>logo.png<\/code>&nbsp;image file in&nbsp;<code>\/public<\/code>, you can then reference it in your code as&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\">\"Company's Logo\"<\/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>Usually,&nbsp;<code>\/public<\/code>&nbsp;contains static images, JavaScript, CSS, and other media files. Caching these resources is a good way to improve response times and reduce the number of requests required to render a page.<\/p>\n\n\n\n<p>Here is why, by default, Next.js add the following header in production for those assets:<\/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>This instructs the browser to cache those files for one year. So, if your Next.js site relies on some static resources, you should download and place them inside&nbsp;<code>\/public<\/code>.<\/p>\n\n\n\n<p>Next.js also provides the&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/api-reference\/components\/image#minimumcachettl\"><code>minimumCacheTTL<\/code><\/a>&nbsp;configuration to specify the TTL (<a href=\"https:\/\/en.wikipedia.org\/wiki\/Time_to_live\">Time To Live<\/a>) in seconds for caching images optimized through&nbsp;<code>&lt;Image&gt;<\/code>. Set it in&nbsp;<code>next.config.js<\/code>&nbsp;as follows:<\/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 optimized images for 60 seconds    <\/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>Similarly, Next.js can cache statically generated pages through&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/data-fetching\/incremental-static-regeneration\">Incremental Static Regeneration<\/a>&nbsp;(ISR). Thanks to this feature, new static pages can be created or updated after the application has been built.<\/p>\n\n\n\n<p>To enable ISR, set the&nbsp;<code>revalidate<\/code>&nbsp;option 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 will re-generate this page <\/span>\n    <span class=\"hljs-comment\">\/\/ when a request comes in, at most once<\/span>\n    <span class=\"hljs-comment\">\/\/ every 10 seconds<\/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>This is how ISR works:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The site initially shows the pre-rendered page generated at build time.<\/li>\n\n\n\n<li>Within 10 seconds, it will continue to display the initial page.<\/li>\n\n\n\n<li>When a request arrives after 10 seconds from the last regeneration, the framework triggers a background regeneration of the page.<\/li>\n<\/ol>\n\n\n\n<p>Note that a Next.js production app only regenerates static pages that are requested by users to save resources.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"integrate-an-analytics-or-apm-tool\">3. Integrate an Analytics or APM Tool<\/h3>\n\n\n\n<p>Once a Next.js site is in production, you need a way to track its performance. In particular, you should have a system in place to monitor page views and get information about site traffic.<\/p>\n\n\n\n<p>When deploying to Vercel, you can achieve that with&nbsp;<a href=\"https:\/\/nextjs.org\/analytics\">Next.js Speed Insights<\/a>. This tool allows you to analyze and measure the performance of your application\u2019s pages using various metrics. To enable it:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Turn on the Web Analytics option in the Vercel Dashboard.<\/li>\n\n\n\n<li>Add the&nbsp;<code>@vercel\/analytics<\/code>&nbsp;package to your project\u2019s dependencies with&nbsp;<code>npm i @vercel\/analytics<\/code><\/li>\n\n\n\n<li>Use the&nbsp;<code>&lt;Analytics \/&gt;<\/code>&nbsp;component to inject the analytics script into your app.<\/li>\n\n\n\n<li>Deploy your app to Vercel, and data should start flowing to the Analytics view.<\/li>\n<\/ol>\n\n\n\n<p>Similarly, you need a service that tracks site performance, alerts you when something goes wrong or the site goes offline, and collects information about bugs and runtime errors. This is what&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/Application_performance_management\">Application Monitoring<\/a>&nbsp;(APM) is all about.<\/p>\n\n\n\n<p>Some of the most popular APM libraries for Next.js are&nbsp;<a href=\"https:\/\/sentry.io\/welcome\/\">Sentry<\/a>,&nbsp;<a href=\"https:\/\/newrelic.com\/\">New Relic<\/a>, and&nbsp;<a href=\"https:\/\/www.appsignal.com\/\">AppSignal<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"set-up-a-logging-system\">4. Set Up a Logging System<\/h3>\n\n\n\n<p>To keep track of what is going on in a Next.js production app, you must add some logs to your code. The easiest way to log messages on both the client and server is using the methods exposed by the JavaScript&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/console\"><code>console<\/code><\/a>&nbsp;object. The most popular ones are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>console.clear()<\/code>: Clears the browser console.<\/li>\n\n\n\n<li><code>console.log()<\/code>: Logs general information.<\/li>\n\n\n\n<li><code>console.debug()<\/code>: Logs a debug message in the browser console and a regular message on the server.<\/li>\n\n\n\n<li><code>console.error()<\/code>: Logs an error message.<\/li>\n\n\n\n<li><code>console.warn()<\/code>: Logs a warning message in the browser console or an error message on the server<\/li>\n\n\n\n<li><code>console.time()<\/code>: Starts a timer that can be used to compute the duration of an operation.<\/li>\n\n\n\n<li><code>console.timeEnd()<\/code>: Stops the timer and prints the duration of the operation.<\/li>\n<\/ul>\n\n\n\n<p>If you instead prefer a more structured solution, Next.js recommends&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/pino\"><code>pino<\/code><\/a>. This is a fast and lightweight JavaScript logging library designed for high-performance applications.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"enable-error-handling-with-a-custom-500-and-400-page\">5. Enable Error Handling With Custom 500 and 400 Pages<\/h3>\n\n\n\n<p>Like any other application, Next.js sites are subject to errors. One of the most important aspects of error handling is presenting meaningful error messages to users to inform them of what happened. When an error occurs in the frontend or backend, Next.js displays this static 500 page:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i.stack.imgur.com\/mCKBj.png\" alt=\"The Next.js default 500 page\"\/><figcaption class=\"wp-element-caption\">The Next.js default 500 page<\/figcaption><\/figure>\n\n\n\n<p>As you can see, this page is not informative at all and may result in a bad user experience for visitors. This is why Next.js supports custom 500 pages.<\/p>\n\n\n\n<p>If you are a Pages Router user, create a&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/routing\/custom-error#500-page\"><code>500.js<\/code><\/a>&nbsp;page under&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\">\/\/ your custom 500 page component.... <\/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>This represents the frontend page components that will be shown to users in case of errors.<\/p>\n\n\n\n<p>If you are an App Router user, create an&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/file-conventions\/error\"><code>error.js<\/code><\/a>&nbsp;file under&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\">\/\/ error components must be client components<\/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\">\/\/ your custom error page component.... <\/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>Note that this must be a&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/getting-started\/react-essentials#client-components\">client component<\/a>.<\/p>\n\n\n\n<p>Next.js also supports a static 404 page, which is rendered:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>When the object returned by&nbsp;<code>getStaticProps()<\/code>&nbsp;or&nbsp;<code>getServerSideProps()<\/code>&nbsp;contains&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/api-reference\/functions\/get-static-props#notfound\"><code>notFound: true<\/code><\/a>&nbsp;in a Pages Router app.<\/li>\n\n\n\n<li>When the&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/functions\/not-found\"><code>notFound()<\/code><\/a>&nbsp;function is called in an App Router app.<\/li>\n<\/ul>\n\n\n\n<p>Again, the default 404 page is not the best:<\/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=\"The Next.js default 404 page\"\/><figcaption class=\"wp-element-caption\">The Next.js default 404 page<\/figcaption><\/figure>\n\n\n\n<p>To customize it, if you are a Pages Router user, create a&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/routing\/custom-error#404-page\"><code>404.js<\/code><\/a>&nbsp;page under&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\">\/\/ your custom 404 error page component.... <\/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>If you are an App Router user, define a&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/file-conventions\/not-found\"><code>not-found.js<\/code><\/a>&nbsp;file under&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\">\/\/ your custom 404 error page component.... <\/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=\"reduce-the-size-of-the-build-bundle\">6. Reduce the Size of the Build Bundle<\/h3>\n\n\n\n<p>Producing a minimized bundle is great, as clients will take less time and network bandwidth to download and render the Next.js production app.<\/p>\n\n\n\n<p>During the&nbsp;<code>next build<\/code>&nbsp;task, Next.js generates an optimized JavaScript bundle for each page.<br>The goal is to try to reduce those bundles to the bare while preserving functionality. For this purpose, you can use&nbsp;<a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/optimizing\/lazy-loading\">dynamic imports<\/a>&nbsp;via&nbsp;<code>next\/dynamic<\/code>&nbsp;to lazy-load JavaScript resources. This mechanism allows you to defer loading specific components or libraries until the user performs a particular operation on the page.<\/p>\n\n\n\n<p>To analyze the bundle produced by Next.js and get guidance on how to reduce its size, you can use the following tools:<\/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>: To visually explore the size of webpack output files in an interactive treemap.<\/li>\n\n\n\n<li><a href=\"https:\/\/packagephobia.com\/\">Package Phobia<\/a>: To analyze the cost of adding a new dependency to your project.<\/li>\n\n\n\n<li><a href=\"https:\/\/bundlephobia.com\/\">Bundle Phobia<\/a>: To analyze how much a dependency will increase the bundle size.<\/li>\n\n\n\n<li><a href=\"https:\/\/bundlejs.com\/\">bundlejs<\/a>: To quickly bundle and minify your project in your browser.<\/li>\n\n\n\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=wix.vscode-import-cost\">Import Cost<\/a>: To display the size of any imported package inside Visual Studio Code.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"optimize-seo-page-performance-with-lighthouse\">7. Optimize Page SEO Performance With Lighthouse<\/h3>\n\n\n\n<p>The ultimate goal of most Next.js sites is to produce excellent SEO results. Google has changed its approach to SEO performance evaluation a great deal over time, and it now focuses primarily on&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>: Measures the time it takes for the main content of a page to become visible to users.<\/li>\n\n\n\n<li><strong>First Input Delay (FID)<\/strong>: Evaluates the time delay between a user\u2019s first interaction and the browser\u2019s response.<\/li>\n\n\n\n<li><strong>Cumulative Layout Shift (CLS)<\/strong>: Gauges the visual stability of a page by measuring the number of unexpected layout shifts that may annoy users.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-uagb-separator uagb-block-e60e949b\"><div class=\"wp-block-uagb-separator__inner\" style=\"--my-background-image:\"><\/div><\/div>\n\n\n\n<p><strong><em>Recommended article: <a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/design-ux\/react-component-libraries-for-boosting-your-ui-design\/\" target=\"_blank\" aria-label=\"React Libraries for Boosting UI Design (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">React Libraries for Boosting UI Design<\/a><\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-uagb-separator uagb-block-00704490\"><div class=\"wp-block-uagb-separator__inner\" style=\"--my-background-image:\"><\/div><\/div>\n\n\n\n<p>These represent user experience metrics that Google uses to assess and quantify the overall performance of web pages and define their ranking in search results.<\/p>\n\n\n\n<p>The best tool for optimizing these indicators is&nbsp;<a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\/\">Google Lighthouse<\/a>, an open-source tool built into Chrome that can be run on any web page to check its SEO performance.<\/p>\n\n\n\n<p>To optimize Next.js for production, you should build the project, start it, open it in Incognito mode in the browser, and launch Lighthouse on each page. This will provide guidance and best practices for improving site performance, accessibility, and SEO.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>In this article, you looked at what to do to make a Next.js application production-ready. As you learned here, this involves enabling caching, using the advanced built-in optimization features, and setting up a performance logging and monitoring system.<\/p>\n\n\n\n<p>Through several examples and insights, you had the opportunity to see how to build a reliable Next.js production site. Deploying a top-notch site has never been easier!<\/p>\n\n\n\n<p>Thanks for reading! We hope you found this article helpful!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Next.js is now considered the framework for building the modern Internet. Its built-in features, server-side rendering capabilities, and seamless integration with React have made it a top 3 solution among developers. At the same time, tuning a Next.js production application requires some work to achieve high-level performance, short loading times, and an excellent user experience.&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/\">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":[6],"tags":[],"collections":[],"class_list":{"0":"post-21989","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend","8":"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>Optimize Next.js for Production: A Complete Guide - Codemotion<\/title>\n<meta name=\"description\" content=\"This guide will help you optimize Next.js for production. Boost performance, loading times, and UX with these tips and best practices.\" \/>\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\/frontend\/optimize-next-js-for-production\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Optimize Next.js for Production\" \/>\n<meta property=\"og:description\" content=\"This guide will help you optimize Next.js for production. Boost performance, loading times, and UX with these tips and best practices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/\" \/>\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:14:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-24T14:43:13+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=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/\"},\"author\":{\"name\":\"Antonello Zanini\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a\"},\"headline\":\"How To Optimize Next.js for Production\",\"datePublished\":\"2023-07-24T08:14:41+00:00\",\"dateModified\":\"2023-07-24T14:43:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/\"},\"wordCount\":1599,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min.jpg\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/\",\"name\":\"Optimize Next.js for Production: A Complete Guide - Codemotion\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min.jpg\",\"datePublished\":\"2023-07-24T08:14:41+00:00\",\"dateModified\":\"2023-07-24T14:43:13+00:00\",\"description\":\"This guide will help you optimize Next.js for production. Boost performance, loading times, and UX with these tips and best practices.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/#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\/frontend\/optimize-next-js-for-production\/#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\/frontend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How To Optimize Next.js for Production\"}]},{\"@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":"Optimize Next.js for Production: A Complete Guide - Codemotion","description":"This guide will help you optimize Next.js for production. Boost performance, loading times, and UX with these tips and best practices.","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\/frontend\/optimize-next-js-for-production\/","og_locale":"en_US","og_type":"article","og_title":"How To Optimize Next.js for Production","og_description":"This guide will help you optimize Next.js for production. Boost performance, loading times, and UX with these tips and best practices.","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2023-07-24T08:14:41+00:00","article_modified_time":"2023-07-24T14:43:13+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":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/"},"author":{"name":"Antonello Zanini","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a"},"headline":"How To Optimize Next.js for Production","datePublished":"2023-07-24T08:14:41+00:00","dateModified":"2023-07-24T14:43:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/"},"wordCount":1599,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min.jpg","articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/","name":"Optimize Next.js for Production: A Complete Guide - Codemotion","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/07\/Optimize-NextJS-Guide-min.jpg","datePublished":"2023-07-24T08:14:41+00:00","dateModified":"2023-07-24T14:43:13+00:00","description":"This guide will help you optimize Next.js for production. Boost performance, loading times, and UX with these tips and best practices.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/optimize-next-js-for-production\/#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\/frontend\/optimize-next-js-for-production\/#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\/frontend\/"},{"@type":"ListItem","position":3,"name":"How To Optimize Next.js for Production"}]},{"@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 is now considered the framework for building the modern Internet. Its built-in features, server-side rendering capabilities, and seamless integration with React have made it a top 3 solution among developers. At the same time, tuning a Next.js production application requires some work to achieve high-level performance, short loading times, and an excellent user experience.&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/21989","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=21989"}],"version-history":[{"count":10,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/21989\/revisions"}],"predecessor-version":[{"id":22032,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/21989\/revisions\/22032"}],"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=21989"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=21989"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=21989"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=21989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}