Useful Cheatsheetsusefulcheatsheets.com

Next.js Compiler

Chapter 13 · Page 91

Intermediate

Next.js Compiler

Understand the Next.js SWC compiler, build options, and performance optimizations.

TL;DR

01Next.js uses SWC, a Rust-based compiler for speed.
02SWC produces faster builds and smaller bundles than Babel.
03Configure compiler transformations in next.config.js for production.

Tips

01Next.js optimizations are automatic — you don't need to do anything special. Just write good code and the compiler handles the rest.

Warnings

01Avoid manually configuring Babel unless absolutely necessary — SWC is faster and handles most cases.

Notes

Useful Cheatsheetsusefulcheatsheets.com

Next.js Compiler

Chapter 13 · Page 92

Intermediate

Next.js Compiler

(continued)

SWC Compiler

Next.js uses SWC by default for faster compilation.
17x faster than Babel for transpilation.

Supports all modern JavaScript features.

# No configuration needed - works out of the box
npm run build

Built-in support for TypeScript and JSX.
SWC handles dead code elimination automatically during production builds.
```
npm run build
# Unused imports and exports are removed automatically
```

Check which compiler Next.js is using at build time.

next info
# Shows SWC or Babel depending on your config

Notes

Useful Cheatsheetsusefulcheatsheets.com

Next.js Compiler

Chapter 13 · Page 93

Intermediate

Next.js Compiler

(continued)

Compiler Configuration

Configure compiler options in next.config.js — SWC minification is enabled by default in Next.js 15.

// next.config.js
module.exports = {
  compiler: {
    reactRemoveProperties: true, // Remove React debugging props
    removeConsole: {
      exclude: ['error', 'warn'] // Keep error and warn logs
    }
  }
};

Enable styled-components transform natively via SWC — replaces babel-plugin-styled-components.
```
module.exports = {
  compiler: { styledComponents: true }
};
```

Strip all console.log calls from the production build, keeping error and warn.

module.exports = {
  compiler: {
    removeConsole: { exclude: ['error', 'warn'] }
  }
};

Remove data-testid attributes to reduce production HTML size.

module.exports = {
  compiler: {
    reactRemoveProperties: { properties: ["^data-testid$"] }
  }
};

Enable emotion CSS-in-JS support through the SWC compiler.

module.exports = {
  compiler: { emotion: true }
};

Notes

Useful Cheatsheetsusefulcheatsheets.com

Next.js Compiler

Chapter 13 · Page 94

Intermediate

Next.js Compiler

(continued)

Build Optimization

Tree-shake large icon and component libraries with optimizePackageImports.

// next.config.js
module.exports = {
  experimental: {
    optimizePackageImports: ["lucide-react", "@heroicons/react", "@mui/material"]
  }
};

Use output: 'standalone' for minimal Docker images in production.

module.exports = {
  output: "standalone" // Creates .next/standalone with no node_modules needed
};

Enable Turbopack for faster HMR and cold start in development (Next.js 15).

next dev --turbopack
# Rust-based bundler: faster incremental builds than webpack

Delete .babelrc to re-enable SWC if your project accidentally falls back to Babel.

# Next.js uses Babel instead of SWC when .babelrc exists
rm .babelrc   # or migrate its config to next.config.js compiler options

Add bundle analyzer to inspect chunk composition per route.

npm install -D @next/bundle-analyzer
ANALYZE=true npm run build  # Opens interactive treemap

Notes

Useful Cheatsheetsusefulcheatsheets.com

Next.js Compiler

Chapter 13 · Page 95

Intermediate

Next.js Compiler

(continued)

Next.js-Specific Features

Automatic image optimization during build.
CSS-in-JS extraction and optimization.

Automatic font optimization with next/font.

import { Inter } from 'next/font/google';
const inter = Inter();

Server Actions are compiled with special serialization automatically.

"use server";
export async function save(data: FormData) {
  // Compiled to a secure server endpoint automatically
}

TypeScript paths are resolved at compile time with no extra config.

{
  "compilerOptions": {
    "paths": { "@/*": ["./src/*"] }
  }
}

Notes

Useful Cheatsheetsusefulcheatsheets.com

Next.js Compiler

Chapter 13 · Page 96

Intermediate

Next.js Compiler

(continued)

Build Output and CI

Review the build output table after every npm run build to catch First Load JS regressions.

npm run build
# Route                 Size    First Load JS
# /                    5.2 kB        89.3 kB  ← aim for < 130 kB

Wrap next.config.js with bundle analyzer to generate an interactive treemap.

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true"
});
module.exports = withBundleAnalyzer({});

Run Lighthouse CI in GitHub Actions to gate performance regressions.

- name: Lighthouse CI
  run: lhci autorun
  env:
    LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_TOKEN }}

Set a minimum Lighthouse performance score to fail CI on regressions.

{
  "assert": {
    "assertions": {
      "categories:performance": ["error", { "minScore": 0.9 }]
    }
  }
}

Use next info in the terminal to confirm whether SWC or Babel is active.
```
next info
# Operating System: ..., SWC: true
```

Notes

Useful Cheatsheetsusefulcheatsheets.com

Next.js Compiler

Chapter 13 · Page 97

Intermediate

Next.js Compiler

(FAQ)

FAQ

SWC can be up to 17x faster for local compilation and 5x faster for full production builds. The difference is most noticeable in large projects with hundreds of files, where Babel's JavaScript-based transforms become the bottleneck.

Add a compiler key in next.config.js — for example, compiler: { styledComponents: true } enables the styled-components transform natively via SWC. This replaces the need for babel-plugin-styled-components and works automatically in both dev and production.

Next.js automatically falls back to Babel when it detects a .babelrc or babel.config.js file in the project root. Delete these files (migrating any custom plugins to next.config.js compiler options) to re-enable SWC.

Use modularizeImports in next.config.js to rewrite bulk imports into per-file imports at compile time — for example, configuring it for @mui/icons-material prevents the entire icon library from being bundled. This is handled by the SWC compiler and requires no runtime code changes.

Install @next/bundle-analyzer and set ANALYZE=true next build to get an interactive treemap of your bundles. For raw build timing, the CLI output already reports per-page sizes and the First Load JS for each route after every build.