10 Ways To Improve Your Next.js App Performance
With this article, I will share some practices you can use to improve your app performance and architecture.
Next.js makes it easier for developers to create and build a web application in very few steps. Without spending days and hours structuring your app, You can start building features right away with the provided Next.js setup. This is great for those who want to ship their product fast.
Prerequisites? Not really
In order to follow this article, you don’t have to be an expert in Javascript or in Next.js. Basic knowledge is enough to get the hang of this article. I also won’t go into basic details like installing Next.js and Setting it up.
Tip: Next-generation infrastructure for your WordPress website.
1. Multi Zones
A zone is a single deployment of a Next.js app. You can have multiple zones and merge them as a single app.
Wait! What, what’s that?
Think about a marketplace app on which you have multiple pages and directories. For example, Home, Search, and Blog.
Imagine if you need 10 NPM packages to build this app but 8 of them are not needed on the blog page. Same for the components: You don’t need all the components that are used in the Search page to build the blog pages. In this case, you can keep your code clean and structured using the multi zones feature.
In order to enable this, you can create two directories: ‘marketplace’, ‘blog’. Both directories can have their own package.json file. In the marketplace folder, creates the next.config.js file.
Add BLOG_URL to the .env file. It can be something like this: BLOG_URL=”http://localhost:8080"
Then in the blog folder, you can add a next.config.js file like this:
Following that you can update your dev script in the package.json file like this:
“dev”: “next -p 8080”
If you go back to the marketplace folder and run ‘npm run dev’ you can simply navigate to localhost:3000/blog. This will load the app from the blog folder.
You can follow this example app for more information:
2. Using Hybrid AMP
AMP is not applicable for some cases but if you have a project that can use it, AMP will boost your SEO and it could reduce the amount of data the user downloads when they load the site.
Here is a simple example of using AMP:
You can also create AMP-only pages by just replacing { amp: ‘hybrid’ } config with { amp: true}.
3. Caching
Caching improves response times and reduces the number of requests to external services. Next.js automatically adds caching headers to immutable assets served from /_next/static including JavaScript, CSS, static images, and other media.
Image Caching:
Images are optimized dynamically upon request and stored in the <distDir>/cache/images directory.
The optimized image file will be served for subsequent requests until the expiration is reached. When a request is made that matches a cached but expired file, the cached file is deleted before generating a new optimized image and caching the new file.
Read more about Caching here:
Example Repo:
4. CDN Support
Next.js provides an Asset Prefix helper to support CDN. You can use a CDN like fastly or Kinsta and update next.config.js to enable CDN support like this:
5. Next/image
You can optimize images using a built-in next component (next/image). This can serve images in next-generation formats (like WebP) and avoid loading larger images in smaller viewports.
Usage Example:
6. Analyze Bundles
Using the next bundle-analyzer you can investigate the build size of your app. This will provide you a visual of bundle sizes.
You can install bundle-analyzer using:
npm install @next/bundle-analyzer
Then add this script to your package.json
"analyze": "ANALYZE=true next build"Finally updating the next.config.js file like this you can run the analyzer script:
If you now run npm run analyze or yarn analyze. You will get a visual like this:
Now you can start replacing or removing larger libraries and components.
7. Use an APM tool
Using an application performance monitoring tool can help you to trace user sessions and improve performance bottlenecks. You can use a tool like Elastic APM or NewRelic Browser and enable alerting whenever your page load time gets higher.
8. Build Micro Frontends With Module Federation
You can containerize your frontend app and consume it anywhere using Webpack’s Module Federation feature. You can find more helpful information about this in this article:
9. Dynamic Import (next/dynamic)
Sometimes you don’t need to import modules from the initial app/page load. With next/dynamic you can import JavaScript modules dynamically and work with them.
For example, A resource-heavy component is not rendered on page load is great for dynamic import.
Usage:
10. Script Optimization
next/script was introduced with Next.js 11 release and it enables developers to set the loading priority of third-party scripts.
you can define the strategy property and Next.js will automatically prioritize them to improve loading performance:
<Script
src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.map"
strategy="beforeInteractive" // lazyOnload, afterInteractive
/>Read more about next/script:
Conclusion
Next.js performance optimization is a broad topic with much ground to cover. In this article, I’ve only covered the tip of the iceberg about some of the rare practices you can adopt to get better performance results.
Tips:
Cloud backend for your Next.js forms:
Premium WordPress hosting:
