Next.js: Regular vs. Standalone Build Size
Introduction
Hi here is Tezuka, a System Engineer from WESEEK, Inc. in Japan.
In this article, I will focus on the standalone feature of Next.js, to see how much it reduces build size.
What is the “Standalone” Function?
Here is the reference from official website
As the official documentation describes, the standalone function is enabled by writing the above code in next.config.js. When built with this mode enabled, a standalone folder will be created under the .next directory. Under this folder, only the files to be used are copied from node_modules, and a minimal server.js file is generated that can be used in place of the next start command.
In short, a standalone folder is automatically created, and the minimal set of files necessary for operation is copied into it, a convenient feature. This feature reduces build size.
Now It’s Time to Build
I would like to check my personal blog by actually building it in two different ways. For reference, the dependencies of the blog are as follows:
It is a common static personal blog made by Next.js that is not particularly complex.
Build without Standalone Function
First, try building without the standalone feature.
Since the standalone feature is disabled, the node_module built for production is included in the build as it is.
Build and verify that it can be accessed from a browser.
As a result, the image size without the standalone function was 2.09 GB.
Build with Standalone Function
Next, I would like to build with the standalone function enabled.
Create a Dockerfile using the official Dockerfile as a reference; since the standalone feature is enabled, node_modules built for production do not need to be included in the build.
Static files such as public and .next/static are not automatically copied under the standalone folder since they are usually assumed to be distributed by CDN, but you can manually copy them to standalone/public and standalone/.next/static, making it possible to run the app only in the standalone folder.
Build and verify that it can be accessed from a browser.
As a result, the image size with the standalone feature enabled was 956.74 MB.
Compare Results
For Regular: the image size is 2.09 GB.
With the standalone feature: the image size is 956.74 MB.
I found that the build size was significantly smaller. If the app works properly, the build size should be small, so I am quite happy with the result!
Summary
If you are using a cloud container registry service, you may find that the price varies depending on the size of the image. If you are deploying apps using Docker and Next.js, you should definitely take advantage of the standalone feature!!
About Us💡
GROWI
In addition, I want to introduce a little more about GROWI, an open software developed by us WESEEK, Inc.
GROWI is a wiki service with features-rich support for efficient information storage within the company. It also boasts high security and various authentication methods are available to simplify authentication management, including LDAP/OAuth/SAML.
GROWI originated in Japan and GROWI OSS is FREE for anyone to download and use in English. For more information, go to GROWI.org to learn more about us.
GROWI.cloud
GROWI.cloud is the online version of GROWI that allows non-engineers to manage knowledge easily without system-building processes.
Besides organizational use, GROWI.cloud is also available for individual use and you can always start with a free trial here. After the one-month free trial, you can change your plan into either the individual, duo, or trio plan, OR continue to use the personal plan for FREE with a maximum of 25 users! Go to price & features to learn about the details.
GROWI.cloud origins in Japan and now also offered in the Philippine and other countries which allows customers to use the service in English.
Go to GROWI.cloud to learn more about us. You can also follow our Facebook to see updates about our service.
