This content originally appeared on Bits and Pieces - Medium and was authored by Lahiru Hewawasam
Using SWC in your next Next.js project
Before the release of Next.js v12, it utilized Babel to transpile edge JavaScript to plain ES5 JavaScript that can run in any web browser. It converts the syntax of modern JavaScript into a form that old web browsers can easily understand. Next.js versions up to v11 use the Babel transcompiler, making it inefficient and slow, sometimes taking 12 to 15 seconds for a hot reload. However, Next.js v12 introduces the SWC compiler to provide faster compilation times.
Therefore, this article will compare Babel and SWC and help you make an educated decision when choosing a suitable compiler for your next project.
The Limitations of Next.js with Babel
Even though Babel makes it possible for developers to write in the latest version of JavaScript and still be compatible with older web browsers, Babel has its own set of limitations.
Limitations of Babel
- Babel changes the syntax of the code when it transpiles it. Therefore, it would make it difficult for developers to understand the code once deployed to a production environment.
- The size of the code increases after being transpiled compared to that of the original code.
- Transpiling does not work with all features that come with newer versions of JavaScript. Instead, you would need to use a polyfill to ensure that it works on older browsers.
- The time taken for Babel to compile the code is far greater than that of other compilers.
These limitations drastically increase the development time, thus reducing productivity. This is where we look into an alternative that comes in the Rust-based compiler.
Using SWC with Next.js
The release of Next.js v12 introduces the SWC (Speedy Web Compiler). It is a fast and efficient compiler written in Rust. Rust takes advantage of being a low-level language to compile and run faster than a high-level language such as JavaScript. Developers can use SWC to perform several functions such as minification, bundling, compiling, and more.
Furthermore, its design allows for the compiler extension, allowing it to workaround design constraints.
Let us look at some of the advantages that come with using the SWC compiler.
Advantages of using SWC:
- Extensibility: The extensible nature of SWC allows the developer to use the compiler since it is prebuilt into Next.js v12 without having to fork the library.
- WebAssembly: The Rust’s support for WASM (WebAssembly) gives the compiler an added advantage of acting as a portable compilation target, enabling the deployment on the web for server and client applications alike.
- Performance: SWC provides far better performance than other compilers such as Babel. It is predominantly due to the use of Rust instead of JavaScript to take advantage of native compilation.
- Community Support: The Rust and SWC communities are ever-growing, and you can find support easily.
Now that we know some of the advantages that come with using SWC to compile your Next.js code, let us look at how we can configure SWC for your Next.js applications.
Configuring SWC for Next.js projects
There are two ways that we can go about configuring the SWC compiler for your Next.js projects.
When creating a new project
Next.js v12 introduces the new compiler already bundled with Next.js and does not need additional deployment steps.
You need only create a v12 Next.js project by using any of the following commands.
npx create-next-app@latest
#OR
yarn create next-app
If you want to start a TypeScript project, you can use the following command.
npx create-next-app@latest --typescript
#OR
yarn create next-app --typescript
Adding SWC to your existing project
You need not add the SCW compiler to your existing project if you use Next.js v12 and above. However, if you are using an older Next.js version, you will need to upgrade your version of Next.js for your project.
You can upgrade Next.js to v12 by executing the following command within your project directory.
npm install next@12
If you were using a custom Babel configuration within your project, you would need to remove the custom configuration file. If a custom Babel configuration file is present within your project, Next.js will automatically switch to your existing Babel configuration. This custom Babel configuration can be the “.babelrc” or the “babel.config.js” stored within your project directory.
You can provide additional configuration options to the SWC compiler by editing the “next.config.js” configuration file. The configuration file can include any function compatible with SWC, including but not limited to Minification, Removing console calls, Style Components.
We will now look into how you can configure these functions within your Next.js application.
Configuring Minification with SWC
You can use SWC to perform minification of your code by updating the following parameter within the “next.config.js” configuration file.
module.exports = {
swcMinify: true,
}Removing console calls with SWC
You can configure SWC to remove all “console” calls in your application code (not in “node_modules”) by updating the following parameter within the “next.config.js” configuration file.
module.exports = {
compiler: {
removeConsole: true,},
}However, if you want to exclude any console function, the configuration must reflect the exclusion as shown below.
The example below removes all “console” calls except “console.log” calls.
module.exports = {
compiler: {
removeConsole: {
exclude: ['log'],
},
},
}Using the SWC compiler provides customizable configuration options and has a massive performance boost compared to Babel.
Performance Benefits of SWC
The Rust-based compiler provides faster operation capabilities when compared to its predecessors.
For example, the SWC compiler is 17 times faster than Babel while having approximately five times faster builds and three times faster Fast Refresh.
SWC conducts performance benchmarks to compare and contrast the performance of SWC against other libraries such as Babel. These performance benchmarks show a clear performance advantage of using SWC compared to Babel.
For example, the tests show an approximate six to seven times performance increase in Synchronous transforms for ES3, ES5, and ES2015 while showing an approximate eight to ten times performance increase in Synchronous transforms for ES2016 to ES2020.
Build composable web applications
Don’t build web monoliths. Use Bit to create and compose decoupled software components — in your favorite frameworks like React or Node. Build scalable and modular applications with a powerful and enjoyable dev experience.
Bring your team to Bit Cloud to host and collaborate on components together, and speed up, scale, and standardize development as a team. Try composable frontends with a Design System or Micro Frontends, or explore the composable backend with serverside components.
Conclusion
When comparing Babel and SWC, there seems to be a clear winner out of these two compilers. Babel was one of the most widely used compilers for Next.js. However, Babel is driven out of use with Next.js v12’s robust SWC compiler. In addition, SWC brings in far superior performance into your daily development processes by drastically cutting down compilation times. With all these advantages of using SWC with Next.js, it becomes a unanimous decision to upgrade to SWC.
I hope you have found this helpful. Thank you for reading!
Learn more
- Building a Composable UI Component Library
- How We Build Micro Frontends
- How we Build a Component Design System
- How to build a composable blog
- The Composable Enterprise: A Guide
- Meet Component-Driven Content: Applicable, Composable
Why You Should Replace Babel with SWC in Next.js was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Lahiru Hewawasam
Lahiru Hewawasam | Sciencx (2022-05-30T07:02:28+00:00) Why You Should Replace Babel with SWC in Next.js. Retrieved from https://www.scien.cx/2022/05/30/why-you-should-replace-babel-with-swc-in-next-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.