Why You Should Replace Babel with SWC in Next.js

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.

1. 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.

2. 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.

3. 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.

How to use swc in Next.js v12?

Refer to this guideline: https://nextjs.org/docs/advanced-features/compiler

Reference:

• https://blog.bitsrc.io/why-you-should-replace-babel-with-swc-in-next-js-7d47510d0e0d