Next.js reborn from stepping on the pit to breaking the cocoon in Serverless

Author of this article: Yang Subo

Back-end full-stack development, currently responsible for Cloud Studio products of Tengyun Buckle. He has in-depth research and rich practice on VS Code and Theia IDE in the field of WebIDE; many years of experience in the serverless field, and is the author of the Serverless First Malagu open source framework; loves open source and dares to innovate.

foreword

Next.js is a full-stack application development framework developed by the Vercel team. We use Next.js to develop front-end pages and some lightweight back-end APIs. Both front-end and back-end use Javascript technology stack, and the front-end and back-end are integrated Managed (front-end and back-end are developed in the same project). Another well-known feature is its server-side rendering capability, which is SEO friendly. Vercel itself is a serverless platform with excellent user experience, which supports one-click deployment of dozens of development frameworks including Next.js to the Vercel platform. The Vercel platform itself has strong adaptation and expansion capabilities, and third-party frameworks can adapt independently according to the adaptation rules of the Vercel platform. Next.js, the son of Vercel, can be perfectly adapted to the Vercel platform. Through Next.js + Vercel, both development and deployment can have the ultimate experience. The Vercel team believes in the principle of "eat your own dog food", and many applications are developed based on their own tools and platforms.

a fly in the ointment

Next.js + Vercel looks so perfect: One-click deployment of Next.js to Vercel via the Vercel CLI. In addition, Next.js can also be easily run on cloud hosts. However, as a foreign serverless platform, Vercel always has various insurmountable restrictions for domestic users. How to run Next.js perfectly on the domestic serverless platform becomes particularly important.

The domestic serverless platform officials have their own skills on how to make Next.js run. Getting Next.js to run on a serverless platform is not difficult, but it is challenging to achieve the ultimate deployment and running experience like Vercel.

When trying to deploy Next.js to domestic serverless platforms, such as Tencent Cloud Functions and Alibaba Cloud Function Computing, you may encounter the following pits:

1. Difficulty in running adaptation: The running of Next.js requires an HTTP Server, and the event function provides a simple signature function, which cannot be run directly. The event function needs to be simulated as a proxy service similar to HTTP Server;

2. The code size is too large: The code size of the simplest Next.js application is about 245MB, which is about 54MB after packaging and compression, and the function code size limit is generally within 50MB (Alibaba Cloud Function Compute can upload code through OSS and can exceed 50MB limit, but cannot exceed 100MB). Excessive code size often brings a series of side effects:

   a. The code upload time is long, and it is easy to fail, and the deployment cost increases (can be solved by NFS and Layer);

   b. Rely on more cloud services, such as deploying code packages using object storage services, or uploading the large node_modules directory to the NFS service, and then mounting it on the function. In short, make the application architecture complex;

   c. The cold start time becomes longer. When the function runs for the first time, the remote code needs to be loaded first. If the code package is larger, the cold start time will be longer.

However, through Tencent Cloud's Web Functions and Alibaba Cloud Function Compute's Custom Runtime, the first problem can be solved because it allows us to run a real HTTP Server. The second problem is much more difficult. Although some of these problems can be alleviated by certain means, such as cold start can be solved by pre-configured concurrency, but it will make the operating cost unacceptable. So the fundamental solution to the problem is the code size.

Why is Next.js project code bulky?

In order to analyze this problem, we need to understand the architecture of Next.js first. Next.js is a React server-side rendering framework with a high degree of integration. The framework itself integrates Webpack, SWC, Babel, Express, etc., so that developers can easily build their own by only relying on Next, React and React-dom SSR React application, we can even not care about routing. Next.js is highly integrated and easy to implement code splitting, routing jumps, hot updates, server-side rendering and front-end rendering.

In the Next.js project, not only the dependencies required for runtime, but also the dependencies required for local development and construction are included, and the dependencies during development are large. Our common solution is to simply and rudely package all dependencies, resulting in a large Next.js project code.

How Vercel Officially Packages and Deploys Next.js

Vercel's official solution for packaging and deploying Next.js is more complicated. The underlying infrastructure of the Vercel platform integrates AWS Lambda, and Next.js is essentially deployed on the AWS Lambda platform. In order to make Next.js run on Lambda, Vercel officially provides a builder specifically for building Next.js projects: @vercel/next . The logic of the builder is roughly to construct and output each API in Next.js and the page rendered by the server as a function, and this series of functions belong to an application on the Vercel platform. This ensures that the code size of each function is small enough.

Best Practices for Packaging and Deploying Next.js to Domestic Serverless Platforms

Solve the difficulty of function adaptation: We can solve it through Web functions or Custom Runtime (the way to use custom mirroring is not recommended, because the cold start of custom mirroring is very serious), and run an HTTP Server in it, and simply adapt Next. js, there is an official example in Next.js.

Solve the problem that the size of the code package is too large: Optional dependencies and development dependencies that are not needed at runtime can be eliminated. The elimination method is as follows:

 npm install --omit optional --omit dev
 # 或者
yarn install --ignore-optional --prod

Note: Because the swc build tool is installed through optional dependencies and is not required at runtime, we need to remove the optional dependencies as well.

The code size constructed by the above method is reduced from the original 54MB to 18MB. In addition, it is worth mentioning that the built-in Node.js version of Alibaba Cloud Function Compute Custom Runtime is v10.16.2, and the latest version of Next.js must be Node.js 12.22.0+. All Next.js applications directly deployed on the Custom Runtime of Function Compute cannot run. At this time, we need to download the Node.js binary into our own code (which can also be implemented through Layer), and then specify a new PATH environment variable.

If you need to do the above operations every time, it will be very cumbersome, and you need to write the adaptation entry code yourself, as well as the bootstrap file necessary for Web functions and Custom Runtime, and the file must have executable permissions, and additionally install a new version at runtime. Node.js. In fact, these capabilities are already built-in in the Cloud Studio ( https://cloudstudio.net/ ) cloud development platform . For a native Next.js application, using the Cloud Studio cloud development platform can be deployed to Tencent Cloud Function or Alibaba Function Compute with one click, with zero intrusion and zero threshold for business code, just the following steps:

1. Log in to the Cloud Studio Dashboard page.

( https://cloudstudio.net/ )

2. Select the Next.js template and create a workspace.

3. Switch to the Cloud Studio Cloud Deployment Suite view.

4. Select the Tencent Cloud deployment option, and log in by scanning the QR code on WeChat.

5. Click the [Start Deployment] button to deploy the Next.js application with one click.

6. Click the [Access] button to immediately preview the effect after deployment.

Description: The same Next.js application, without any modification, can be deployed with one click using the same steps as above.

Cloud Studio is a browser-based integrated development environment (IDE) that provides developers with an always-on cloud workstation. It includes the basic functions of IDE such as code highlighting, automatic completion, Git integration, terminal, etc. It also supports real-time debugging, plug-in extension, etc., which can help developers quickly complete the development, compilation and deployment of various applications. Users do not need to install when using Cloud Studio, they can use it anytime and anywhere by opening a browser.

Currently, Cloud Studio supports deployment to Tencent Cloud Functions and Alibaba Cloud Function Compute, and supports one-click deployment of 15+ front-end and back-end frameworks.

write at the end

From the random packaging at the beginning to the delicate packaging at the back, making the code size smaller can help you avoid a series of pits. As for why we don't use an extreme solution like Vercel, there are three reasons: the implementation cost is too high, the deep dependence on the Next.js API, the maintenance cost is high, and the management cost of building multiple functions is extremely high (we can't provide the same as Vercel. a high-level platform). Through the Cloud Studio ( https://cloudstudio.net/ ) cloud development platform, we can deploy popular frameworks such as Next.js with one click, with zero modification to the framework.