Next.js Compiler

The Next.js Compiler, written in Rust using SWC, allows Next.js to transform and minify your JavaScript code for production. This replaces Babel for individual files and Terser for minifying output bundles.
Compilation using the Next.js Compiler is 17x faster than Babel and enabled by default since Next.js version 12. If you have an existing Babel configuration or are using unsupported features, your application will opt-out of the Next.js Compiler and continue using Babel.
SWC is an extensible Rust-based platform for the next generation of fast developer tools.
SWC can be used for compilation, minification, bundling, and more – and is designed to be extended. It's something you can call to perform code transformations (either built-in or custom). Running those transformations happens through higher-level tools like Next.js.
We chose to build on SWC for a few reasons:
We're working to port babel-plugin-styled-components to the Next.js Compiler.
First, update to the latest version of Next.js: npm install next@latest. Then, update your next.config.js file:
For advanced use cases, you can configure individual properties for styled-components compilation.
Note: ssr and displayName transforms are the main requirement for using styled-components in Next.js.
The Next.js Compiler transpiles your tests and simplifies configuring Jest together with Next.js including:
First, update to the latest version of Next.js: npm install next@latest. Then, update your jest.config.js file:
To enable Relay support:
In Next.js, all JavaScript files in pages directory are considered routes. So, for relay-compiler you'll need to specify artifactDirectory configuration settings outside of the pages, otherwise relay-compiler will generate files next to the source file in the __generated__ directory, and this file will be considered a route, which will break production builds.
Allows to remove JSX properties. This is often used for testing. Similar to babel-plugin-react-remove-properties.
To remove properties matching the default regex ^data-test:
To remove custom properties:
This transform allows for removing all console.* calls in application code (not node_modules). Similar to babel-plugin-transform-remove-console.
Remove all console.* calls:
Remove console.* output except console.error:
Next.js will automatically detect experimentalDecorators in jsconfig.json or tsconfig.json. Legacy decorators are commonly used with older versions of libraries like mobx.
This flag is only supported for compatibility with existing applications. We do not recommend using legacy decorators in new applications.
First, update to the latest version of Next.js: npm install next@latest. Then, update your jsconfig.json or tsconfig.json file:
Next.js will automatically detect jsxImportSource in jsconfig.json or tsconfig.json and apply that. This is commonly used with libraries like Theme UI.
First, update to the latest version of Next.js: npm install next@latest. Then, update your jsconfig.json or tsconfig.json file:
We're working to port @emotion/babel-plugin to the Next.js Compiler.
First, update to the latest version of Next.js: npm install next@latest. Then, update your next.config.js file:
Next.js' swc compiler is used for minification by default since v13. This is 7x faster than Terser.
Starting with v15, minification cannot be customized using next.config.js. Support for the swcMinify flag has been removed.
Next.js can automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (node_modules). This replaces the next-transpile-modules package.
This option has been superseded by optimizePackageImports in Next.js 13.5. We recommend upgrading to use the new option that does not require manual configuration of import paths.
The define option allows you to statically replace variables in your code at build-time. The option takes an object as key-value pairs, where the keys are the variables that should be replaced with the corresponding values.
Use the compiler.define field in next.config.js to define variables for all environments (server, edge, and client). Or, use compiler.defineServer to define variables only for server-side (server and edge) code:
The Next.js Compiler supports lifecycle hooks that allow you to run custom code at specific points during the build process. Currently, the following hook is supported:
A hook function that executes after production build compilation finishes, but before running post-compilation tasks such as type checking and static page generation. This hook provides access to project metadata including the project directory and build output directory, making it useful for third-party tools to collect build outputs like sourcemaps.
The hook receives an object with the following properties:
You can generate SWC's internal transform traces as chromium's trace event format.
Once enabled, swc will generate trace named as swc-trace-profile-${timestamp}.json under .next/. Chromium's trace viewer (chrome://tracing/, https://ui.perfetto.dev/), or compatible flamegraph viewer (https://www.speedscope.app/) can load & visualize generated traces.
You can configure swc's transform to use SWC's experimental plugin support written in wasm to customize transformation behavior.
swcPlugins accepts an array of tuples for configuring plugins. A tuple for the plugin contains the path to the plugin and an object for plugin configuration. The path to the plugin can be an npm module package name or an absolute path to the .wasm binary itself.
When your application has a .babelrc file, Next.js will automatically fall back to using Babel for transforming individual files. This ensures backwards compatibility with existing applications that leverage custom Babel plugins.